:root {
--primary: #e21b4d;
--primary-hover: #b8163f;
--primary-rgb: 226, 27, 77;
--secondary: #0071e3;
--secondary-hover: #005bb5;
--on-primary: #ffffff;
--bg: #f5f5f7;
--surface: #ffffff;
--surface-hover: #fafafa;
--surface-active: #f0f0f0;
--canvas: #f5f5f7;
--text: #1d1d1f;
--text-secondary: #86868b;
--text-muted: #9ca3af;
--text-inverse: #ffffff;
--border: #d2d2d7;
--border-light: #e5e7eb;
--border-hover: #b0b0b5;
--success: #34c759;
--success-bg: #dcfce7;
--success-text: #166534;
--danger: #ff3b30;
--danger-bg: #fef2f2;
--danger-text: #991b1b;
--warning: #ff9500;
--warning-bg: #fffbeb;
--warning-text: #92400e;
--info: #3b82f6;
--info-bg: #eff6ff;
--info-text: #1e40af;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 24px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
--shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.12);
--radius-sm: 6px;
--radius: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
--emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Twemoji Mozilla", "EmojiOne Color", "Android Emoji";
--font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, var(--emoji);
--font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, var(--emoji);
--accent-2: var(--primary-hover);
--primary-soft: rgba(var(--primary-rgb), 0.1);
--success-soft: rgba(52, 199, 89, 0.1);
--warning-soft: rgba(255, 149, 0, 0.1);
--danger-soft: rgba(255, 59, 48, 0.1);
--info-soft: rgba(59, 130, 246, 0.1);
--transition: all 0.2s ease;
--shell-max-width: 1800px;
--z-tabbar: 80;
--z-dropdown: 1000;
--z-sidebar-scrim: 1090;
--z-sidebar: 1100;
--z-dock-band-min: 9988;
--z-dock-band-max: 9993;
--z-overlay: 9995;
--z-modal: 9999;
--z-modal-top: 10000;
--world-sea: #e4ebf3;
--world-sea-top: #eef2f7;
--world-land: #ccd6e2;
--world-land-edge: #eef2f7;
--world-ink: #334155;
--world-hub: #0d9488;
--world-hub-ink: #0f766e;
--world-hub-rgb: 13, 148, 136;
--hq-net: #5856d6;
--hq-net-2: #2a78d6;
--hq-s1: #e21b4d;
--hq-s2: #2a78d6;
--hq-s3: #eda100;
--hq-s1-track: rgba(226, 27, 77, 0.15);
--hq-s2-track: rgba(42, 120, 214, 0.15);
--hq-s3-track: rgba(237, 161, 0, 0.18);
--wa: #25d366;
--wa-ink: #053b1a;
--plan: #5b5bd6;
}
body.fi-panel-sm {
--primary: #4179f4;
--primary-hover: #1c4cac;
--primary-rgb: 65, 121, 244;
--secondary: #3d8fe6;
--secondary-hover: #1c4cac;
--accent-2: #3d8fe6;
--bg: #f4f7ff;
--surface: #ffffff;
--surface-hover: #f7f9ff;
--surface-active: #eaf0ff;
--canvas: #f4f7ff;
--text: #172c5b;
--text-secondary: #5b6472;
--text-muted: #98a4bd;
--text-inverse: #ffffff;
--border: #c4d3f3;
--border-light: #e0e8fb;
--border-hover: #a9bfe9;
--success: #12b76a;
--success-bg: #d5f6e6;
--success-text: #046c47;
--danger: #f0433c;
--danger-bg: #ffe2e0;
--danger-text: #a3130e;
--warning: #f5a524;
--warning-bg: #fff0a0;
--warning-text: #8a5300;
--info: #06b6d4;
--info-bg: #d3f4fa;
--info-text: #0b6c80;
--primary-soft: #dfe8ff;
--success-soft: rgba(18, 183, 106, 0.12);
--warning-soft: rgba(245, 165, 36, 0.14);
--danger-soft: rgba(240, 67, 60, 0.12);
--info-soft: rgba(6, 182, 212, 0.12);
--shadow-xs: 0 1px 2px rgba(38, 72, 140, 0.05);
--shadow-sm: 0 1px 2px rgba(38, 72, 140, 0.07);
--shadow: 0 4px 12px -2px rgba(38, 72, 140, 0.09);
--shadow-md: 0 8px 24px -6px rgba(38, 72, 140, 0.16);
--shadow-lg: 0 16px 40px -10px rgba(38, 72, 140, 0.2);
--shadow-xl: 0 22px 54px -14px rgba(38, 72, 140, 0.24);
--sm-idea: #64748b;
--sm-posted: #172c5b;
--sm-art-1: linear-gradient(140deg, #7bb8ff, #2f5fe0);
--sm-art-2: linear-gradient(140deg, #ffd76b, #ff8a3d);
--sm-art-3: linear-gradient(140deg, #8fe0d2, #0f8f92);
--sm-art-4: linear-gradient(140deg, #ffb3c9, #a44bd6);
--sm-art-5: linear-gradient(140deg, #ffc46b, #f0553d);
--sm-art-6: linear-gradient(140deg, #b7e08a, #3f9e5a);
--sm-art-7: linear-gradient(140deg, #9db9ff, #5b4ae0);
--sm-art-8: linear-gradient(140deg, #8fe6f5, #1d8fe1);
--sm-art-9: linear-gradient(140deg, #ffa8c5, #ff4d6d);
--sm-art-10: linear-gradient(140deg, #d9c4ff, #7c5cff);
--sm-aura-1: #8fd3ff;
--sm-aura-2: #4179f4;
--sm-aura-3: #dfe8ff;
--sm-pg-olami: #c41551;
--sm-pg-olami-ink: #8e0d3a;
--sm-pg-olami-soft: rgba(196, 21, 81, 0.12);
--sm-pg-thrive: #7fc4e8;
--sm-pg-thrive-ink: #1a5f80;
--sm-pg-thrive-soft: rgba(127, 196, 232, 0.18);
--sm-pg-nitzavim: #b0782e;
--sm-pg-nitzavim-ink: #7d5520;
--sm-pg-nitzavim-soft: rgba(176, 120, 46, 0.14);
--sm-pg-jya: #215ba9;
--sm-pg-jya-ink: #17407a;
--sm-pg-jya-soft: rgba(33, 91, 169, 0.12);
--sm-pg-slot1: #7c5cff;
--sm-pg-slot1-ink: #4a32b8;
--sm-pg-slot1-soft: rgba(124, 92, 255, 0.12);
--sm-pg-slot2: #0f8f92;
--sm-pg-slot2-ink: #0a6467;
--sm-pg-slot2-soft: rgba(15, 143, 146, 0.12);
}
html.dark body.fi-panel-sm {
--primary: #5b9bff;
--primary-hover: #8ab6ff;
--primary-rgb: 91, 155, 255;
--secondary: #38bdf8;
--accent-2: #38bdf8;
--bg: #0c1730;
--surface: #132247;
--surface-hover: #1b2d59;
--surface-active: #1b2d59;
--canvas: #0c1730;
--text: #eaf1ff;
--text-secondary: #a6b6d8;
--text-muted: #7286ab;
--text-inverse: #0c1730;
--border: #2f4680;
--border-light: #1f3160;
--border-hover: #3d5793;
--success: #34d99a;
--success-bg: #0f3830;
--success-text: #7ff0c6;
--danger: #ff6b7a;
--danger-bg: #3d1a25;
--danger-text: #ffa8b3;
--warning: #ffbe3d;
--warning-bg: #3a2d12;
--warning-text: #ffd98a;
--info: #22d3ee;
--info-bg: #0d3440;
--info-text: #8ce9f7;
--primary-soft: #1c3567;
--success-soft: rgba(52, 217, 154, 0.16);
--warning-soft: rgba(255, 190, 61, 0.16);
--danger-soft: rgba(255, 107, 122, 0.16);
--info-soft: rgba(34, 211, 238, 0.16);
--sm-idea: #5a6f96;
--sm-posted: #456394;
--sm-aura-1: #3d8fe6;
--sm-aura-2: #5b9bff;
--sm-aura-3: #22d3ee;
}
.olami-app :where(a, button, input, select, textarea, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible,
.pm-v2 :where(a, button, input, select, textarea, [role="button"]):focus-visible,
.rc-v2 :where(a, button, input, select, textarea, [role="button"]):focus-visible,
.olami-ee2-shell :where(a, button, input, select, textarea, [role="button"]):focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
html.dark {
--bg: #0e1117;
--surface: #181b21;
--surface-hover: #20242c;
--surface-active: #272c35;
--canvas: #0e1117;
--text: #e6e8ec;
--text-secondary: #a3a9b3;
--text-muted: #757c89;
--text-inverse: #0e1117;
--border: #2c323d;
--border-light: #232830;
--border-hover: #3a414e;
--success-bg: rgba(52, 199, 89, 0.16);
--success-text: #5dd97e;
--danger-bg: rgba(255, 59, 48, 0.16);
--danger-text: #ff6b61;
--warning-bg: rgba(255, 149, 0, 0.16);
--warning-text: #ffb340;
--info-bg: rgba(59, 130, 246, 0.16);
--info-text: #6ea8fe;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
--shadow-md: 0 4px 24px rgba(0, 0, 0, 0.55);
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
--shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.7);
--primary-soft: rgba(var(--primary-rgb), 0.2);
--success-soft: rgba(52, 199, 89, 0.16);
--warning-soft: rgba(255, 149, 0, 0.16);
--danger-soft: rgba(255, 59, 48, 0.16);
--info-soft: rgba(59, 130, 246, 0.16);
--world-sea: #0f1620;
--world-sea-top: #131c28;
--world-land: #263243;
--world-land-edge: #1a2432;
--world-ink: #cbd5e1;
--hq-net: #6c6ae0;
--hq-net-2: #3987e5;
--hq-s1: #f2456f;
--hq-s2: #3987e5;
--hq-s3: #c98500;
--hq-s1-track: rgba(242, 69, 111, 0.18);
--hq-s2-track: rgba(57, 135, 229, 0.18);
--hq-s3-track: rgba(201, 133, 0, 0.2);
}
:root {
--limestone: var(--surface-active);
--limestone-2: var(--bg);
--ink: var(--text);
--ink-soft: var(--text-secondary);
--line: var(--border-light);
--white: var(--surface);
--horizon: var(--primary);
--horizon-deep: var(--primary-hover);
--brass: var(--warning);
--brass-deep: var(--warning-text);
--clay: var(--danger);
--font-body: var(--font-sans);
--font-display: var(--font-sans);
}
.thrive-page { display: flex; flex-direction: column; gap: 1.25rem; }
.thrive-greeting { font-size: 1.4rem; font-weight: 800; color: var(--text); margin: 0; }
.dark .thrive-greeting { color: #fff; }
.thrive-nudge { font-size: 1rem; font-weight: 600; margin-top: 0.15rem; }
.thrive-nudge--danger { color: #ef4444; }
.thrive-nudge--warning { color: #f59e0b; }
.thrive-nudge--success { color: #16a34a; }
.thrive-nudge--gray { color: #6b7280; }
.thrive-toolbar { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: #6b7280; flex-wrap: wrap; }
.thrive-select { border: 1px solid var(--border); border-radius: 0.6rem; padding: 0.3rem 0.6rem; font-size: 0.85rem; background: var(--surface); color: var(--text); }
.dark .thrive-select { background: #111827; border-color: rgba(255,255,255,.12); color: #fff; }
.thrive-banner { border-radius: 0.75rem; padding: 0.7rem 1rem; font-size: 0.85rem; }
.thrive-banner--info { background: color-mix(in srgb, var(--primary) 8%, #fff); color: color-mix(in srgb, var(--primary) 72%, #000); }
.dark .thrive-banner--info { background: rgba(226,27,77,.12); color: #f9a8c4; }
.thrive-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.75rem; }
.thrive-stats--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 1024px) { .thrive-stats--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.thrive-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 0.85rem; padding: 0.85rem 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.dark .thrive-stat { background: #1f2937; border-color: rgba(255,255,255,.08); }
.thrive-stat__num { font-size: 1.7rem; font-weight: 800; line-height: 1; }
.thrive-stat__label { margin-top: 0.3rem; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }
.thrive-c-primary { color: var(--primary); } .thrive-c-green { color: #16a34a; } .thrive-c-red { color: #ef4444; }
.thrive-c-amber { color: #f59e0b; } .thrive-c-gray { color: #9ca3af; } .thrive-c-ink { color: var(--text); }
.dark .thrive-c-ink { color: #fff; }
.thrive-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.85rem; }
.thrive-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-left-width: 4px; border-radius: 0.85rem; padding: 0.9rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); display: flex; flex-direction: column; gap: 0.55rem; }
.dark .thrive-card { background: #1f2937; border-color: rgba(255,255,255,.08); }
.thrive-card--green { border-left-color: #22c55e; } .thrive-card--yellow { border-left-color: #f59e0b; }
.thrive-card--red { border-left-color: #ef4444; } .thrive-card--gray { border-left-color: #9ca3af; }
.thrive-card__top { display: flex; align-items: center; gap: 0.6rem; }
.thrive-avatar { width: 2.4rem; height: 2.4rem; border-radius: 9999px; background: color-mix(in srgb, var(--primary) 12%, #fff); color: var(--primary); font-weight: 700; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; flex: none; }
.dark .thrive-avatar { background: rgba(226,27,77,.22); color: #f9a8c4; }
.thrive-name { font-weight: 700; color: var(--text); font-size: 0.95rem; }
.dark .thrive-name { color: #fff; }
.thrive-status { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; margin-top: 0.1rem; }
.thrive-status--green { color: #16a34a; } .thrive-status--yellow { color: #d97706; }
.thrive-status--red { color: #dc2626; } .thrive-status--gray { color: #6b7280; }
.thrive-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; flex: none; }
.thrive-dot--green { background: #22c55e; } .thrive-dot--yellow { background: #f59e0b; }
.thrive-dot--red { background: #ef4444; } .thrive-dot--gray { background: #9ca3af; }
.thrive-fire { margin-left: auto; font-size: 1.05rem; }
.thrive-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.72rem; color: #6b7280; align-items: center; }
.thrive-chip { background: #f3f4f6; border-radius: 9999px; padding: 0.1rem 0.55rem; }
.dark .thrive-chip { background: rgba(255,255,255,.06); }
.thrive-actions { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.15rem; }
.thrive-btn { flex: 1; border: none; border-radius: 0.6rem; padding: 0.4rem 0.6rem; font-size: 0.78rem; font-weight: 600; cursor: pointer; background: var(--primary); color: #fff; transition: filter .15s; }
.thrive-btn:hover { filter: brightness(0.93); }
.thrive-btn--muted { background: #f3f4f6; color: #9ca3af; cursor: default; }
.dark .thrive-btn--muted { background: rgba(255,255,255,.06); }
.thrive-iconbtn { border: none; background: transparent; color: #9ca3af; cursor: pointer; padding: 0.35rem; border-radius: 0.45rem; line-height: 1; }
.thrive-iconbtn:hover { background: #fee2e2; color: #ef4444; }
.dark .thrive-iconbtn:hover { background: rgba(239,68,68,.15); }
.thrive-table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
.thrive-table th { text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; padding: 0.5rem 0.6rem; border-bottom: 2px solid #e5e7eb; }
.thrive-table td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border-light, var(--border)); color: var(--text); }
.dark .thrive-table th { border-color: rgba(255,255,255,.1); }
.dark .thrive-table td { border-color: rgba(255,255,255,.05); color: #e5e7eb; }
.thrive-num { text-align: right; font-variant-numeric: tabular-nums; }
.thrive-rank { color: #9ca3af; }
.thrive-link { color: var(--primary); font-weight: 600; text-decoration: none; }
.thrive-link:hover { text-decoration: underline; }
.thrive-empty { text-align: center; color: #6b7280; padding: 1.75rem 0; font-size: 0.875rem; }
.hq-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .hq-charts { grid-template-columns: 1fr; } }
.hq-goalcell { display: inline-flex; flex-direction: column; gap: 3px; min-width: 92px; }
.hq-goalcell-num { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; }
.dark .hq-goalcell-num { color: #fff; }
.hq-goalcell-bar { height: 5px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.dark .hq-goalcell-bar { background: rgba(255,255,255,.08); }
.hq-goalcell-fill { display: block; height: 100%; border-radius: 999px; }
.hq-mini-none { color: #cbd5e1; }
.thrive-tabs {
display: inline-flex; gap: 4px; padding: 5px; max-width: 100%;
background: var(--surface-active, #eef1f5);
border: 1px solid var(--border-light, #e5e7eb);
border-radius: var(--radius-lg, 14px);
overflow-x: auto; scrollbar-width: none;
}
.thrive-tabs::-webkit-scrollbar { display: none; }
.thrive-tab {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 18px; border: 0; background: none;
border-radius: var(--radius-md, 10px);
font: inherit; font-size: 14px; font-weight: 600;
color: var(--text-secondary, #64748b);
white-space: nowrap; cursor: pointer; text-decoration: none;
transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.thrive-tab:hover { color: var(--text, #111827); }
.thrive-tab.on, .thrive-tab.active, .thrive-tab[aria-current="page"] {
background: var(--surface, #fff); color: var(--primary);
box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,23,42,.08));
}
.thrive-tab__n {
font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 7px;
background: color-mix(in srgb, currentColor 16%, transparent);
}
.dark .thrive-tabs { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
.dark .thrive-tab.on, .dark .thrive-tab.active, .dark .thrive-tab[aria-current="page"] { background: #1f2937; }
@media (max-width: 640px) { .thrive-tab { padding: 9px 13px; font-size: 13px; gap: 6px; } }
.olami-app {
--bg: #f5f5f7;
--surface: #ffffff;
--surface-hover: #fafafa;
--surface-alt: #f5f5f7;
--text: #1d1d1f;
--text-secondary: #6e6e73;
--text-muted: #9ca3af;
--border: #d2d2d7;
--border-light: #e5e7eb;
--success: #34c759;
--danger: #ff3b30;
--warning: #ff9500;
--info: #3b82f6;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 24px rgba(0, 0, 0, 0.06);
--radius-sm: 8px;
--radius-md: 12px;
--font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, var(--emoji, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji");
--transition: all 0.2s ease;
color: var(--text);
font-family: var(--font);
}
.olami-app .page-shell { max-width: var(--shell-max-width, 1800px); margin: 0 auto; padding: 8px 0 24px; }
.olami-app .btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 20px; border-radius: var(--radius-sm); font-size: 14px;
font-weight: 600; cursor: pointer; border: none; transition: var(--transition);
text-decoration: none; font-family: var(--font); line-height: 1.4;
background: var(--surface); color: var(--text);
}
.olami-app .btn-primary { background: var(--primary); color: #fff; }
.olami-app .btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.olami-app .status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.olami-app .status-dot.green { background: var(--success); }
.olami-app .status-dot.yellow { background: var(--warning); }
.olami-app .status-dot.red { background: var(--danger); }
.olami-app .status-dot.gray { background: var(--text-muted); }
.olami-app .om-header-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.olami-app .om-header-greeting { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; }
.olami-app .om-header-insight { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.olami-app .om-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.olami-app .om-toolbar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.olami-app .om-tool-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
cursor: pointer; border: 1px solid var(--border-light); background: var(--surface);
color: var(--text); transition: all 0.15s; white-space: nowrap; line-height: 1.3;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.olami-app .om-tool-btn:hover { background: var(--surface-alt); border-color: #ccc; }
.olami-app .om-topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.olami-app .om-topbar .mystudents-tabs { margin: 0; }
.olami-app .om-topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.olami-app .om-icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--border-light); background: var(--surface); color: var(--text); font-size: 16px; cursor: pointer; transition: all .15s; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.olami-app .om-icon-btn:hover { background: var(--surface-alt); border-color: var(--border-hover); }
.olami-app .om-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--radius-sm); border: none; background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.olami-app .om-add-btn:hover { background: var(--primary-hover); }
.olami-app .om-mentor-switch { height: 38px; max-width: 200px; border: 1px solid var(--border-light); background: var(--surface); color: var(--text); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; padding: 0 10px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.olami-app .om-settings-menu { position: relative; }
.olami-app .om-settings-dropdown { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 210px; background: var(--surface); border: 1px solid var(--border-light); border-radius: 12px; box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.16)); padding: 6px; display: flex; flex-direction: column; }
.olami-app .om-settings-dropdown button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: none; padding: 9px 11px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.olami-app .om-settings-dropdown button:hover { background: var(--surface-alt); }
.olami-app .om-search-row { display: flex; align-items: stretch; gap: 10px; margin-bottom: 16px; }
.olami-app .om-search-row .om-search-wrap-v2 { flex: 1; min-width: 0; }
.olami-app .om-log-btn { flex-shrink: 0; }
.olami-app .om-log-btn .om-log-ic { display: none; }
@media (max-width: 640px) {
.olami-app .om-log-btn .om-log-full { display: none; }
.olami-app .om-log-btn .om-log-ic { display: inline; font-size: 16px; }
.olami-app .om-log-btn { padding: 8px 12px; }
}
.olami-app .om-stats-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.olami-app .om-stat-pill { background: var(--surface); border: 1px solid var(--border-light); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }
.olami-app .om-stat-num { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -0.5px; }
.olami-app .om-stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); line-height: 1.3; }
.olami-app .om-c-blue { color: var(--info); } .olami-app .om-c-green { color: var(--success); } .olami-app .om-c-red { color: var(--danger); }
.olami-app .om-week-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.olami-app .om-week-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-right: 4px; }
.olami-app .om-week-pill { padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1.5px solid var(--border-light); background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: all 0.2s; line-height: 1.3; }
.olami-app .om-week-pill:hover { border-color: var(--primary); color: var(--primary); }
.olami-app .om-week-pill.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.olami-app .om-search-wrap-v2 { margin-bottom: 20px; position: relative; }
.olami-app .om-search-input { width: 100%; padding: 12px 16px 12px 42px; border: 1.5px solid var(--border-light); border-radius: 12px; font-size: 14px; background: var(--surface); color: var(--text); transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; outline: none; }
.olami-app .om-search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(180, 31, 81, 0.12); }
.olami-app .om-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-secondary, #6e6e73); font-size: 16px; pointer-events: none; }
.olami-app .mentor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 14px; align-items: stretch; }
.olami-app .mentor-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: 20px; padding: 14px 12px 12px; text-align: center; box-shadow: var(--shadow-sm); position: relative; display: flex; flex-direction: column; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.olami-app .mentor-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.olami-app .mentor-card.green { border-color: var(--success); }
.olami-app .mentor-card.yellow { border-color: var(--warning); }
.olami-app .mentor-card.red { border-color: var(--danger); }
.olami-app .mentor-card.gray { border-color: var(--border); }
.olami-app .mentor-card .m-fire { position: absolute; top: 10px; left: 12px; font-size: 13px; z-index: 2; }
.olami-app .mentor-card .m-contact-btn { position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--primary); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(180, 31, 81, 0.28); z-index: 3; user-select: none; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.18s ease; animation: m-contact-pulse 2.2s ease-in-out infinite; }
.olami-app .mentor-card .m-contact-btn:hover { transform: scale(1.08); }
.olami-app .mentor-card .m-contact-btn.is-contacted { background: var(--success); box-shadow: 0 1px 3px rgba(22, 163, 74, 0.25); animation: none; }
@keyframes m-contact-pulse { 0%, 100% { box-shadow: 0 2px 6px rgba(180, 31, 81, 0.28); } 50% { box-shadow: 0 2px 14px rgba(180, 31, 81, 0.45); } }
.olami-app .mentor-card.has-contact-btn .m-fire { left: 44px; }
.olami-app .mentor-card .m-corner-icons { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; font-size: 12.5px; color: var(--text-muted); z-index: 2; }
.olami-app .mentor-card .m-corner-icons > span { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; opacity: 0.65; transition: opacity 0.15s, background 0.15s, transform 0.15s; }
.olami-app .mentor-card .m-corner-icons > span:hover { opacity: 1; background: var(--bg); transform: scale(1.05); }
.olami-app .mentor-card .m-avatar-wrap { position: relative; display: block; width: 54px; height: 54px; margin: 4px auto 8px; cursor: pointer; }
.olami-app .mentor-card .m-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2.5px solid var(--surface); box-shadow: 0 0 0 1.5px var(--border-light); display: flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: 16px; }
.olami-app .mentor-card .m-avatar-wrap .status-dot { position: absolute; bottom: 1px; right: 1px; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid var(--surface); }
.olami-app .mentor-card .m-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.005em; }
.olami-app .mentor-card .m-meta { font-size: 11px; color: var(--text-muted); margin: 2px 0 0; }
.olami-app .mentor-card .m-weekly { display: flex; align-items: center; gap: 6px; background: var(--primary-soft); border-radius: 12px; padding: 7px 8px 7px 10px; margin-top: 10px; text-align: left; }
.olami-app .mentor-card .m-weekly-text { flex: 1; min-width: 0; font-size: 11px; line-height: 1.25; }
.olami-app .mentor-card .m-weekly-day { display: block; font-weight: 600; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olami-app .mentor-card .m-weekly-time { display: block; color: var(--text); font-weight: 500; }
.olami-app .mentor-card .m-weekly-empty { background: transparent; border: 1.5px dashed var(--border); border-radius: 12px; padding: 10px; margin-top: 10px; font-size: 11px; color: var(--text-muted); cursor: pointer; text-align: center; font-style: italic; transition: all 0.15s; }
.olami-app .mentor-card .m-weekly-empty:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.olami-app .mentor-card .m-actions { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.olami-app .mentor-card .m-btn { width: 100%; padding: 9px 8px; border: none; border-radius: 11px; background: var(--primary); color: #fff; font-size: 11.5px; font-weight: 600; cursor: pointer; line-height: 1.2; display: block; transition: background 0.15s; }
.olami-app .mentor-card .m-btn:hover { background: var(--primary-hover); }
.olami-app .mentor-card .m-btn.m-btn-success { background: var(--success); opacity: 0.95; }
.olami-app .mentor-card .m-btn.m-btn-success:hover { opacity: 1; background: var(--success); }
.olami-app .mentor-card .m-btn.m-btn-break { background: var(--text-muted); cursor: default; }
.olami-app .mentor-card .m-btn-row { display: flex; gap: 6px; }
.olami-app .mentor-card .m-btn-secondary { flex: 1; padding: 7px 6px; border: none; border-radius: 10px; cursor: pointer; font-size: 11px; font-weight: 600; color: #fff; line-height: 1.2; transition: opacity 0.15s; }
.olami-app .mentor-card .m-btn-secondary:hover { opacity: 0.85; }
.olami-app .mentor-card .m-btn-secondary.cancel { background: var(--warning); }
.olami-app .mentor-card .m-btn-secondary.noshow { background: var(--danger); }
.olami-app .mentor-card .m-btn-secondary.touch { background: var(--primary); }
.olami-app .om-empty-state { grid-column: 1 / -1; text-align: center; padding: 40px 20px; color: var(--text-secondary); font-size: 14px; }
.olami-app .om-empty-state strong { color: var(--text); display: block; margin-bottom: 4px; }
@keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.olami-app .om-pop-in { animation: popIn 0.4s; }
.olami-app .om-readonly-bar { background: var(--primary-soft); color: var(--primary-hover); border-radius: 12px; padding: 10px 16px; font-size: 13px; margin-bottom: 14px; }
@media (max-width: 768px) {
.olami-app .om-header-greeting { font-size: 18px; }
.olami-app .mentor-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.olami-app .mentor-card { padding: 12px 10px 10px; border-radius: 17px; }
.olami-app .mentor-card .m-avatar-wrap { width: 46px; height: 46px; margin: 2px auto 6px; }
.olami-app .mentor-card .m-name { font-size: 12.5px; }
.olami-app .mentor-card .m-meta { font-size: 10.5px; }
.olami-app .om-stats-strip { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.olami-app .om-stats-strip::-webkit-scrollbar { display: none; }
.olami-app .om-stat-pill { flex: 0 0 auto; padding: 8px 12px; gap: 8px; }
.olami-app .om-stat-num { font-size: 19px; }
.olami-app .om-stat-label { font-size: 9px; letter-spacing: .3px; }
.olami-app .om-mentor-switch { max-width: 130px; }
}
.mystudents-tabs {
display: flex;
gap: 4px;
align-items: stretch;
margin: 0 0 22px;
padding: 5px;
background: var(--surface-active);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
width: fit-content;
max-width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.mystudents-tabs::-webkit-scrollbar { display: none; }
.mystudents-tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 600;
color: var(--text-secondary);
text-decoration: none;
white-space: nowrap;
transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.mystudents-tab:hover { color: var(--text); }
.mystudents-tab.on {
background: var(--surface);
color: var(--primary);
box-shadow: var(--shadow-sm);
}
.mystudents-tab-ic { font-size: 16px; line-height: 1; }
@media (max-width: 640px) {
.mystudents-tabs { width: 100%; -webkit-mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent);
mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent); }
.mystudents-tab { padding: 9px 13px; font-size: 13px; gap: 6px; }
}
.stmodal-hint { margin: 0 0 14px; font-size: 13.5px; color: var(--text-secondary); }
.stmodal-nowa {
margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radius);
background: var(--warning-bg); color: var(--warning-text); font-size: 13px; line-height: 1.45;
}
.stmodal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stmodal-chip {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px; border-radius: var(--radius-md);
background: var(--surface); border: 1px solid var(--border-light);
text-decoration: none; color: var(--text); font-weight: 600; font-size: 14px;
cursor: pointer; text-align: left; width: 100%;
transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.stmodal-chip:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.stmodal-chip:active { transform: scale(.99); }
.stmodal-chip[disabled] { opacity: .5; cursor: not-allowed; }
.stmodal-chip-em { font-size: 20px; line-height: 1; }
.stmodal-chip-lbl { flex: 1; }
.stmodal-chip-go { font-size: 12px; font-weight: 700; color: var(--primary); opacity: .85; }
.stmodal-chip.log-only .stmodal-chip-go { color: var(--text-secondary); }
.stmodal-foot { margin: 14px 0 0; font-size: 12px; color: var(--text-secondary); }
@media (max-width: 560px) { .stmodal-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
.stmodal-grid { grid-template-columns: 1fr !important; }
}
.olami-app .mentor-card .m-del-corner { position: absolute; top: 8px; left: 8px; font-size: 13px; line-height: 1; cursor: pointer; opacity: .3; z-index: 3; transition: opacity .15s ease, transform .15s ease; user-select: none; }
.olami-app .mentor-card .m-del-corner:hover { opacity: 1; transform: scale(1.12); }
.olami-app .mentor-card.has-contact-btn .m-del-corner { top: 42px; left: 12px; }
.olami-app .om-split { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 18px; align-items: start; }
.olami-app .om-rail { background: var(--surface); border: 1px solid var(--border-light); border-radius: 16px; padding: 14px 15px; box-shadow: var(--shadow-sm); position: sticky; top: 12px; }
.olami-app .om-rail-h { display: flex; align-items: center; gap: 8px; }
.olami-app .om-rail-t { font-size: 13.5px; font-weight: 800; letter-spacing: -0.2px; color: var(--text); }
.olami-app .om-rail-n { font-size: 11px; font-weight: 800; color: var(--text-secondary); background: var(--surface-active); border-radius: 999px; padding: 2px 8px; }
.olami-app .om-rail-sub { font-size: 11px; color: var(--text-secondary); line-height: 1.4; margin-top: 2px; }
.olami-app .om-rail-add { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border-light); background: var(--surface); color: var(--primary); font-size: 15px; font-weight: 800; line-height: 1; cursor: pointer; }
.olami-app .om-rail-add:hover { border-color: var(--primary); background: var(--primary-soft); }
.olami-app .om-rail-grp { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 14px 0 7px; }
.olami-app .om-rail-empty { text-align: center; padding: 18px 8px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.olami-app .om-rail-log { width: 100%; justify-content: center; margin-top: 11px; }
.olami-app .om-mt-list { display: flex; flex-direction: column; gap: 5px; }
.olami-app .om-mt { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; text-align: left; cursor: pointer;
background: var(--surface); border: 1px solid var(--border-light); border-left: 3px solid var(--border); border-radius: 11px; padding: 8px 10px;
box-shadow: var(--shadow-xs); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.olami-app .om-mt:hover { box-shadow: var(--shadow-sm); }
.olami-app .om-mt.is-next { border-left-color: var(--info); background: var(--info-bg); }
.olami-app .om-mt.is-upcoming { border-left-color: var(--info); }
.olami-app .om-mt.is-open { border-left-color: var(--warning); background: var(--warning-bg); }
.olami-app .om-mt.is-done { border-left-color: var(--success); }
.olami-app .om-mt-when { flex: none; width: 40px; text-align: center; }
.olami-app .om-mt-d { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.05; letter-spacing: -0.4px; color: var(--text); font-variant-numeric: tabular-nums; }
.olami-app .om-mt-m { display: block; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.olami-app .om-mt-main { min-width: 0; flex: 1; }
.olami-app .om-mt-name { display: block; font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olami-app .om-mt-meta { display: block; font-size: 11px; color: var(--text-secondary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olami-app .om-mt-go { flex: none; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--border-light); background: var(--surface); font-size: 11px; font-weight: 700; color: var(--text); }
.olami-app .om-mt-go.pri { background: var(--primary); border-color: var(--primary); color: var(--text-inverse); }
.olami-app .om-mt-gc { flex: none; font-size: 10.5px; opacity: 0.5; }
@media (max-width: 960px) {
.olami-app .om-split { grid-template-columns: 1fr; }
.olami-app .om-rail { position: static; }
}
.olami-app {
--radius-lg: 16px;
--success-bg: #dcfce7;
--success-text: #166534;
--danger-bg: #fef2f2;
--danger-text: #991b1b;
--success-soft: rgba(52, 199, 89, 0.1);
--warning-soft: rgba(255, 149, 0, 0.1);
--danger-soft: rgba(255, 59, 48, 0.1);
--info-soft: rgba(59, 130, 246, 0.1);
}
.olami-app .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.olami-app .page-title { font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 8px; color: var(--text); }
.olami-app .page-subtitle { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.olami-app .btn-wrap { display: inline-flex; }
.olami-app .btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: var(--transition); text-decoration: none; font-family: var(--font); line-height: 1.4; box-sizing: border-box; background: var(--surface); color: var(--text); }
.olami-app .btn-primary { background: var(--primary); color: #fff; }
.olami-app .btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.olami-app .btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.olami-app .btn-secondary:hover { background: var(--surface-hover); border-color: var(--text-muted); }
.olami-app .btn-sm { padding: 7px 14px; font-size: 12px; }
.olami-app .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.olami-app .badge-primary { background: var(--primary-soft); color: var(--primary); }
.olami-app .badge-info { background: var(--info-soft); color: var(--info); }
.olami-app .badge-success { background: var(--success-soft); color: var(--success); }
.olami-app .badge-warning { background: var(--warning-soft); color: var(--warning); }
.olami-app .badge-danger { background: var(--danger-soft); color: var(--danger); }
.olami-app .badge-muted { background: var(--border-light); color: var(--text-secondary); }
.olami-app .input { padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; font-family: var(--font); width: 100%; transition: var(--transition); background: var(--surface); box-sizing: border-box; }
.olami-app .input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.olami-app .input-search { padding-left: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 10px center; background-size: 16px; }
.olami-app .ec-frontdoor { margin-bottom: 20px; }
.olami-app .ec-frontdoor-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 2px 2px 12px; }
.olami-app .ec-frontdoor-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.olami-app .ec-door { display: flex; flex-direction: column; gap: 4px; padding: 20px 18px 16px; border-radius: 16px; text-decoration: none; position: relative; overflow: hidden; border: 1px solid var(--border-light); background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s, border-color .18s; }
.olami-app .ec-door::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--acc); }
.olami-app .ec-door:hover { transform: translateY(-4px); box-shadow: 0 14px 30px color-mix(in srgb, var(--acc) 28%, transparent); border-color: color-mix(in srgb, var(--acc) 45%, var(--border-light)); }
.olami-app .ec-door-icon { font-size: 30px; line-height: 1; margin-bottom: 6px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .08)); transition: transform .18s cubic-bezier(.2, .7, .3, 1); }
.olami-app .ec-door:hover .ec-door-icon { transform: scale(1.14) rotate(-5deg); }
.olami-app .ec-door-title { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -.2px; }
.olami-app .ec-door-sub { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.olami-app .ec-door-go { margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--acc); display: inline-flex; align-items: center; gap: 4px; transition: gap .18s; }
.olami-app .ec-door:hover .ec-door-go { gap: 9px; }
.olami-app .ec-door--create { --acc: #16a34a; }
.olami-app .ec-door--recruit { --acc: #f59e0b; }
.olami-app .ec-door--manage { --acc: #6366f1; }
@media (max-width: 900px) { .olami-app .ec-frontdoor-cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
.olami-app .ec-door, .olami-app .ec-door-icon, .olami-app .ec-door-go { transition: none; }
.olami-app .ec-door:hover { transform: none; }
}
.olami-app .view-tabs { display: inline-flex; background: var(--border-light); padding: 4px; border-radius: 10px; margin-bottom: 20px; }
.olami-app .view-tab { border: none; background: none; padding: 6px 16px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all 0.2s; }
.olami-app .view-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.olami-app .section-header { font-size: 14px; font-weight: 700; color: var(--text-secondary); margin: 24px 0 12px; display: flex; align-items: center; gap: 8px; }
.olami-app .event-section { margin-bottom: 36px; }
.olami-app .empty-state { text-align: center; padding: 50px; background: var(--surface-hover); border-radius: 12px; color: var(--text-muted); }
.olami-app .empty-state strong { color: var(--text); display: block; margin-bottom: 8px; font-size: 16px; }
.olami-app .events-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.olami-app .event-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); display: flex; flex-direction: column; }
.olami-app .event-card .ev-img { height: 120px; background: linear-gradient(135deg, var(--primary), #d4456e); position: relative; display: flex; align-items: flex-end; padding: 12px; }
.olami-app .event-card .ev-img .ev-badge { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; }
.olami-app .event-card .ev-body { padding: 14px; flex: 1; }
.olami-app .event-card .ev-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; color: var(--text); }
.olami-app .event-card .ev-date { font-size: 12px; color: var(--text-secondary); }
.olami-app .event-card .ev-footer { padding: 10px 14px; border-top: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.olami-app .event-card.is-program-card { border: 2px solid rgba(124, 58, 237, 0.2); }
.olami-app .event-card.is-program-card:hover { border-color: rgba(124, 58, 237, 0.4); }
.olami-app .card-reg-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.olami-app .card-reg-toggle .reg-status { font-weight: 600; font-size: 11px; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.olami-app .card-reg-toggle.is-open .reg-status { background: var(--success-bg); color: var(--success-text); }
.olami-app .card-reg-toggle.is-closed .reg-status { background: var(--danger-bg); color: var(--danger); }
.olami-app .toggle { width: 40px; height: 22px; background: var(--border); border-radius: 11px; position: relative; cursor: pointer; transition: 0.2s; flex-shrink: 0; }
.olami-app .toggle.on { background: var(--success); }
.olami-app .toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.olami-app .toggle.on::after { left: 20px; }
@media (max-width: 1024px) { .olami-app .events-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .olami-app .events-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .olami-app .events-grid { grid-template-columns: 1fr; } }
.ecv2 {
--b: var(--primary);
--bs: var(--primary-soft);
--card: var(--surface);
--ink: var(--text);
--mut: var(--text-secondary);
--ln: var(--border-light);
--ln2: color-mix(in srgb, var(--border-light) 55%, transparent);
--teal: #0d9488; --teal-s: #f0fdfa; --teal-ink: #0f766e;
--rec: #e21b4d; --rec-s: #fdecf1; --rec-ink: #b8163f;
--rose: #e03131;
--p1: #e21b4d; --p2: #8b5cf6; --p3: #3b82f6; --p4: #16a34a; --hold: #94a3b8;
--rad: 14px;
color: var(--ink);
font-size: 14px;
}
.ecv2 .ecv2-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ecv2 .ecv2-title { font-size: 22px; font-weight: 800; letter-spacing: -.4px; }
.ecv2 .ecv2-sub { font-size: 13px; color: var(--mut); margin-top: 2px; }
.ecv2 .ecv2-head .grow { flex: 1; }
.ecv2 .b { border: 1px solid var(--ln); background: var(--card); border-radius: 10px; padding: 9px 15px; font-weight: 700; font-size: 13.5px; color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; cursor: pointer; transition: border-color .12s, background .12s; }
.ecv2 .b:hover { border-color: var(--border-hover); }
.ecv2 .b--primary { background: var(--b); border-color: var(--b); color: #fff; }
.ecv2 .b--primary:hover { background: var(--primary-hover); color: #fff; }
.ecv2 .b--teal { background: var(--teal); border-color: var(--teal); color: #fff; }
.ecv2 .b--rec { background: var(--rec); border-color: var(--rec); color: #fff; }
.ecv2 .b--rec-o { border-color: color-mix(in srgb, var(--rec) 45%, var(--ln)); color: var(--rec); }
.ecv2 .b--rec-o:hover { border-color: var(--rec); background: var(--rec-s); }
.ecv2 .b.is-open { border-color: var(--b); color: var(--b); }
.ecv2 .b--sm { padding: 7px 11px; font-size: 12.5px; border-radius: 9px; }
.ecv2 .b--xs { padding: 5px 9px; font-size: 12px; border-radius: 8px; gap: 5px; }
.ecv2 .iconb { border: 1px solid var(--ln); background: var(--card); border-radius: 9px; width: 34px; height: 34px; display: grid; place-items: center; color: var(--mut); font-size: 15px; cursor: pointer; }
.ecv2 .iconb:hover { border-color: var(--border-hover); color: var(--ink); }
.ecv2 .ecv2-copy.is-done { border-color: var(--teal); color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, transparent); }
.ecv2 .seg { display: inline-flex; background: var(--surface-active); border-radius: 12px; padding: 4px; gap: 4px; }
.ecv2 .seg button { border: 0; background: transparent; font-weight: 700; font-size: 13.5px; color: var(--mut); padding: 8px 15px; border-radius: 9px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ecv2 .seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.ecv2 .search { padding: 9px 13px; border: 1px solid var(--ln); border-radius: 10px; font: inherit; font-size: 13px; background: var(--surface-hover); color: var(--ink); width: 220px; }
.ecv2 .search:focus { outline: none; border-color: var(--b); box-shadow: 0 0 0 3px var(--bs); }
.ecv2 .ec-search { width: 100%; box-sizing: border-box; margin: 0 0 16px; }
.ecv2 .ec-view { position: relative; }
.ecv2 .ec-view-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 210px; background: var(--card); border: 1px solid var(--ln); border-radius: 12px; box-shadow: var(--shadow-md); padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.ecv2 .ec-view-grp { display: flex; flex-direction: column; gap: 6px; }
.ecv2 .ec-view-lbl { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--mut); }
.ecv2 .ec-view-menu .seg { width: 100%; }
.ecv2 .ec-view-menu .seg button { flex: 1; justify-content: center; }
[x-cloak] { display: none !important; }
.ecv2 .sec { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--mut); margin: 26px 0 12px; display: flex; align-items: center; gap: 9px; }
.ecv2 .sec .pd { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.ecv2 .sec .goal { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: var(--mut); }
.ecv2 .sec .goal b { color: var(--ink); }
.ecv2 .sec .sec-add { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 700; color: #8b5cf6; background: rgba(139,92,246,.1); border: 1px solid rgba(139,92,246,.28); border-radius: 8px; padding: 4px 10px; cursor: pointer; transition: .15s; }
.ecv2 .sec .sec-add:hover { background: rgba(139,92,246,.16); border-color: #8b5cf6; }
.ecv2 .regtog { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; cursor: pointer; }
.ecv2 .regtog .tg { width: 38px; height: 21px; background: var(--border); border-radius: 11px; position: relative; flex: none; transition: .2s; }
.ecv2 .regtog.on .tg { background: var(--teal); }
.ecv2 .regtog .tg::after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.ecv2 .regtog.on .tg::after { left: 19px; }
.ecv2 .regtog .rs { font-weight: 800; font-size: 10px; padding: 2px 8px; border-radius: 5px; text-transform: uppercase; letter-spacing: .4px; }
.ecv2 .regtog.on .rs { background: var(--teal-s); color: var(--teal-ink); }
.ecv2 .regtog:not(.on) .rs { background: var(--danger-bg); color: var(--danger-text); }
.ecv2 .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1500px) { .ecv2 .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .ecv2 .grid { grid-template-columns: 1fr; } }
.ecv2 .card { background: var(--card); border: 1px solid var(--ln); border-radius: var(--rad); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: transform .14s, box-shadow .14s; }
.ecv2 .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ecv2 .card .strip { height: 5px; }
.ecv2 .card .ch { display: flex; gap: 12px; padding: 14px 15px 12px; }
.ecv2 .cal { width: 46px; height: 50px; border-radius: 11px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; color: #fff; }
.ecv2 .cal small { font-size: 9.5px; font-weight: 800; text-transform: uppercase; opacity: .9; }
.ecv2 .cal b { font-size: 19px; margin-top: 2px; }
.ecv2 .card h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ecv2 .card .meta { font-size: 12.5px; color: var(--mut); margin-top: 3px; line-height: 1.4; }
.ecv2 .card .hmain { flex: 1; min-width: 0; }
.ecv2 .card .corner { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.ecv2 .card .pill { font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; letter-spacing: .3px; line-height: 1.55; }
.ecv2 .pl-status { border: 1px solid; background: transparent; }
.ecv2 .pl-active { color: #16a34a; border-color: color-mix(in srgb, #16a34a 40%, transparent); }
.ecv2 .pl-mut { color: var(--mut); border-color: var(--ln); }
.ecv2 .pl-today { color: #15803d; background: color-mix(in srgb, #16a34a 14%, var(--surface)); }
.ecv2 .pl-soon { color: var(--rec-ink); background: var(--rec-s); }
.ecv2 .nc-div { height: 1px; background: var(--ln); margin: auto 15px 13px; }
.ecv2 .acts { margin-left: auto; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ecv2 .kmenu { position: relative; display: inline-flex; }
.ecv2 .kmenu-pop { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 40; min-width: 172px; background: var(--card); border: 1px solid var(--ln); border-radius: 11px; box-shadow: var(--shadow-md); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.ecv2 .kmenu-pop a, .ecv2 .kmenu-pop button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink); background: none; border: 0; text-decoration: none; cursor: pointer; text-align: left; width: 100%; }
.ecv2 .kmenu-pop a:hover, .ecv2 .kmenu-pop button:hover { background: var(--surface-active); }
.ecv2 .iconb.is-open { border-color: var(--b); color: var(--b); }
.ecv2 .badge { font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.ecv2 .badge--ok { background: var(--teal-s); color: var(--teal-ink); }
.ecv2 .badge--prog { background: var(--bs); color: var(--b); }
.ecv2 .badge--mut { background: var(--surface-active); color: var(--mut); }
.ecv2 .goals { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 16px; padding: 8px 15px 2px; }
.ecv2 .goalt { min-width: 0; display: flex; align-items: center; gap: 6px; }
.ecv2 .goalt small { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--mut); }
.ecv2 .goalt .v { font-size: 14px; font-weight: 800; letter-spacing: -.2px; }
.ecv2 .goalt .v small { font-size: 10.5px; color: var(--mut); font-weight: 600; text-transform: none; letter-spacing: 0; }
.ecv2 .goalt .bar { height: 3px; width: 42px; border-radius: 99px; background: var(--surface-active); overflow: hidden; flex: none; }
.ecv2 .goalt .bar i { display: block; height: 100%; border-radius: 99px; }
.ecv2 .staff { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding: 9px 15px 1px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ecv2 .staff::-webkit-scrollbar { display: none; }
.ecv2 .schip { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ln); border-radius: 999px; padding: 3px 10px 3px 3px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.ecv2 .schip .a { width: 19px; height: 19px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 9.5px; font-weight: 800; background: var(--b); flex: none; }
.ecv2 .schip em { font-style: normal; color: var(--mut); font-weight: 600; }
.ecv2 .schip--dash { border-style: dashed; color: var(--b); cursor: pointer; }
.ecv2 .foot { display: flex; align-items: center; gap: 10px; padding: 4px 15px 15px; flex-wrap: wrap; }
.ecv2 .foot .g { display: flex; gap: 6px; }
.ecv2 .foot .sp { flex: 1; }
.ecv2 .empty { text-align: center; padding: 44px; background: var(--surface-hover); border-radius: 12px; color: var(--mut); }
.ecv2 .empty strong { color: var(--ink); display: block; margin-bottom: 8px; font-size: 16px; }
.ecv2 .chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 15px 0; }
.ecv2 .chip { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface-active); color: var(--mut); border: 1px solid var(--ln); white-space: nowrap; }
.ecv2 .chip--spots { background: var(--surface); }
.ecv2 .chip--gate, .ecv2 .kchip--gate { background: var(--bs); color: var(--b); border-color: color-mix(in srgb, var(--b) 30%, transparent); cursor: pointer; text-decoration: none; }
.ecv2 .chip--gate:hover, .ecv2 .kchip--gate:hover { background: color-mix(in srgb, var(--b) 18%, var(--surface)); }
.ecv2 .chip--alert { background: var(--rec-s); color: var(--rec-ink); border-color: color-mix(in srgb, var(--rec) 30%, transparent); }
.ecv2 .reldate { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--bs); color: var(--b); white-space: nowrap; }
.ecv2 .reldate.today { background: color-mix(in srgb, #16a34a 15%, var(--surface)); color: #15803d; }
.ecv2 .reldate.soon { background: var(--rec-s); color: var(--rec-ink); }
.ecv2 .reldate.past { background: var(--surface-active); color: var(--mut); }
.ecv2 .board { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 16px; align-items: flex-start; }
.ecv2 .kcol { min-width: 340px; width: 340px; flex: none; background: var(--surface-active); border: 1px solid var(--ln); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 9px; }
.ecv2 .kcol.over { outline: 2px dashed var(--b); outline-offset: -2px; }
.ecv2 .kcol-h { display: flex; align-items: center; gap: 8px; padding: 4px 4px 2px; }
.ecv2 .kcol-h .pd { width: 10px; height: 10px; border-radius: 3px; }
.ecv2 .kcol-h .nm { font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .3px; }
.ecv2 .kcol-h .ct { margin-left: auto; background: var(--card); border: 1px solid var(--ln); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 800; color: var(--mut); }
.ecv2 .kcard { background: var(--card); border: 1px solid var(--ln); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 11px 12px; cursor: grab; }
.ecv2 .kcard:hover { box-shadow: var(--shadow-md); }
.ecv2 .kcard.dragging { opacity: .5; }
.ecv2 .kcard .kt { display: flex; align-items: center; gap: 8px; }
.ecv2 .kcard .kdate { font-size: 10px; font-weight: 800; color: #fff; border-radius: 6px; padding: 3px 7px; flex: none; text-transform: uppercase; }
.ecv2 .kcard h4 { margin: 0; font-size: 13.5px; font-weight: 700; }
.ecv2 .kcard .km { font-size: 11.5px; color: var(--mut); margin: 5px 0 8px; }
.ecv2 .kcard .kgl { font-size: 11px; font-weight: 700; color: var(--ink); margin-bottom: 5px; display: flex; justify-content: space-between; }
.ecv2 .kcard .kgl span { color: var(--mut); font-weight: 600; }
.ecv2 .kcard .kbar { height: 5px; border-radius: 99px; background: var(--surface-active); overflow: hidden; }
.ecv2 .kcard .kbar i { display: block; height: 100%; border-radius: 99px; }
.ecv2 .kcard .kf { display: flex; align-items: center; gap: 5px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--ln2); }
.ecv2 .kmini { border: 1px solid var(--ln); background: var(--card); border-radius: 7px; padding: 4px 9px; font-size: 11.5px; font-weight: 700; color: var(--ink); text-decoration: none; }
.ecv2 .kmini:hover { border-color: var(--border-hover); }
.ecv2 .kmini--rec { border-color: color-mix(in srgb, var(--rec) 45%, var(--ln)); color: var(--rec); }
.ecv2 .kmini--teal { border-color: color-mix(in srgb, var(--teal) 45%, var(--ln)); color: var(--teal-ink); }
.ecv2 .kchips { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 3px; }
.ecv2 .kchip { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--surface-active); color: var(--mut); border: 1px solid var(--ln); white-space: nowrap; }
.ecv2 .kchip.today { background: color-mix(in srgb, #16a34a 15%, var(--surface)); color: #15803d; border-color: transparent; }
.ecv2 .kchip.soon { background: var(--rec-s); color: var(--rec-ink); border-color: transparent; }
.ecv2 .kchip.past { color: var(--mut); }
.ecv2 .kchip.alert { background: var(--rec-s); color: var(--rec-ink); font-weight: 800; border-color: color-mix(in srgb, var(--rec) 30%, transparent); }
.ecv2 .kadd { border: 1.5px dashed var(--ln); background: transparent; border-radius: 11px; padding: 9px; font-size: 12px; font-weight: 700; color: var(--mut); text-decoration: none; text-align: center; display: block; }
.ecv2 .kadd:hover { border-color: var(--b); color: var(--b); }
.ecv2 .ecv2-hub { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--ln); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 11px 15px; margin-bottom: 16px; }
.ecv2 .ecv2-hub-back { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--ln); display: grid; place-items: center; color: var(--mut); font-size: 16px; text-decoration: none; flex: none; }
.ecv2 .ecv2-hub-back:hover { border-color: var(--border-hover); color: var(--ink); }
.ecv2 .ecv2-hub-info { min-width: 0; flex: 1; }
.ecv2 .ecv2-hub-title { font-size: 17px; font-weight: 800; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecv2 .ecv2-hub-mode { color: var(--mut); font-weight: 600; }
.ecv2 .ecv2-hub-meta { font-size: 12.5px; color: var(--mut); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ecv2 .ecv2-hub-phase { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--pc); background: color-mix(in srgb, var(--pc) 12%, transparent); padding: 2px 8px; border-radius: 999px; }
.ecv2 .ecv2-hub-switch { display: inline-flex; background: var(--surface-active); border-radius: 12px; padding: 5px; gap: 4px; flex: none; }
.ecv2 .ecv2-hub-tab { border: 0; background: none; padding: 9px 16px; border-radius: 9px; font-weight: 800; font-size: 13.5px; color: var(--mut); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ecv2 .ecv2-hub-tab:hover { color: var(--ink); }
.ecv2 .ecv2-hub-tab.on-edit { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.ecv2 .ecv2-hub-tab.on-recruit { background: var(--rec); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--rec) 30%, transparent); }
.ecv2 .ecv2-hub-tab.on-manage { background: var(--teal); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--teal) 30%, transparent); }
.ecv2 .ecv2-hub-view { display: none; }
@media (max-width: 720px) {
.ecv2 .ecv2-hub { flex-wrap: wrap; row-gap: 10px; }
.ecv2 .ecv2-hub-back { order: 0; width: 44px; height: 44px; }
.ecv2 .ecv2-hub-info { order: 1; flex: 1 1 calc(100% - 60px); }
.ecv2 .ecv2-hub-title { white-space: normal; }
.ecv2 .ecv2-hub-switch { order: 3; flex: 1 1 0; min-width: 0; justify-content: center; }
.ecv2 .ecv2-hub-tab { flex: 1; justify-content: center; min-height: 44px; }
.ecv2 .ecv2-hub-view {
display: inline-flex; align-items: center; justify-content: center; flex: none; order: 4;
min-width: 62px; height: 54px; padding: 0 12px; border-radius: 12px;
border: 1px solid var(--ln); background: var(--card); color: var(--ink);
font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap;
}
.ecv2 .ecv2-hub-view:active { background: var(--surface-active); }
}
@media (max-width: 640px) {
.ecv2 .ecv2-head { gap: 10px; }
.ecv2 .ecv2-head .grow { display: none; }
.ecv2 .ecv2-title { font-size: 20px; }
.ecv2 .search { width: 100%; flex: 1 1 100%; }
.ecv2 .ecv2-head > .b { flex: 1 1 auto; justify-content: center; }
.ecv2 .seg { flex: 1 1 100%; }
.ecv2 .seg button { flex: 1; justify-content: center; }
.ecv2 .ec-view-menu { left: 0; right: auto; }
.ecv2 .staff { padding-top: 10px; }
.ecv2 .foot { gap: 6px; }
.ecv2 .regtog { gap: 5px; }
.ecv2 .regtog .tg { width: 32px; height: 18px; }
.ecv2 .regtog .tg::after { width: 14px; height: 14px; }
.ecv2 .regtog.on .tg::after { left: 16px; }
.ecv2 .regtog .rs { padding: 2px 6px; font-size: 9px; }
.ecv2 .acts { gap: 5px; }
.ecv2 .acts .b--sm { padding: 6px 9px; font-size: 12px; }
.ecv2 .acts .iconb { width: 31px; height: 31px; font-size: 14px; }
.ecv2 .board { gap: 10px; scroll-snap-type: x mandatory; }
.ecv2 .kcol { min-width: 80vw; width: 80vw; scroll-snap-align: start; }
.ecv2 .ecv2-hub { flex-wrap: wrap; padding: 10px 12px; }
.ecv2 .ecv2-hub-switch { width: 100%; justify-content: center; margin-top: 2px; }
.ecv2 .ecv2-hub-tab { flex: 1; justify-content: center; padding: 10px 8px; }
}
@media (max-width: 400px) {
.ecv2 .kcol { min-width: 86vw; width: 86vw; }
}
.ecv2 .kcol--camp { border-style: dashed; background: var(--surface); }
.ecv2 .kempty {
padding: 14px 10px; text-align: center; font-size: 12.5px; color: var(--mut);
border: 1px dashed var(--ln); border-radius: 10px;
}
.ecv2-waiting { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--warning) 25%, var(--surface)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--warning) 7%, var(--surface)); }
.ecv2-waiting__label { margin-right: 6px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--warning-text); }
.ecv2-waiting__one { padding: 5px 11px; border: 1px solid var(--border-light); border-radius: var(--radius-full); background: var(--surface); font-size: 12.5px; color: var(--text-secondary); text-decoration: none; }
.ecv2-waiting__one b { color: var(--warning-text); }
.ecv2-waiting__one:hover, .ecv2-waiting__one:active, .ecv2-waiting__one:focus-visible { border-color: var(--warning); color: var(--text); }
@media (max-width: 640px) { .ecv2-waiting__one { min-height: 44px; display: inline-flex; align-items: center; } }
.pm-v2 {
--v2-surface: #ffffff;
--v2-surface-soft: #fafbfc;
--v2-bg: #f7f8fa;
--v2-border: var(--border-light);
--v2-border-soft: #f1f2f4;
--v2-text: #111827;
--v2-text-muted: #6b7280;
--v2-text-faint: #9ca3af;
--v2-primary: var(--primary, #e21b4d);
--v2-accent: #0d9488;
--v2-accent-50: #f0fdfa;
--v2-accent-100: #ccfbf1;
--v2-accent-700: #0f766e;
--v2-danger: #dc2626;
--v2-warn: #d97706;
--v2-success: #16a34a;
--v2-radius: 10px;
--v2-radius-sm: 8px;
--v2-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
--v2-shadow: 0 2px 8px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
color: var(--v2-text);
font-size: 14px;
line-height: 1.5;
}
.pm-v2 .pm-page { padding: 8px 0 0; }
.pm-v2 .back-link { display: inline-block; font-size: 13px; color: var(--v2-text-muted); font-weight: 500; padding: 4px 8px 4px 4px; border-radius: 6px; margin-bottom: 14px; text-decoration: none; transition: background 0.12s, color 0.12s; }
.pm-v2 .back-link:hover { color: var(--v2-accent); background: var(--v2-accent-50); }
.pm-v2 .pm-v2-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13px; font-weight: 600; border: 1px solid var(--v2-border); background: var(--v2-surface); color: var(--v2-text); border-radius: 8px; cursor: pointer; transition: all 0.12s; white-space: nowrap; line-height: 1; text-decoration: none; }
.pm-v2 .pm-v2-btn:hover { border-color: var(--v2-border); box-shadow: var(--v2-shadow-sm); }
.pm-v2 .pm-v2-btn--primary { background: var(--v2-accent); border-color: var(--v2-accent); color: #fff; }
.pm-v2 .pm-v2-btn--primary:hover { background: var(--v2-accent-700); border-color: var(--v2-accent-700); color: #fff; }
.pm-v2 .pm-v2-btn--ghost:hover { border-color: var(--v2-accent); color: var(--v2-accent); background: var(--v2-accent-50); }
.pm-v2 .pm-v2-stats { display: flex; gap: 8px; padding: 10px; background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: var(--v2-radius); margin-bottom: 14px; overflow-x: auto; box-shadow: var(--v2-shadow-sm); }
.pm-v2 .pm-v2-stat { flex: 1; min-width: 135px; padding: 10px 14px; border-radius: var(--v2-radius-sm); background: var(--v2-border-soft); border: 1px solid transparent; display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.pm-v2 .pm-v2-stat--primary { background: var(--v2-accent-50); border-color: var(--v2-accent-100); }
.pm-v2 .pm-v2-stat--primary .pm-v2-stat__value { color: var(--v2-accent-700); }
.pm-v2 .pm-v2-stat__label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--v2-text-muted); line-height: 1.4; }
.pm-v2 .pm-v2-stat__value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--v2-text); line-height: 1.1; }
.pm-v2 .pm-v2-stat__value small { font-size: 11px; color: var(--v2-text-muted); font-weight: 500; margin-left: 4px; }
.pm-v2 .pm-ed-strip { display: flex; gap: 6px; margin: 10px 0 8px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px; }
.pm-v2 .pm-ed-strip::-webkit-scrollbar { display: none; }
.pm-v2 .pm-ed-chip { flex: 0 0 auto; scroll-snap-align: start; display: flex; flex-direction: column; gap: 1px; padding: 7px 12px; border-radius: 10px; background: var(--v2-border-soft); text-align: center; min-width: 74px; }
.pm-v2 .pm-ed-chip--primary { background: var(--v2-accent-50); }
.pm-v2 .pm-ed-chip--session { background: var(--v2-accent-700, #0f766e); }
.pm-v2 .pm-ed-chip--session .pm-ed-chip-n { color: #fff; font-size: 13px; }
.pm-v2 .pm-ed-chip--session .pm-ed-chip-l { color: rgba(255,255,255,.75); }
.pm-v2 .pm-ed-chip-n { font-size: 17px; font-weight: 800; color: var(--v2-text); font-variant-numeric: tabular-nums; line-height: 1.25; white-space: nowrap; }
.pm-v2 .pm-ed-chip--primary .pm-ed-chip-n { color: var(--v2-accent-700); }
.pm-v2 .pm-ed-chip-l { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--v2-text-muted); line-height: 1.25; white-space: nowrap; }
.pm-v2 .pm-ed-filters { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; }
.pm-v2 .pm-ed-filters .pm-ed-staff-select { flex: 0 1 auto; min-width: 0; }
.pm-v2 .pm-ed-filters .pm-ed-search-wrap { flex: 1 1 auto; min-width: 0; margin: 0; }
@media (max-width: 480px) { .pm-v2 .pm-ed-filters { flex-direction: column; align-items: stretch; } }
.pm-v2 .pm-ed-fam { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 4px; padding: 6px 12px; background: var(--v2-accent-50); border: 1px solid var(--v2-accent-100); border-radius: 9px; }
.pm-v2 .pm-ed-fam-name { font-size: 12.5px; font-weight: 800; color: var(--v2-accent-700); letter-spacing: .2px; }
.pm-v2 .pm-ed-fam-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 19px; padding: 0 7px; font-size: 11px; font-weight: 800; color: #fff; background: var(--v2-accent, #2563eb); border-radius: 999px; }
.pm-v2 .pm-v2-session-tabs { display: flex; flex-wrap: nowrap; gap: 2px; padding: 3px; background: var(--v2-surface-soft); border: 1px solid var(--v2-border); border-radius: 9px; margin: 0 0 12px; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.pm-v2 .pm-v2-session-tabs::-webkit-scrollbar { height: 5px; }
.pm-v2 .pm-v2-session-tabs::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 999px; }
.pm-v2 .pm-v2-session-tab { flex-shrink: 0; }
.pm-v2 .pm-v2-session-tab { padding: 7px 14px; font-size: 13px; font-weight: 600; border: none; background: transparent; color: var(--v2-text-muted); border-radius: 7px; cursor: pointer; transition: all 0.12s; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; }
.pm-v2 .pm-v2-session-tab:hover { color: var(--v2-text); background: rgba(255, 255, 255, 0.5); }
.pm-v2 .pm-v2-session-tab.active { background: var(--v2-surface); color: var(--v2-text); box-shadow: var(--v2-shadow-sm); }
.pm-v2 .pm-v2-session-tab--today::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--v2-accent); flex-shrink: 0; }
.pm-v2 .pm-v2-session-tab--past { opacity: 0.7; }
.pm-v2 .pm-v2-session-tab-count { padding: 1px 7px; background: var(--v2-border-soft); color: var(--v2-text-muted); border-radius: 999px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pm-v2 .pm-v2-session-tab.active .pm-v2-session-tab-count { background: var(--v2-accent-100); color: var(--v2-accent-700); }
.pm-v2 .pm-v2-table-wrap { background: var(--v2-surface); border: 1px solid #f0f1f3; border-radius: var(--v2-radius); overflow: hidden; box-shadow: var(--v2-shadow-sm); }
.pm-v2 .pm-v2-table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #f3f4f6; background: var(--v2-surface); font-size: 13px; color: var(--v2-text-muted); }
.pm-v2 .pm-v2-table-toolbar strong { color: var(--v2-text); font-weight: 700; }
.pm-v2 .pm-v2-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pm-v2 .pm-v2-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--v2-surface); font-size: 13px; min-width: 760px; }
.pm-v2 .pm-v2-table thead th { padding: 8px 10px; background: var(--v2-surface-soft); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--v2-text-muted); text-align: left; border-bottom: 1px solid #f3f4f6; white-space: nowrap; line-height: 1.2; }
.pm-v2 .pm-v2-table tbody td { padding: 5px 8px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; line-height: 1.3; }
.pm-v2 .pm-v2-table tbody tr:nth-child(even) { background: #fafbfc; }
.pm-v2 .pm-v2-table tbody tr:hover { background: var(--v2-accent-50); }
.pm-v2 .pm-v2-table tbody tr:last-child td { border-bottom: none; }
.pm-v2 .pm-col-student { min-width: 200px; }
.pm-v2 .pm-v2-table:not(.pm-v2-table--grid) th.pm-col-student,
.pm-v2 .pm-v2-table:not(.pm-v2-table--grid) td.pm-col-student {
position: sticky; left: 34px; z-index: 1; background: var(--v2-surface); box-shadow: 1px 0 0 var(--v2-border-soft);
}
.pm-v2 .pm-v2-table:not(.pm-v2-table--grid) thead th.pm-col-student { z-index: 3; background: var(--v2-surface-soft); }
.pm-v2 .pm-v2-table:not(.pm-v2-table--grid) thead th.pm-col-student { box-shadow: 1px 0 0 #f0f1f3; }
.pm-v2 .pm-v2-table:not(.pm-v2-table--grid) tbody tr:nth-child(even) td.pm-col-student { background: #fafbfc; }
.pm-v2 .pm-v2-table:not(.pm-v2-table--grid) tbody tr:hover td.pm-col-student { background: var(--v2-accent-50); }
.pm-v2 .pm-student-name { font-weight: 600; color: var(--v2-text); }
.pm-v2 .pm-name-link { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.pm-v2 .pm-name-link:hover { color: var(--v2-primary, #e21b4d); text-decoration: underline; text-underline-offset: 2px; }
.pm-v2 .pm-student-email { font-size: 11px; color: var(--v2-text-faint); margin-top: 2px; }
.pm-v2 .pm-attendance-select { width: 100%; padding: 4px 22px 4px 12px; border: 1px solid transparent; border-radius: 999px; font-size: 12px; font-weight: 600; background-color: var(--v2-border-soft); color: var(--v2-text-muted); cursor: pointer; text-align: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 20 20' fill='%236b7280'><path d='M5.5 7.5 10 12l4.5-4.5'/></svg>"); background-repeat: no-repeat; background-position: right 8px center; transition: all 0.12s; }
.pm-v2 .pm-attendance-select:focus { outline: none; box-shadow: 0 0 0 2px var(--v2-accent-100); }
.pm-v2 .pm-attendance-select[data-val="Present"] { background-color: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.pm-v2 .pm-attendance-select[data-val="Tardy"] { background-color: #fef3c7; color: #92400e; border-color: #fde68a; }
.pm-v2 .pm-attendance-select[data-val="Excused Absence"] { background-color: #e0e7ff; color: #3730a3; border-color: #c7d2fe; }
.pm-v2 .pm-attendance-select[data-val="Unexcused Absence"] { background-color: #fee2e2; color: #991b1b; border-color: #fecaca; }
.pm-v2 .pm-attendance-select[data-val="Left Early"] { background-color: #ffedd5; color: #9a3412; border-color: #fed7aa; }
.pm-v2 .pm-check-wrap { display: inline-flex; align-items: center; margin: 0; }
.pm-v2 .pm-check-wrap input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.pm-v2 .pm-comment { width: 100%; min-height: 28px; padding: 5px 8px; border: 1px solid transparent; border-radius: 6px; font-size: 12px; font-family: inherit; resize: vertical; color: var(--v2-text); background: transparent; box-sizing: border-box; transition: background 0.12s, border-color 0.12s, box-shadow 0.12s; }
.pm-v2 .pm-comment::placeholder { color: var(--v2-text-faint); }
.pm-v2 .pm-comment:hover { background: rgba(0, 0, 0, 0.02); border-color: var(--v2-border); }
.pm-v2 .pm-comment:focus { outline: none; background: var(--v2-surface); border-color: var(--v2-accent); box-shadow: 0 0 0 2px var(--v2-accent-100); }
.pm-v2 .pm-v2-session-tab--all { font-weight: 700; }
.pm-v2 .pm-v2-table--grid { min-width: 1200px; }
.pm-v2 .pm-v2-table--grid thead th { text-align: center; }
.pm-v2 .pm-v2-session-header-row .pm-session-group-header { padding: 6px 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; background: var(--v2-border-soft); color: var(--v2-text-muted); border-left: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6; line-height: 1.3; white-space: nowrap; }
.pm-v2 .pm-v2-session-header-row .pm-session-group-header--today { background: var(--v2-accent-50); color: var(--v2-accent-700); }
.pm-v2 .pm-v2-session-header-row .pm-session-group-header--past { opacity: 0.8; }
.pm-v2 .pm-v2-subcol-header-row th.pm-v2-col-icon { text-align: center; font-size: 12px; padding: 5px 4px; cursor: help; background: var(--v2-surface-soft); border-bottom: 1px solid #f3f4f6; border-left: 1px solid var(--v2-border-soft); font-weight: 600; color: var(--v2-text-muted); min-width: 38px; position: relative; line-height: 1; }
.pm-v2 .pm-v2-subcol-header-row th.pm-v2-col-icon[data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% - 2px); left: 50%; transform: translateX(-50%); padding: 4px 8px; background: #111827; color: #fff; font-size: 11px; font-weight: 500; border-radius: 5px; white-space: nowrap; z-index: 10; letter-spacing: normal; text-transform: none; pointer-events: none; }
.pm-v2 .pm-v2-subcol-header-row th.pm-col-grid-reached,
.pm-v2 .pm-v2-table--grid tbody td.pm-grid-reached { border-left: 1px solid #f3f4f6; }
.pm-v2 .pm-v2-table--grid tbody td.pm-grid-cell { padding: 5px 6px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--v2-border-soft); }
.pm-v2 .pm-v2-table--grid .pm-col-grid-reached,
.pm-v2 .pm-v2-table--grid .pm-col-grid-followup { width: 64px; min-width: 64px; }
.pm-v2 .pm-v2-table--grid .pm-col-grid-att { width: 88px; min-width: 88px; }
.pm-v2 .pm-v2-table--grid .pm-col-grid-comment { width: 120px; min-width: 120px; }
.pm-v2 .pm-v2-table--grid thead th.pm-grid-corner,
.pm-v2 .pm-v2-table--grid tbody td.pm-grid-corner { position: sticky; left: 0; z-index: 1; background: var(--v2-surface); min-width: 180px; text-align: left; }
.pm-v2 .pm-v2-table--grid thead th.pm-grid-corner { z-index: 3; background: var(--v2-surface-soft); box-shadow: 1px 0 0 #f0f1f3; }
.pm-v2 .pm-v2-table--grid tbody td.pm-grid-corner { box-shadow: 1px 0 0 var(--v2-border-soft); }
.pm-v2 .pm-v2-table--grid tbody tr:nth-child(even) td.pm-grid-corner { background: #fafbfc; }
.pm-v2 .pm-v2-table--grid tbody tr:hover td.pm-grid-corner { background: var(--v2-accent-50); }
.pm-v2 .pm-v2-table--grid td.pm-cell-future { opacity: 0.35; transition: opacity 0.12s ease; }
.pm-v2 .pm-v2-table--grid tr:hover td.pm-cell-future,
.pm-v2 .pm-v2-table--grid td.pm-cell-future:focus-within { opacity: 1; }
.pm-v2 .pm-v2-table-toolbar__hint { font-size: 11px; color: var(--v2-text-faint); font-style: italic; }
.pm-v2 .pm-grid-total { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-v2 .pm-grid-total strong { color: var(--v2-text); font-weight: 700; }
.pm-v2 .pm-grid-total-den { color: var(--v2-text-faint); font-size: 11px; }
.pm-v2 .pm-attendance-select--mini { padding: 2px 14px 2px 4px; font-size: 11px; font-weight: 700; min-width: 70px; }
.pm-v2 .pm-comment--mini { min-height: 24px; padding: 3px 6px; font-size: 11px; resize: none; width: 100%; }
.pm-v2 .pm-v2-table thead th.pm-col-phase, .pm-v2 .pm-v2-table tbody td.pm-col-phase { min-width: 130px; text-align: center; }
.pm-v2 .pm-phase-cell-inner { display: flex; align-items: center; justify-content: center; gap: 6px; }
.pm-v2 .pm-phase-check { width: 16px; height: 16px; cursor: pointer; margin: 0; }
.pm-v2 .pm-phase-input { width: 100%; padding: 4px 8px; font-size: 12px; line-height: 1.3; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--v2-text); box-shadow: none; min-height: 0; }
.pm-v2 .pm-phase-input:hover { background: var(--v2-surface-soft); border-color: var(--v2-border-soft); }
.pm-v2 .pm-phase-input:focus { background: var(--v2-surface); border-color: var(--v2-accent); box-shadow: 0 0 0 2px var(--v2-accent-100); outline: none; }
.pm-v2 select.pm-phase-dropdown { appearance: none; padding-right: 22px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 20 20' fill='%236b7280'><path d='M5.5 7.5 10 12l4.5-4.5'/></svg>"); background-repeat: no-repeat; background-position: right 6px center; cursor: pointer; }
.pm-v2 input.pm-phase-number { text-align: right; font-variant-numeric: tabular-nums; }
.pm-v2 input.pm-phase-date { padding-right: 4px; }
.pm-v2 .pm-phase-note-inline { max-width: 80px; }
.pm-v2 .pm-wa-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 6px; border: 1px solid var(--v2-border); border-radius: 6px; background: var(--v2-surface); color: #16a34a; font-size: 10px; font-weight: 700; cursor: pointer; }
.pm-v2 .pm-wa-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pm-v2 .pm-col-smart { background: linear-gradient(180deg, #eef2ff, #e0e7ff); color: #4338ca; font-weight: 800; }
.pm-v2 td.pm-col-smart { background: linear-gradient(180deg, #fafbff, #f5f7ff); }
.pm-v2 .pm-sc-cell-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); font-size: 17px; font-weight: 900; cursor: pointer; }
.pm-v2 .pm-sc-cell-btn.pm-sc-yes { background: linear-gradient(180deg, #ecfdf5, #d1fae5); color: #065f46; border-color: #6ee7b7; }
.pm-v2 .pm-sc-cell-btn.pm-sc-no { background: linear-gradient(180deg, #fef2f2, #fee2e2); color: #991b1b; border-color: #fca5a5; }
.pm-v2 .pm-sc-cell-btn.pm-sc-overridden { box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.55); }
.pm-v2 .pm-modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); z-index: var(--z-modal, 9999); display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; }
.pm-v2 .pm-modal { background: var(--v2-surface); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); width: 100%; max-width: 920px; max-height: calc(100dvh - 48px); display: flex; flex-direction: column; overflow: hidden; }
.pm-v2 .pm-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid #f3f4f6; flex-shrink: 0; }
.pm-v2 .pm-modal-header h2 { margin: 0; font-size: 18px; font-weight: 600; color: var(--v2-text); }
.pm-v2 .pm-modal-close { background: transparent; border: 0; box-shadow: none; font-size: 28px; line-height: 1; color: #9ca3af; cursor: pointer; padding: 0 6px; border-radius: 6px; }
.pm-v2 .pm-modal-close:hover { background: var(--v2-surface-soft); color: var(--v2-text-muted); }
.pm-v2 .pm-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid #f3f4f6; background: #fafbfc; flex-shrink: 0; }
.pm-v2 .pm-rooming-modal { max-height: 92vh; display: flex; flex-direction: column; }
.pm-v2 .pm-rooming-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--v2-border); background: #fafbfc; flex: 0 0 auto; }
.pm-v2 .pm-rooming-toolbar__left, .pm-v2 .pm-rooming-toolbar__right { display: flex; gap: 8px; flex-wrap: wrap; }
.pm-v2 .pm-rooming-body { display: grid; grid-template-columns: 320px 1fr; gap: 16px; padding: 16px 24px; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.pm-v2 .pm-rooming-pool { display: flex; flex-direction: column; gap: 12px; padding-right: 4px; min-height: 0; overflow: hidden; }
.pm-v2 .pm-rooming-pool__section { background: #f7f8fa; border: 1px solid var(--v2-border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; flex: 1 1 0; min-height: 120px; overflow: hidden; }
.pm-v2 .pm-rooming-pool__section--unknown { background: #fff7ed; border-color: #fed7aa; flex: 0 0 auto; min-height: 0; }
.pm-v2 .pm-rooming-pool__section--unknown .pm-rooming-pool__list { max-height: 80px; }
.pm-v2 .pm-rooming-pool__head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; flex: 0 0 auto; }
.pm-v2 .pm-rooming-pool__title { margin: 0; font-size: 13px; font-weight: 700; color: #334155; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; white-space: nowrap; }
.pm-v2 .pm-rooming-pool__count { background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600; color: #475569; }
.pm-v2 .pm-rooming-pool__search { flex: 1 1 auto; min-width: 0; font-size: 12px; padding: 4px 8px; border: 1px solid var(--v2-border); border-radius: 6px; background: var(--v2-surface); box-sizing: border-box; }
.pm-v2 .pm-rooming-pool__search:focus { border-color: var(--v2-accent); box-shadow: 0 0 0 2px var(--v2-accent-100); outline: none; }
.pm-v2 .pm-rooming-pool__list { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 2px; }
.pm-v2 .pm-rooming-chip { display: flex; align-items: center; gap: 8px; background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: 6px; padding: 6px 10px; cursor: grab; user-select: none; }
.pm-v2 .pm-rooming-chip:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); }
.pm-v2 .pm-rooming-chip:active { cursor: grabbing; }
.pm-v2 .pm-rooming-chip__avatar { width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pm-v2 .pm-rooming-chip__name { font-size: 13px; color: #1e293b; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-v2 .pm-rooming-rooms { overflow-y: auto; padding-right: 4px; min-height: 0; }
.pm-v2 #pm-rooming-rooms-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pm-v2 .pm-rooming-empty { text-align: center; color: #9ca3af; padding: 32px 16px; font-size: 14px; }
.pm-v2 .pm-rooming-room { background: var(--v2-surface); border: 2px solid var(--v2-border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pm-v2 .pm-rooming-room--partial { border-color: #fde68a; background: #fffbeb; }
.pm-v2 .pm-rooming-room--full { border-color: #86efac; background: #f0fdf4; }
.pm-v2 .pm-rooming-room--over { border-color: #fca5a5; background: #fef2f2; }
.pm-v2 .pm-rooming-room__head { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.pm-v2 .pm-rooming-room__num { font-weight: 700; color: #334155; }
.pm-v2 .pm-rooming-room__gender { font-size: 13px; border: 1px solid var(--v2-border); border-radius: 4px; padding: 1px 2px; background: var(--v2-surface); }
.pm-v2 .pm-rooming-room__count { background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: 999px; padding: 1px 8px; font-weight: 700; color: #475569; }
.pm-v2 .pm-rooming-room__capacity { margin-left: auto; font-size: 11px; border: 1px solid var(--v2-border); border-radius: 4px; padding: 2px 4px; background: var(--v2-surface); }
.pm-v2 .pm-rooming-room__delete { border: 1px solid var(--v2-border); background: var(--v2-surface); border-radius: 4px; padding: 2px 8px; cursor: pointer; font-size: 12px; }
.pm-v2 .pm-rooming-room__occupants { display: flex; flex-direction: column; gap: 4px; min-height: 30px; }
.pm-v2 .pm-rooming-room__empty { color: #9ca3af; font-size: 12px; text-align: center; padding: 10px 6px; border: 1px dashed #cbd5e1; border-radius: 6px; }
.pm-v2 .pm-rooming-room__occ { display: flex; align-items: center; gap: 6px; background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: 6px; padding: 4px 8px; cursor: grab; }
.pm-v2 .pm-rooming-room__occ--missing { background: #fef2f2; color: #991b1b; }
.pm-v2 .pm-rooming-room__remove { margin-left: auto; background: transparent; border: none; color: #94a3b8; cursor: pointer; font-size: 16px; line-height: 1; }
.pm-v2 .pm-rooming-room__remove:hover { color: var(--v2-danger); }
.pm-v2 .pm-rooming-room__notes { width: 100%; border: 1px solid var(--v2-border); border-radius: 4px; padding: 4px 6px; font-size: 11px; background: #fafbfc; font-family: inherit; resize: vertical; }
.pm-v2 .pm-rooming-status { flex: 1; color: #475569; font-size: 12px; margin-right: auto; }
@media (max-width: 900px) {
.pm-v2 .pm-rooming-body { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.pm-v2 .pm-v2-stat { min-width: 120px; }
}
@media (max-width: 640px) {
.pm-v2 { max-width: 100%; }
.pm-v2 .pm-v2-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; overflow: visible; }
.pm-v2 .pm-v2-stat { min-width: 0; padding: 8px 10px; }
.pm-v2 .pm-v2-stat__value { font-size: 16px; }
.pm-v2 .pm-v2-table-wrap, .pm-v2 .pm-v2-table-scroll { max-width: 100%; }
}
.pm-v2 .pm-print { position: relative; }
.pm-v2 .pm-wa-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; color: #25d366; background: color-mix(in srgb, #25d366 14%, transparent); transition: background .15s; }
.pm-v2 .pm-wa-btn:hover { background: color-mix(in srgb, #25d366 28%, transparent); }
.pm-v2 .pm-wa-btn svg { width: 18px; height: 18px; }
.pm-v2 .pm-wa-btn--tagged { width: auto; min-width: 26px; height: 22px; gap: 3px; padding: 0 5px; border-radius: 6px; }
.pm-v2 .pm-wa-btn--tagged svg { width: 13px; height: 13px; }
.pm-v2 .pm-wa-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
@media (max-width: 640px) { .pm-v2 .pm-wa-tag { display: none; } }
@media (max-width: 820px) { .pm-v2 .pm-rooming-body { grid-template-columns: 1fr !important; } }
.pm-v2 .pm-inv-modal { max-width: min(1060px, 96vw); }
.pm-v2 .pm-inv-top { flex: 0 0 auto; padding: 14px 22px 12px; border-bottom: 1px solid var(--v2-border-soft); }
.pm-v2 .pm-inv-lede { margin: 0 0 8px; font-size: 13px; color: var(--v2-text-muted); line-height: 1.5; }
.pm-v2 .pm-inv-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-v2 .pm-inv-url { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--v2-border-soft); border-radius: 6px; padding: 4px 9px; font-size: 12px; color: var(--v2-text-muted); }
.pm-v2 .pm-inv-mini { font-size: 11px; padding: 5px 11px; white-space: nowrap; }
.pm-v2 .pm-inv-editor { margin-top: 10px; padding: 12px; background: var(--v2-bg, #f8fafc); border: 1px solid var(--v2-border); border-radius: 10px; }
.pm-v2 .pm-inv-editor__hint { margin: 0 0 8px; font-size: 11.5px; line-height: 1.5; color: var(--v2-text-muted); }
.pm-v2 .pm-inv-textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--v2-border); border-radius: 8px; padding: 9px 11px; font-family: inherit; font-size: 13px; line-height: 1.55; color: var(--v2-text); background: var(--v2-surface); resize: vertical; min-height: 74px; }
.pm-v2 .pm-inv-textarea:focus { border-color: var(--v2-accent); box-shadow: 0 0 0 3px var(--v2-accent-50); outline: none; }
.pm-v2 .pm-inv-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; }
.pm-v2 .pm-inv-tags__label { font-size: 11px; font-weight: 600; color: var(--v2-text-muted); margin-right: 2px; }
.pm-v2 .pm-inv-tag { background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: 999px; padding: 3px 9px; font-size: 11px; color: var(--v2-text-muted); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.pm-v2 .pm-inv-tag:hover { background: var(--v2-accent); border-color: var(--v2-accent); color: #fff; }
.pm-v2 .pm-inv-editor__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.pm-v2 .pm-inv-readonly { background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: 8px; padding: 9px 11px; font-size: 13px; line-height: 1.55; color: var(--v2-text); white-space: pre-wrap; }
.pm-v2 .pm-inv-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 22px 18px; }
.pm-v2 .pm-inv-table { min-width: 0; }
.pm-v2 .pm-inv-table tbody td { padding: 7px 8px; }
.pm-v2 .pm-inv-c-name { font-weight: 600; max-width: 220px; }
.pm-v2 .pm-inv-c-mail { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-v2 .pm-inv-c-phone { white-space: nowrap; }
.pm-v2 .pm-inv-c-act { width: 1%; white-space: nowrap; text-align: right; }
.pm-v2 .pm-inv-name { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-v2 .pm-inv-name:hover { color: var(--v2-accent-700, #0f766e); }
.pm-v2 .pm-inv-none { color: var(--v2-text-faint); font-size: 12px; }
.pm-v2 .pm-inv-empty { color: var(--v2-text-faint); padding: 14px; }
.pm-v2 .pm-inv-acts { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.pm-v2 .pm-inv-ico { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px; min-width: 30px; padding: 0 9px; border: 0; border-radius: 8px; font-size: 12px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: background .15s; }
.pm-v2 .pm-inv-ico svg { width: 17px; height: 17px; flex: none; }
.pm-v2 .pm-inv-ico--wa { color: #fff; background: #25d366; }
.pm-v2 .pm-inv-ico--wa:hover { background: #1eb457; }
.pm-v2 .pm-inv-ico--mail { display: none; color: var(--v2-text-muted); background: var(--v2-surface-soft); border: 1px solid var(--v2-border); }
.pm-v2 .pm-inv-ico--no { background: transparent; opacity: .5; font-size: 13px; }
.pm-v2 .pm-inv-ico--no:hover { opacity: 1; background: var(--v2-surface-soft); }
@media (max-width: 640px) {
.pm-v2 .pm-modal-overlay:has(.pm-inv-modal) { padding: 0; }
.pm-v2 .pm-inv-modal { max-width: 100%; max-height: 100dvh; border-radius: 0; }
.pm-v2 .pm-inv-modal .pm-modal-header { padding: 13px 14px; }
.pm-v2 .pm-inv-modal .pm-modal-header h2 { font-size: 15px; line-height: 1.35; }
.pm-v2 .pm-inv-top { padding: 12px 14px 10px; }
.pm-v2 .pm-inv-lede { font-size: 12px; }
.pm-v2 .pm-inv-url { flex: 1 1 100%; }
.pm-v2 .pm-inv-tools .pm-inv-mini { flex: 1 1 auto; justify-content: center; }
.pm-v2 .pm-inv-list { padding: 0 8px 14px; }
.pm-v2 .pm-inv-table thead th.pm-inv-c-mail, .pm-v2 .pm-inv-table thead th.pm-inv-c-phone,
.pm-v2 .pm-inv-table tbody td.pm-inv-c-mail, .pm-v2 .pm-inv-table tbody td.pm-inv-c-phone { display: none; }
.pm-v2 .pm-inv-c-name { max-width: none; }
.pm-v2 .pm-inv-table tbody td { padding: 9px 6px; }
.pm-v2 .pm-inv-ico { height: 36px; min-width: 36px; padding: 0 8px; }
.pm-v2 .pm-inv-ico--mail { display: inline-flex; }
.pm-v2 .pm-inv-ico__label { display: none; }
.pm-v2 .pm-inv-editor__actions .pm-inv-mini { flex: 1 1 44%; justify-content: center; }
}
.pm-ed {
--ed-bg: #f5f5f7;
--ed-card: #ffffff;
--ed-line: #e5e5ea;
--ed-ink: #1c1c1e;
--ed-muted: #8e8e93;
background: var(--ed-bg);
margin: 0 -8px;
padding-bottom: 64px;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif, var(--emoji);
}
@media (min-width: 769px) {
.pm-ed {
max-width: 540px;
margin: 0 auto;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 4px 32px rgba(0,0,0,0.06);
}
}
.pm-ed-staff-select { flex: 1; position: relative; }
.pm-ed-staff-native { width: 100%; background: var(--ed-bg); border: 1px solid var(--ed-line); border-radius: 10px; padding: 9px 32px 9px 12px; font-size: 13px; font-weight: 600; color: var(--ed-ink); cursor: pointer; appearance: none; -webkit-appearance: none; font-family: inherit; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%238e8e93'><path d='M6 8L0 0h12z'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 10px; }
.pm-ed-staff-native:focus { outline: 2px solid #6366f1; outline-offset: -1px; }
.pm-ed-search-wrap { position: relative; }
.pm-ed-search-input { width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--ed-line); border-radius: 10px; background: var(--ed-card); font-size: 14px; color: var(--ed-ink); outline: none; font-family: inherit; box-sizing: border-box; }
.pm-ed-search-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.pm-ed-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: 0.5; pointer-events: none; }
.pm-ed-progress { background: var(--ed-card); padding: 10px 12px; border-top: 1px solid var(--ed-line); border-bottom: 1px solid var(--ed-line); display: flex; align-items: center; gap: 12px; font-size: 13px; }
.pm-ed-progress-text { font-weight: 600; color: var(--ed-ink); white-space: nowrap; }
.pm-ed-progress-num { color: #34c759; }
.pm-ed-progress-bar { flex: 1; height: 6px; background: #e5e5ea; border-radius: 3px; overflow: hidden; }
.pm-ed-progress-fill { height: 100%; background: linear-gradient(90deg, #34c759, #30b350); border-radius: 3px; transition: width 0.3s ease; }
.pm-ed-progress-split { font-size: 12px; font-weight: 700; color: #6e6e73; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pm-ed-hidden { background: var(--ed-card); padding: 0 12px 10px; font-size: 12px; color: var(--ed-muted); border-bottom: 1px solid var(--ed-line); }
.pm-ed-filter-row { background: var(--ed-card); padding: 8px 12px 10px; border-bottom: 1px solid var(--ed-line); font-size: 13px; color: #6e6e73; }
.pm-ed-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.pm-ed-toggle input { display: none; }
.pm-ed-toggle-switch { position: relative; width: 32px; height: 18px; background: #d1d1d6; border-radius: 18px; transition: background 0.2s; }
.pm-ed-toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.pm-ed-toggle input:checked + .pm-ed-toggle-switch { background: #34c759; }
.pm-ed-toggle input:checked + .pm-ed-toggle-switch::after { transform: translateX(14px); }
.pm-ed-section-divider { background: var(--ed-bg); padding: 14px 16px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--ed-muted); }
.pm-ed-section-divider.pm-ed-section-empty { display: none; }
.pm-ed-list { background: var(--ed-card); }
.pm-ed-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 10px; border-bottom: 1px solid #f0f0f3; position: relative; transition: background 0.12s; }
.pm-ed-row:last-child { border-bottom: none; }
.pm-ed-row.pm-ed-hidden { display: none; }
.pm-ed-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: transparent; }
.pm-ed-row.pm-ed-state-present::before { background: #34c759; }
.pm-ed-row.pm-ed-state-tardy::before { background: #f59e0b; }
.pm-ed-row.pm-ed-state-left::before { background: #f59e0b; }
.pm-ed-row.pm-ed-state-excused::before { background: #8e8e93; }
.pm-ed-row.pm-ed-state-unexcused::before { background: #ff3b30; }
.pm-ed-avatar { position: relative; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--av-color, #6366f1); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; letter-spacing: -0.2px; }
.pm-ed-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.pm-ed-avatar-initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.pm-ed-info { flex: 1; min-width: 0; }
.pm-ed-name { font-size: 15px; font-weight: 600; color: var(--ed-ink); letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-ed-status-line { font-size: 11px; font-weight: 500; margin-top: 2px; color: var(--ed-muted); }
.pm-ed-row.pm-ed-state-present .pm-ed-status-line { color: #1e9c47; }
.pm-ed-row.pm-ed-state-tardy .pm-ed-status-line { color: #b45309; }
.pm-ed-row.pm-ed-state-left .pm-ed-status-line { color: #b45309; }
.pm-ed-row.pm-ed-state-excused .pm-ed-status-line { color: #6b7280; }
.pm-ed-row.pm-ed-state-unexcused .pm-ed-status-line { color: #c1271a; }
.pm-ed-actions { display: flex; gap: 6px; flex-shrink: 0; }
.pm-ed-present-btn { background: #34c759; color: #fff; border: none; border-radius: 9px; padding: 0 14px; height: 36px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; transition: transform 0.08s, opacity 0.12s, background 0.12s; white-space: nowrap; }
.pm-ed-present-btn:hover { opacity: 0.92; }
.pm-ed-present-btn:active { transform: scale(0.95); }
.pm-ed-present-btn:disabled { opacity: 0.6; cursor: wait; }
.pm-ed-present-label-default { display: inline; }
.pm-ed-present-label-marked { display: none; }
.pm-ed-row.pm-ed-marked .pm-ed-present-btn { background: var(--ed-bg); color: #6e6e73; font-weight: 600; }
.pm-ed-row.pm-ed-marked .pm-ed-present-label-default { display: none; }
.pm-ed-row.pm-ed-marked .pm-ed-present-label-marked { display: inline; }
.pm-ed-more-btn { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--ed-line); background: var(--ed-card); font-size: 18px; color: #6e6e73; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.12s; }
.pm-ed-more-btn:hover { background: var(--ed-bg); }
.pm-ed-more-btn:active { background: #e5e5ea; }
.pm-ed-sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: var(--z-modal, 9999); display: flex; align-items: flex-end; justify-content: center; animation: pmEdFadeIn 0.15s ease-out; }
@keyframes pmEdFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pmEdSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.pm-ed-sheet { background: var(--ed-bg); width: 100%; max-width: 480px; border-radius: 20px 20px 0 0; padding: 12px 16px 16px; box-shadow: 0 -8px 32px rgba(0,0,0,0.2); animation: pmEdSlideUp 0.22s cubic-bezier(0.2, 0, 0.2, 1); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 600px) {
.pm-ed-sheet-overlay { align-items: center; }
.pm-ed-sheet { border-radius: 20px; max-width: 380px; }
}
.pm-ed-sheet-handle { width: 36px; height: 5px; background: #c7c7cc; border-radius: 3px; margin: 0 auto 12px; }
@media (min-width: 600px) { .pm-ed-sheet-handle { display: none; } }
.pm-ed-sheet-title { font-size: 13px; font-weight: 600; color: #6e6e73; text-align: center; margin-bottom: 12px; padding: 0 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-ed-sheet-list { display: flex; flex-direction: column; gap: 4px; }
.pm-ed-sheet-item { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--ed-card); border: none; border-radius: 12px; padding: 14px 16px; font-size: 15px; font-weight: 600; color: var(--ed-ink); cursor: pointer; text-align: left; font-family: inherit; transition: background 0.12s, transform 0.08s; position: relative; }
.pm-ed-sheet-item:hover { background: var(--ed-bg); }
.pm-ed-sheet-item:active { transform: scale(0.98); }
.pm-ed-sheet-item-icon { width: 28px; font-size: 20px; text-align: center; }
.pm-ed-sheet-item::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 2px 2px 0; background: transparent; }
.pm-ed-sheet-item.pm-ed-state-present::before { background: #34c759; }
.pm-ed-sheet-item.pm-ed-state-tardy::before { background: #f59e0b; }
.pm-ed-sheet-item.pm-ed-state-left::before { background: #f59e0b; }
.pm-ed-sheet-item.pm-ed-state-excused::before { background: #8e8e93; }
.pm-ed-sheet-item.pm-ed-state-unexcused::before { background: #ff3b30; }
.pm-ed-sheet-cancel { width: 100%; margin-top: 8px; background: var(--ed-card); border: none; border-radius: 12px; padding: 14px 16px; font-size: 15px; font-weight: 700; color: #ff3b30; cursor: pointer; font-family: inherit; transition: background 0.12s; }
.pm-ed-sheet-cancel:hover { background: var(--ed-bg); }
.pm-ed-empty { background: var(--ed-card); padding: 48px 24px; text-align: center; color: #6e6e73; }
.pm-ed-empty-icon { font-size: 40px; opacity: 0.6; margin-bottom: 12px; }
.pm-ed-empty-title { font-size: 16px; font-weight: 700; color: var(--ed-ink); margin-bottom: 4px; }
.pm-ed-empty-sub { font-size: 13px; }
.pm-ed-present-btn, .pm-ed-more-btn, .pm-ed-sheet-item, .pm-ed-sheet-cancel { cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; outline: none; }
.pm-ed-present-btn:focus-visible, .pm-ed-more-btn:focus-visible, .pm-ed-sheet-item:focus-visible, .pm-ed-sheet-cancel:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.pm-ed-list--unmarked, .pm-ed-list--marked { background: var(--ed-card); }
.pm-ed-empty-section { padding: 24px 16px; text-align: center; color: var(--ed-muted); font-size: 13px; background: var(--ed-card); border-bottom: 1px solid #f0f0f3; }
.pm2 { --pm2-acc: var(--v2-accent); }
.pm2 .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pm2-card { margin-bottom: 14px; }
.pm2-cardhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pm2-kpi { align-items: center; }
.pm2-kpi em.is-ok { background: color-mix(in srgb, var(--pm2-acc) 12%, var(--surface)); color: var(--pm2-acc); }
.pm2-waiting { padding: 3px 10px; border: 0; border-radius: var(--radius-full); background: var(--warning-bg); color: var(--warning-text); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pm2-waiting:hover, .pm2-waiting:active, .pm2-waiting:focus-visible { background: color-mix(in srgb, var(--warning) 25%, var(--surface)); }
.pm2-dim { color: var(--text-muted) !important; font-weight: 500; }
.pm2-bar .is-coming, .pm2-legend .is-coming { background: var(--success); }
.pm2-bar .is-waiting, .pm2-legend .is-waiting { background: var(--warning); }
.pm2-bar .is-here, .pm2-legend .is-here { background: var(--pm2-acc); }
.pm2-bar .is-absent, .pm2-legend .is-absent { background: var(--danger); }
.pm2-legend .is-out { background: var(--text-muted); }
.pm2-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.pm2-cta { margin-top: 12px; }
.pm2-note { margin-top: 10px; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.pm2-noav { background: var(--surface-active) !important; color: var(--text-muted) !important; }
.pm2-card .cp-team-row { grid-template-columns: 22px minmax(0, 1fr) 70px auto; margin-bottom: 7px; }
.pm2-card .cp-num { white-space: nowrap; }
.pm2-card .cp-num em { font-style: normal; color: var(--warning-text); font-weight: 600; }
.pm2-card .cp-mini i { background: var(--pm2-acc); }
.pm2-nights { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-full); background: var(--surface-active); font-size: 12.5px; font-weight: 600; }
.pm2-nights a, .pm2-nights span { padding: 5px 10px; border-radius: var(--radius-full); color: var(--text-secondary); white-space: nowrap; text-decoration: none; }
.pm2-nights .pm2-nights__on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.pm2-nights a:hover, .pm2-nights a:active, .pm2-nights a:focus-visible { color: var(--text); }
.pm2-nights .pm2-nights__all { color: var(--pm2-acc); }
.pm2-tools { margin: 0 0 4px; }
.pm2-quiet { padding: 7px 11px; border: 1px solid var(--border-light); border-radius: var(--radius-full); background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.pm2-quiet:hover, .pm2-quiet:active, .pm2-quiet:focus-visible { border-color: var(--border); color: var(--text); }
.pm2-quiet.is-silent { border-color: color-mix(in srgb, var(--warning) 45%, var(--surface)); background: var(--warning-bg); color: var(--warning-text); }
.pm2-menuhead { padding: 6px 10px 2px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); }
.pm2-tabs { align-items: flex-end; }
.pm2-tabs .pm2-tabs__csv { margin-left: auto; }
.pm2-tabs .pm2-tabs__csv button { color: var(--text-secondary); font-weight: 600; }
.pm2-list { margin-top: 10px; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--surface); overflow-x: auto; }
.pm2-table { width: 100%; border-collapse: collapse; font-size: 13px; font-weight: 400; color: var(--text); }
.pm2-table th { padding: 9px 10px; text-align: left; font-size: 11.5px; font-weight: 600; color: var(--text-muted); background: var(--surface-hover); border-bottom: 1px solid var(--border-light); white-space: nowrap; }
.pm2-table th small { font-weight: 400; }
.pm2-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.pm2-empty-cell { padding: 28px !important; text-align: center; color: var(--text-muted); }
.pm2-sub { margin: 2px 0 0 15px; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.pm2-owner { display: inline-flex; align-items: center; gap: 6px; }
.pm2-owner-select { max-width: 150px; padding: 3px 4px; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.pm2-owner-select:hover, .pm2-owner-select:focus-visible { background: var(--surface-hover); color: var(--text); }
.pm2-owner.is-none .pm2-owner-select { color: var(--text-muted); border: 1px dashed var(--border); border-radius: var(--radius-full); padding: 3px 9px; font-size: 12px; }
.pm2-pill { display: inline-block; padding: 3px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pm2-pill.is-coming { background: var(--success-bg); color: var(--success-text); }
.pm2-pill.is-out { background: var(--surface-active); color: var(--text-muted); }
.cst-menu__pop .pm2-phone-only { display: none; }
.pm2-wa { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; color: var(--success-text); background: var(--success-bg); }
.pm2-wa svg { width: 15px; height: 15px; }
.pm2-wa.is-after { color: var(--pm2-acc); background: color-mix(in srgb, var(--pm2-acc) 12%, var(--surface)); }
.pm2-wa.is-mine { position: relative; }
.pm2-wa.is-mine::after { content: "✎"; position: absolute; top: -4px; right: -4px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--primary); color: var(--surface); font-size: 8.5px; font-weight: 900; line-height: 1; pointer-events: none; }
.pm2-mini-select { padding: 3px 6px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--surface); font: inherit; font-size: 12.5px; color: var(--text); }
.pm2-credit { padding: 3px 10px; border: 0; border-radius: var(--radius-full); background: var(--surface-active); color: var(--text-secondary); font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.pm2-credit.is-made { background: color-mix(in srgb, var(--pm2-acc) 14%, var(--surface)); color: var(--pm2-acc); }
.pm2-credit.is-close { background: var(--warning-bg); color: var(--warning-text); }
.pm2-tripout { margin-left: 4px; padding: 2px 6px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: none; opacity: .5; cursor: pointer; }
.pm2-tripout.is-out { opacity: 1; border-color: var(--danger); }
.pm2-bulk-approve { padding: 6px 12px; border: 0; border-radius: var(--radius); background: var(--success); color: var(--on-primary); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.pm2-bulk-decline { padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--surface) 25%, transparent); border-radius: var(--radius); background: none; color: var(--surface); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pm2-bulk-decline:hover, .pm2-bulk-decline:active, .pm2-bulk-decline:focus-visible { background: color-mix(in srgb, var(--danger) 45%, transparent); }
.pm2-set textarea.cs-in { height: auto; padding: 9px 12px; line-height: 1.45; resize: vertical; }
.pm2-pn-compose { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: 8px; }
.pm2-pn-compose .pm2-pn-cat { margin-right: auto; min-width: 170px; }
.pm2-notei { padding: 10px 0; border-top: 1px solid var(--border-light); }
.pm2-notei__h { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-muted); }
.pm2-notei__h b { font-weight: 600; color: var(--text-secondary); }
.pm2-notei p { margin: 4px 0 0; font-size: 13.5px; color: var(--text); white-space: pre-line; }
.pm2-notei__a { display: flex; gap: 12px; margin-top: 4px; }
.pm2-set-list { display: grid; gap: 2px; max-height: 240px; margin-top: 8px; overflow-y: auto; border: 1px solid var(--border-light); border-radius: var(--radius); padding: 4px; background: var(--surface); }
.pm2-set-pick { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; }
.pm2-set-pick:hover { background: var(--surface-hover); }
.pm2-set-pick.is-on { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.pm2-set-pick span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm2-set-pick small { color: var(--text-muted); white-space: nowrap; }
.pm2-set-col { display: grid; gap: 10px; margin-bottom: 12px; padding: 12px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--surface-hover); }
.pm2-set-col .cs-2 { margin-bottom: 0; }
.pm2-set-col__head { display: flex; align-items: center; gap: 10px; }
.pm2-set-col__head .cs-in { flex: 1; }
.pm2-set-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.pm2-set-toggle.is-row { display: flex; gap: 8px; padding: 10px 0; border-top: 1px solid var(--border-light); font-size: 13px; }
.pm2-set-toggle.is-row b { font-weight: 600; color: var(--text); }
.pm2-set-toggle.is-row small { font-weight: 400; color: var(--text-muted); }
.pm2-set-dates { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; }
@media (max-width: 640px) {
.pm2-card { grid-template-columns: 1fr; }
.pm2-card .cp-plan__main { border-right: 0; border-bottom: 1px solid var(--border-light); }
.pm2-card .cp-mini, .pm2-card .pm2-w { display: none; }
.pm2-card .cp-plan__team:not(:has(> .pm2-owners)) { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; }
.pm2-card .cp-plan__team:not(:has(> .pm2-owners)) > .cp-label, .pm2-card .cp-plan__team:not(:has(> .pm2-owners)) > .cp-foot { flex-basis: 100%; margin: 0; }
.pm2-card .cst-btn.pm2-cta--waiting { display: none; }
.pm2-quiet { min-width: 44px; }
.fi-page-header-main-ctn:has(.pm2-tools) > .fi-header { display: none; }
.pm2-tabs .pm2-tabs__csv { display: none; }
.pm2-list { overflow: visible; }
.pm2-table thead { display: none; }
.pm2-table, .pm2-table tbody { display: block; }
.cst-menu__pop .pm2-phone-only { display: block; }
.pm2-sub { margin-left: 0; max-width: none; }
.pm2 .cst-btn, .pm2 .cst-sel, .pm2-quiet, .pm2-tabs button, .pm2-nights a, .pm2-nights span, .pm2-waiting { min-height: 44px; }
.pm2 .cst-btn, .pm2-quiet, .pm2-tabs button, .pm2-nights a, .pm2-nights span, .pm2-waiting { display: inline-flex; align-items: center; justify-content: center; }
.pm2-wa { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
.pm2-wa svg { width: 18px; height: 18px; }
.pm2 .cst-search { min-height: 44px; }
.pm2 .cst-search input, .pm2 select, .pm2 .cst-sel { font-size: 16px; }
.pm2-set-pick, .pm2-set-toggle.is-row, .pm2-set .cs-link { min-height: 44px; }
.pm2-set .cs-link { display: inline-flex; align-items: center; }
.pm2-set-col__head { flex-wrap: wrap; }
}
.pmn-strip {
display: flex; align-items: center; gap: 14px; min-height: 62px; margin-bottom: 12px; padding: 10px 16px;
border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--surface);
}
.pmn-strip__when { flex: none; max-width: 150px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); line-height: 1.3; }
.pmn-strip__n { flex: none; display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.pmn-strip__n > b { font-size: 28px; line-height: 1; font-weight: 800; color: var(--text); }
.pmn-strip__n > span { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.pmn-strip__n > em { font-style: normal; font-weight: 700; color: var(--pm2-acc); }
.pmn-strip__bar { flex: 0 0 120px; display: flex; gap: 2px; height: 8px; border-radius: var(--radius-full); overflow: hidden; background: var(--surface-active); }
.pmn-strip__bar i { display: block; height: 100%; transition: width .35s cubic-bezier(.2, .8, .2, 1); }
.pmn-strip__bar .is-here { background: var(--pm2-acc); }
.pmn-strip__bar .is-absent { background: var(--danger); }
.pmn-strip__bar .is-coming { background: var(--success); }
.pmn-strip__bar .is-waiting { background: var(--warning); }
.pmn-todo { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.pmn-todo::-webkit-scrollbar { display: none; }
.pmn-chip {
flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 12px; border: 1px solid var(--border-light);
border-radius: var(--radius-full); background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text);
white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.pmn-chip b { font-variant-numeric: tabular-nums; }
.pmn-chip:hover, .pmn-chip:active, .pmn-chip:focus-visible { border-color: var(--pm2-acc); }
.pmn-chip.is-main { background: var(--pm2-acc); border-color: var(--pm2-acc); color: var(--on-primary); }
.pmn-chip.is-warn { background: var(--warning-bg); border-color: transparent; color: var(--warning-text); }
.pmn-chip.is-goal { background: color-mix(in srgb, var(--pm2-acc) 9%, var(--surface)); border-color: transparent; color: var(--pm2-acc); }
.pmn-chip.is-done { border-style: dashed; color: var(--text-secondary); cursor: default; }
.pmn-strip__quiet { flex: none; padding: 3px 9px; border-radius: var(--radius-full); background: var(--success-bg); color: var(--success); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pmn-strip__quiet.is-silent { background: var(--warning-bg); color: var(--warning-text); }
.pmn-tabs { margin-top: 10px; }
.pmn-list { margin-top: 10px; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--surface); overflow-x: auto; }
.pmn-table { width: 100%; border-collapse: collapse; }
.pmn-table th {
padding: 8px 10px; background: var(--surface-hover); border-bottom: 1px solid var(--border-light); text-align: left; white-space: nowrap;
font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary);
}
.pmn-table td { height: 46px; padding: 0 10px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.pmn-row { cursor: pointer; transition: background-color .2s ease; }
.pmn-row:last-child td { border-bottom: 0; }
.pmn-row:hover > td:first-child, .pmn-row:focus-within > td:first-child { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pm2-acc) 45%, transparent); }
.pmn-row.is-here, .pmn-row.is-late, .pmn-row.is-left { background: color-mix(in srgb, var(--success) 8%, var(--surface)); }
.pmn-row.is-no, .pmn-row.is-exc { background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.pmn-row.is-ticked { background: color-mix(in srgb, var(--pm2-acc) 10%, var(--surface)); }
.pmn-row.is-out .pmn-name, .pmn-row.is-out .pmn-ph, .pmn-row.is-out .pmn-dot { opacity: .5; }
.pmn-name, .pmn-dot, .pmn-ph { transition: opacity .2s ease; }
.pmn-ph { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 2px 7px; border-radius: var(--radius-full); background: var(--pc); color: var(--on-primary); font-size: 11px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.pmn-group td { height: auto; padding: 8px 12px; background: var(--surface-hover); font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.pmn-group em { font-style: normal; font-weight: 600; color: var(--text-muted); }
.pmn-c-tick { width: 36px; }
.pmn-tick { width: 18px; height: 18px; accent-color: var(--pm2-acc); cursor: pointer; }
.pmn-c-name { white-space: nowrap; }
.pmn-c-name > * { vertical-align: middle; }
.pmn-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.pmn-name { font-weight: 600; font-size: 14px; color: var(--text); cursor: pointer; }
.pmn-name:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.pmn-c-note { max-width: 280px; }
.pmn-note { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--text-secondary); text-align: left; cursor: pointer; }
.pmn-note:hover, .pmn-note:focus-visible { color: var(--text); }
.pmn-c-more { width: 44px; text-align: right; }
.pmn-dots { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--radius); background: none; color: var(--text-muted); font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; }
.pmn-dots:hover, .pmn-dots:active, .pmn-dots:focus-visible { background: var(--surface-active); color: var(--text); }
.pmn-c-slot { width: 240px; }
.pmn-slot { position: relative; display: block; width: 230px; height: 30px; }
.pmn-slot .v {
position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; opacity: 0; transform: scale(.92); transform-origin: left center;
pointer-events: none; transition: opacity .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
}
.pmn-slot .c {
flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--border); border-radius: 50%;
font-style: normal; font-size: 12px; font-weight: 800; color: var(--on-primary); transition: background-color .18s, border-color .18s;
}
.pmn-slot em { width: 90px; font-style: normal; font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.pmn-row.is-none .v-none, .pmn-row.is-here .v-here, .pmn-row.is-late .v-late, .pmn-row.is-left .v-left, .pmn-row.is-exc .v-exc,
.pmn-row.is-no .v-no, .pmn-row.is-reach .v-in, .pmn-row.is-reached .v-in, .pmn-row.is-out .v-out, .pmn-row.is-wait .v-wait {
opacity: 1; transform: none; pointer-events: auto;
}
.v-here .c, .v-left .c, .v-reached .c { background: var(--success); border-color: var(--success); }
.v-here em, .v-left em, .v-reached em, .v-in em { color: var(--success); }
.v-in .c { border-color: var(--success); color: var(--success); }
.v-late .c { background: var(--warning); border-color: var(--warning); font-size: 11px; }
.v-late em { color: var(--warning-text); }
.v-exc .c, .v-no .c { background: var(--danger); border-color: var(--danger); }
.v-exc em, .v-no em { color: var(--danger-text); }
.v-reach .c { font-size: 12px; }
.v-out .c { border-style: dashed; color: var(--text-muted); }
.v-wait .c { background: var(--warning); border-color: var(--warning); font-size: 11px; }
.v-wait em { width: auto; color: var(--warning-text); }
.pmn-approve, .pmn-decline { min-height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-full); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.pmn-approve { background: var(--success-bg); color: var(--success); }
.pmn-decline { background: var(--danger-bg); color: var(--danger-text); }
.pmn-fu { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pmn-flag { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 6px; border: 0; border-radius: var(--radius); background: none; font: inherit; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; }
.pmn-flag i { width: 16px; height: 16px; border: 2px solid var(--border); border-radius: 5px; transition: background-color .15s, border-color .15s; }
.pmn-flag.is-on { color: var(--text); }
.pmn-flag.is-on i { background: var(--pm2-acc); border-color: var(--pm2-acc); }
.pmn-flag:hover, .pmn-flag:focus-visible { background: var(--surface-hover); }
.pmn-fu-note { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--radius); background: none; font-size: 13px; opacity: .35; cursor: pointer; }
.pmn-fu-note.has-note { opacity: 1; }
.pmn-fu-note:hover, .pmn-fu-note:focus-visible { opacity: 1; background: var(--surface-hover); }
.pmn-select { display: none; }
.pmn-select.is-on { background: var(--text); border-color: var(--text); color: var(--surface); }
.pmn .pmn-bar { animation: none; }
.pmn-bar-in { transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; }
.pmn-bar-out { transition: transform .2s ease, opacity .15s ease; }
.pmn-bar-from { transform: translateY(24px); opacity: 0; }
.pmn-bar__n { font-variant-numeric: tabular-nums; }
.pmn-bar__here { padding: 6px 12px; border: 0; border-radius: var(--radius); background: var(--success); color: var(--on-primary); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.pmn-bar__more { padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--surface) 25%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 10%, transparent); color: var(--surface); font: inherit; font-weight: 800; cursor: pointer; }
.pmn-list.pmn-allwrap { overflow-x: auto; overflow-y: visible; }
.pmn-alltable { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }
.pmn-alltable th {
padding: 8px 10px; background: var(--surface-hover); border-bottom: 1px solid var(--border-light); text-align: left; white-space: nowrap;
font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary);
}
.pmn-alltable td { height: 44px; padding: 0 10px; border-bottom: 1px solid var(--border-light); vertical-align: middle; white-space: nowrap; }
.pmn-allrow { cursor: default; }
.pmn-alltable .pmn-c-tick { position: sticky; left: 0; z-index: 1; box-sizing: border-box; width: 44px; min-width: 44px; max-width: 44px; padding: 0 0 0 12px; }
.pmn-alltable .pmn-pin { position: sticky; left: 44px; z-index: 1; box-shadow: 1px 0 0 var(--border-light); }
.pmn-alltable thead .pmn-pin, .pmn-alltable thead .pmn-c-tick { background: var(--surface-hover); }
.pmn-alltable tbody .pmn-pin, .pmn-alltable tbody .pmn-c-tick { background: var(--surface); transition: background-color .2s ease; }
.pmn-alltable tbody .pmn-row.is-here > td:is(.pmn-pin, .pmn-c-tick), .pmn-alltable tbody .pmn-row.is-late > td:is(.pmn-pin, .pmn-c-tick),
.pmn-alltable tbody .pmn-row.is-left > td:is(.pmn-pin, .pmn-c-tick) { background: color-mix(in srgb, var(--success) 8%, var(--surface)); }
.pmn-alltable tbody .pmn-row.is-no > td:is(.pmn-pin, .pmn-c-tick), .pmn-alltable tbody .pmn-row.is-exc > td:is(.pmn-pin, .pmn-c-tick) { background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.pmn-alltable tbody .pmn-row.is-ticked > td:is(.pmn-pin, .pmn-c-tick) { background: color-mix(in srgb, var(--pm2-acc) 10%, var(--surface)); }
.pmn-alltable .pmn-c-slot { width: 150px; cursor: pointer; }
.pmn-alltable .pmn-c-slot.is-status { width: 240px; cursor: default; }
.pmn-slot.is-compact { width: 140px; }
.pmn-slot.is-compact em { width: auto; }
.pmn-slot.is-compact .v-wait em, .pmn-slot.is-compact .v-out em { display: none; }
.pmn-st { font-size: 12.5px; font-weight: 600; }
.pmn-st.is-in { color: var(--success); }
.pmn-st.is-wait { color: var(--warning-text); }
.pmn-st.is-out { color: var(--text-muted); }
.pmn-dim { font-size: 12.5px; color: var(--text-secondary); }
@media (max-width: 760px) {
.pmn-strip { flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; }
.pmn-strip__when { flex-basis: 100%; max-width: none; }
.pmn-strip__n > b { font-size: 34px; }
.pmn-strip__bar { flex: 1 1 100%; order: 3; }
.pmn-todo { flex: 1 1 100%; order: 4; margin: 0 -14px; padding: 2px 14px 0; }
.pmn-chip { min-height: 36px; }
.pmn-strip__quiet { margin-left: auto; }
.pmn-list { overflow: hidden; }
.pmn-table thead { display: none; }
.pmn-table, .pmn-table tbody { display: block; }
.pmn-table tr.pmn-row {
position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 96px 38px; align-items: center; gap: 0 8px;
min-height: 48px; padding: 0 4px 0 12px; border-bottom: 1px solid var(--border-light);
}
.pmn-table tr.pmn-row > td { display: block; height: auto; padding: 0; border: 0; }
.pmn-table tr.pmn-row > td.pmn-c-fu, .pmn-table tr.pmn-row > td.pmn-c-extra, .pmn-table tr.pmn-row > td.pmn-c-note { display: none; }
.pmn-table tr.pmn-group, .pmn-table tr.pmn-none { display: block; }
.pmn-table tr.pmn-group > td, .pmn-table tr.pmn-none > td { display: block; }
.pmn-c-name { display: flex; align-items: center; gap: 8px; min-width: 0; transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
.pmn-dot { margin-right: 0; flex: none; }
.pmn-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.pmn-name:hover { text-decoration: none; }
.pmn-ph { flex: none; margin-left: 0; }
.pmn-ph-long { display: none; }
.pmn-c-slot { width: auto; }
.pmn-slot { width: 96px; height: 34px; }
.pmn-slot .v { justify-content: flex-end; transform-origin: right center; }
.pmn-slot .c { width: 28px; height: 28px; font-size: 14px; }
.pmn-slot em { display: none; }
.pmn-slot .v-out em { display: inline; width: auto; font-size: 11.5px; }
.pmn-table .pmn-row.is-reach .v-in, .pmn-table .pmn-row.is-reached .v-in { opacity: 0; transform: scale(.92); pointer-events: none; }
.pmn-table .pmn-row.is-reach .v-reach, .pmn-table .pmn-row.is-reached .v-reached { opacity: 1; transform: none; pointer-events: auto; }
.pmn-alltable .is-status .pmn-slot { width: 200px; }
.pmn-alltable .is-status .pmn-slot .v { justify-content: flex-start; transform-origin: left center; }
.pmn-alltable .is-status .pmn-slot em { display: inline; width: auto; }
.v-wait .c, .pmn-slot .v-wait em, .pmn-decline { display: none; }
.pmn-approve { min-height: 32px; }
.pmn-c-more { width: auto; }
.pmn-dots { width: 38px; height: 44px; }
.pmn-table tr.pmn-row > td.pmn-c-tick { position: absolute; left: 12px; top: 50%; margin-top: -11px; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.pmn-tick { width: 22px; height: 22px; }
.pmn.is-select tr.pmn-row > td.pmn-c-tick { opacity: 1; visibility: visible; transition: opacity .2s ease; }
.pmn.is-select .pmn-c-name { transform: translateX(30px); }
.pmn.is-select .pmn-dots { visibility: hidden; }
.pmn.is-select .pmn-slot { opacity: .35; }
.pmn-row:hover > td:first-child { box-shadow: none; }
.pmn-select { display: inline-flex; }
.pmn-bar .pmn-wide { display: none; }
.pmn-bar__n { margin-right: auto; }
.pmn-bar button, .pmn-bar select { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
.pmn-row, .pmn-slot .v, .pmn-slot .c, .pmn-c-name, .pmn-strip__bar i, .pmn-bar-in, .pmn-bar-out { transition: none; }
}
.pmn-table th.pmn-c-own, .pmn-table td.pmn-c-own { width: 150px; }
.pmo-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 142px; min-height: 30px; padding: 3px 10px 3px 4px; border: 0; border-radius: var(--radius-full);
background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border-light); font: inherit; font-size: 13px; color: var(--text); cursor: pointer;
transition: box-shadow .15s ease, background-color .15s ease; }
.pmo-chip b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmo-chip:hover, .pmo-chip:focus-visible, .pmo-chip:active { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--primary); }
.pmo-chip.is-none { background: transparent; box-shadow: none; outline: 1.5px dashed var(--border); outline-offset: -1.5px; color: var(--text-muted); }
.pmo-chip.is-none b { font-weight: 650; }
.pmo-chip.is-none:hover, .pmo-chip.is-none:focus-visible, .pmo-chip.is-none:active { outline-color: var(--primary); color: var(--text); }
.pmo-plus { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-active); font-weight: 800; color: var(--text-muted); }
.pmo-pick { position: fixed; inset: 0; z-index: var(--z-overlay); }
.pmo-pick__scrim { position: absolute; inset: 0; }
.pmo-pick .pmo-pick__box { top: var(--pmo-y, 80px); left: var(--pmo-x, 16px); width: 300px; max-width: calc(100vw - 16px); }
.pmo-pick.is-up .pmo-pick__box { top: auto; bottom: var(--pmo-b, 80px); }
.pmo-pick__h { margin: 12px 12px 0; font-size: 12.5px; color: var(--text-muted); }
.pmo-pick__h b { color: var(--text); }
.pmo-pick .pp-opt.is-on { background: var(--primary-soft); }
.pmo-pick__nobody { margin-top: 4px; border-top: 1px solid var(--border-light); color: var(--text-muted); }
.pmo-pick__f { margin: 0; padding: 9px 12px; border-top: 1px solid var(--border-light); font-size: 11.5px; color: var(--text-muted); }
@media (max-width: 760px) {
.pmn-table tr.pmn-row { grid-template-columns: minmax(0, 1fr) 40px 96px 38px; }
.pmn-table td.pmn-c-own { width: auto; }
.pmo-chip { width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; background: transparent; box-shadow: none; }
.pmo-chip b { display: none; }
.pmo-chip .pp-av { width: 30px; height: 30px; flex-basis: 30px; font-size: 11px; }
.pmo-chip.is-none { outline: 0; }
.pmo-chip.is-none .pmo-plus { width: 30px; height: 30px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--border); }
.pmo-pick__scrim { background: rgba(10, 10, 16, .45); }
.pmo-pick .pmo-pick__box { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 78vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; animation: pmo-up .24s cubic-bezier(.2, .8, .2, 1) backwards; }
.pmo-pick.is-up .pmo-pick__box { bottom: 0; }
.pmo-pick .pp-list { max-height: 52vh; }
.pmo-pick .pp-opt { min-height: 46px; font-size: 15px; }
.pmo-pick .pp-search { height: 44px; font-size: 16px; }
}
@keyframes pmo-up { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pmo-pick .pmo-pick__box { animation: none; } }
.who-band { --who-new: var(--success); --who-out: var(--text-muted);
display: grid; gap: 10px; margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--border-light);
border-radius: var(--radius-lg, 14px); background: var(--surface); box-shadow: var(--shadow-sm);
animation: whoIn .45s cubic-bezier(.2, .8, .2, 1) backwards; }
.who-band__head { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; }
.who-band__n { font-size: 26px; font-weight: 800; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.who-band__n.is-sub { font-size: 18px; }
.who-band__lbl { font-size: 13.5px; font-weight: 600; color: var(--text-secondary); }
.who-band__goal { margin-left: auto; }
.who-bar { display: flex; gap: 3px; height: 12px; }
.who-bar i { flex: var(--w) 1 0; min-width: 6px; border-radius: 4px; background: var(--c, var(--who-out));
transform-origin: left center; animation: whoGrow .6s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--k, 0) * 70ms + 150ms);
transition: flex-grow .35s ease; }
.who-bar i.is-new { background: var(--who-new); }
.who-bar i.is-out { background: repeating-linear-gradient(135deg, var(--who-out) 0 3px, transparent 3px 6px); opacity: .7; }
.who-bar i.is-none { background: var(--surface-active); box-shadow: inset 0 0 0 1px var(--border-light); }
.who-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.who-chip { animation: whoIn .4s ease backwards; animation-delay: calc(var(--k, 0) * 50ms + 250ms); }
.who-chip .who-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--who-out)); flex: none; }
.who-chip.is-new { background: var(--success-bg); border-color: transparent; color: var(--success); }
.who-chip.is-new .who-dot { background: var(--who-new); }
.who-chip small { font-weight: 600; opacity: .8; }
.who-chip.is-out .who-dot { background: repeating-linear-gradient(135deg, var(--who-out) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--who-out); }
.who-chip.is-on { box-shadow: 0 0 0 2px var(--text); }
.who-by { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin: 0; font-size: 12.5px; color: var(--text-secondary); }
.who-by > span:first-child { font-weight: 700; color: var(--text); }
.who-by .who-p { display: inline-flex; align-items: center; gap: 5px; }
.who-by .who-p b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
background: var(--success-bg); color: var(--success); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.who-pill { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 2px 7px; border-radius: 999px;
background: var(--success-bg); color: var(--success); font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; vertical-align: middle; }
.rc-page[data-who="new"] tr[data-cs-id]:not([data-who~="new"]),
.rc-page[data-who="back"] tr[data-cs-id]:not([data-who~="back"]),
.rc-page[data-who="lane-1"] tr[data-cs-id]:not([data-who~="lane-1"]),
.rc-page[data-who="lane-2"] tr[data-cs-id]:not([data-who~="lane-2"]),
.rc-page[data-who="lane-3"] tr[data-cs-id]:not([data-who~="lane-3"]),
.rc-page[data-who="lane-4"] tr[data-cs-id]:not([data-who~="lane-4"]),
.rc-page[data-who="lane-alumni"] tr[data-cs-id]:not([data-who~="lane-alumni"]),
.rc-page[data-who="lane-none"] tr[data-cs-id]:not([data-who~="lane-none"]),
.rc-page[data-who="signed-new"] tr[data-cs-id]:not([data-who~="signed-new"]),
.rc-page[data-who="signed-back"] tr[data-cs-id]:not([data-who~="signed-back"]) { display: none; }
@media (max-width: 640px) {
.who-band { padding: 12px; border-radius: 12px; }
.who-band__goal { margin-left: 0; }
.who-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 12px 2px; scrollbar-width: none; }
.who-chip { flex: none; }
}
@keyframes whoIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes whoGrow { from { transform: scaleX(0); opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .who-band, .who-bar i, .who-chip { animation: none; } }
@media (max-width: 760px) {
.rc-v2 .who-band { display: flex; align-items: center; gap: 6px; padding: 10px 12px; overflow-x: auto; scrollbar-width: none; }
.rc-v2 .who-band::-webkit-scrollbar { display: none; }
.rc-v2 .who-band .who-bar, .rc-v2 .who-band > .who-band__head:first-child { display: none; }
.rc-v2 .who-band .who-chips { display: contents; }
.rc-v2 .who-band .who-chip { flex: none; min-height: 44px; }
.rc-v2 .who-band .who-band__head { flex: none; align-items: center; gap: 4px; margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--border-light); }
.rc-v2 .who-band .who-band__n.is-sub { font-size: 15px; }
.rc-v2 .who-band .who-band__lbl { font-size: 12.5px; white-space: nowrap; }
}
.odw { position: fixed; inset: 0; z-index: var(--z-overlay); pointer-events: none; }
.odw.is-open { pointer-events: auto; }
.odw-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--text) 30%, transparent); opacity: 0; transition: opacity .25s ease; }
.odw.is-open .odw-scrim { opacity: 1; }
.odw-panel {
position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); overflow-y: auto; overscroll-behavior: contain;
background: var(--surface); box-shadow: -18px 0 40px color-mix(in srgb, var(--text) 16%, transparent);
transform: translateX(104%); transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.odw.is-open .odw-panel { transform: none; }
.odw-panel.is-wide { width: min(980px, 100vw); }
.odw-body { padding: 16px 20px 24px; }
.odw-grab { display: none; }
.odw-head { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.odw-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odw-nav { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.odw-nav button { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--border-light); border-radius: var(--radius); background: var(--surface); font: inherit; font-size: 16px; color: var(--text); cursor: pointer; }
.odw-x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--radius-full); background: var(--surface-active); color: var(--text-secondary); font: inherit; cursor: pointer; }
.odw-nav button:hover, .odw-nav button:active, .odw-nav button:focus-visible,
.odw-x:hover, .odw-x:active, .odw-x:focus-visible { background: var(--surface-hover); color: var(--text); }
.odw-who { margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
.odw-lbl { margin: 18px 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
.odw-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.odw-by { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.odw-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.odw-opt, .odw-btn, .odw-tick {
display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 13px; border: 1px solid var(--border-light);
border-radius: var(--radius-md); background: var(--surface); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text);
text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.odw-opt { color: var(--text-secondary); }
.odw-opt:hover, .odw-opt:active, .odw-opt:focus-visible, .odw-btn:hover, .odw-btn:active, .odw-btn:focus-visible,
.odw-tick:hover, .odw-tick:active, .odw-tick:focus-visible { border-color: var(--v2-accent); }
.odw-opt.is-on { background: var(--text); border-color: var(--text); color: var(--surface); }
.odw-opt.is-on.ok { background: var(--success); border-color: var(--success); color: var(--on-primary); }
.odw-opt.is-on.bad { background: var(--danger); border-color: var(--danger); color: var(--on-primary); }
.odw-btn.is-ok { background: var(--success-bg); border-color: transparent; color: var(--success); }
.odw-btn.is-bad { background: var(--danger-bg); border-color: transparent; color: var(--danger-text); }
.odw-btn.is-wa { background: color-mix(in srgb, var(--success) 12%, var(--surface)); border-color: transparent; color: var(--success); }
.odw-btn.is-primary { background: var(--v2-accent); border-color: var(--v2-accent); color: var(--on-primary); }
.odw-tick i { width: 18px; height: 18px; border: 2px solid var(--border); border-radius: 6px; transition: background-color .15s, border-color .15s; }
.odw-tick.is-on { border-color: var(--v2-accent); background: color-mix(in srgb, var(--v2-accent) 8%, var(--surface)); }
.odw-tick.is-on i { background: var(--v2-accent); border-color: var(--v2-accent); }
.odw-note {
display: block; width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--border-light); border-radius: var(--radius-md);
background: var(--surface); font: inherit; font-size: 16px; line-height: 1.45; color: var(--text); resize: vertical;
}
.odw-note:focus { outline: 2px solid color-mix(in srgb, var(--v2-accent) 35%, transparent); border-color: var(--v2-accent); }
.odw-save { justify-content: flex-end; }
.odw-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border-light); }
.odw-links > * {
display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--radius-md);
background: var(--surface-active); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; cursor: pointer;
}
.odw-links > *:hover, .odw-links > *:active, .odw-links > *:focus-visible { background: var(--surface-hover); }
.odw-links .is-bad { color: var(--danger-text); }
.odw-select {
display: block; width: 100%; min-height: 44px; margin-top: 8px; padding: 0 12px; border: 1px solid var(--border-light);
border-radius: var(--radius-md); background: var(--surface); font: inherit; font-size: 16px; color: var(--text);
}
.odw-toast {
position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 10px 16px; border-radius: var(--radius-md);
background: var(--text); color: var(--surface); font-size: 13.5px; font-weight: 600; box-shadow: 0 14px 30px color-mix(in srgb, var(--text) 25%, transparent);
pointer-events: none; white-space: nowrap;
}
.odw-toast.is-bad { background: var(--danger); color: var(--on-primary); }
body:has(.odw.is-open) .fi-no { z-index: var(--z-modal-top); }
@media (max-width: 760px) {
.odw-panel { top: auto; left: 0; width: auto; max-height: 88vh; border-radius: 20px 20px 0 0; transform: translateY(104%);
box-shadow: 0 -14px 34px color-mix(in srgb, var(--text) 16%, transparent); }
.odw-panel.is-wide { width: auto; }
.odw-grab { display: block; width: 40px; height: 5px; margin: 0 auto 10px; border-radius: var(--radius-full); background: var(--border-light); }
.odw-body { padding: 8px 16px 28px; }
.odw-opt, .odw-btn, .odw-tick, .odw-links > * { min-height: 44px; }
.odw-toast { bottom: 90px; white-space: normal; width: max-content; max-width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce) {
.odw-scrim, .odw-panel { transition: none; }
}
:is(.pmn-band, .pmn-bands__bar i, .pmn-goal, .pmn-bandkey i):is(.is-made, .is-came) { --bc: var(--v2-accent); }
:is(.pmn-band, .pmn-bands__bar i, .pmn-goal, .pmn-bandkey i).is-track { --bc: var(--success); }
:is(.pmn-band, .pmn-bands__bar i, .pmn-goal, .pmn-bandkey i).is-slip { --bc: var(--warning); }
:is(.pmn-band, .pmn-bands__bar i, .pmn-goal, .pmn-bandkey i).is-short { --bc: var(--danger); }
:is(.pmn-band, .pmn-bands__bar i, .pmn-goal, .pmn-bandkey i).is-never { --bc: var(--text-muted); }
.pmn-strip--prog { flex-wrap: wrap; row-gap: 10px; }
.pmn-bands { flex: 1 1 400px; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px 2px; }
.pmn-band { flex: 1 1 0; display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 5px 8px; border: 0; border-radius: var(--radius); background: none; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background-color .2s ease; }
.pmn-band b { font-size: 22px; line-height: 1; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.pmn-band span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.pmn-band span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 3px; background: var(--bc); }
.pmn-band .s { display: none; }
.pmn-band:hover, .pmn-band:active, .pmn-band:focus-visible { background: var(--surface-hover); }
.pmn-band.is-on { background: color-mix(in srgb, var(--bc) 12%, var(--surface)); }
.pmn-bands__bar { flex: 0 0 100%; display: flex; gap: 2px; height: 8px; border-radius: var(--radius-full); overflow: hidden; background: var(--surface-active); }
.pmn-bands__bar i { display: block; height: 100%; background: var(--bc); transform-origin: left; animation: pmn-fill .9s cubic-bezier(.2, .8, .2, 1) .15s backwards; }
.pmn-strip--prog .pmn-todo { flex: 0 1 auto; margin-left: auto; }
.pmn-chip.is-open { background: var(--text); border-color: var(--text); color: var(--surface); }
@keyframes pmn-fill { from { transform: scaleX(0); } }
@keyframes pmn-rise { from { transform: scaleY(0); } }
.pmn-strip--series { flex-wrap: wrap; row-gap: 10px; }
.pmn-time__all { font-weight: 700; color: var(--pm2-acc); text-decoration: none; white-space: nowrap; }
.pmn-time__all:hover, .pmn-time__all:active, .pmn-time__all:focus-visible { text-decoration: underline; }
.pmn-time { order: 10; flex: 1 1 100%; display: flex; align-items: center; gap: 16px; min-width: 0; padding-top: 10px; border-top: 1px solid var(--border-light); }
.pmn-time__cap { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--text-secondary); }
.pmn-time__cap b { color: var(--text); font-variant-numeric: tabular-nums; }
.pmn-time__step { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--border-light); border-radius: var(--radius); background: var(--surface); font-size: 17px; color: var(--text); text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.pmn-time__step:hover, .pmn-time__step:active, .pmn-time__step:focus-visible { border-color: var(--pm2-acc); background: var(--surface-hover); }
.pmn-time__step.is-off { opacity: .3; pointer-events: none; }
.pmn-pips { flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
.pmn-pip { display: grid; justify-items: center; align-content: end; gap: 3px; min-width: 0; padding: 4px 2px; border-radius: var(--radius); text-decoration: none; cursor: pointer; transition: background-color .2s ease; }
.pmn-pip b { font-size: 11px; line-height: 1; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pmn-pip i { display: block; width: 100%; max-width: 46px; height: 20px; border-radius: 4px; background: linear-gradient(to top, var(--pm2-acc) var(--h, 0%), var(--surface-active) var(--h, 0%)); transform-origin: bottom; animation: pmn-rise .7s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(min(var(--k, 0), 16) * 45ms + .2s); }
.pmn-pip span { font-size: 10.5px; line-height: 1; color: var(--text-muted); white-space: nowrap; }
.pmn-pip span em { font-style: normal; }
.pmn-pip.is-ahead i { background: none; box-shadow: inset 0 0 0 1px var(--border-light); }
.pmn-pip.is-next i { background: color-mix(in srgb, var(--pm2-acc) 10%, var(--surface)); box-shadow: inset 0 0 0 2px var(--pm2-acc); }
.pmn-pip.is-next b { color: var(--pm2-acc); }
.pmn-pip:hover, .pmn-pip:active, .pmn-pip:focus-visible { background: var(--surface-hover); }
.pmn-pip.is-on { background: color-mix(in srgb, var(--pm2-acc) 13%, var(--surface)); }
.pmn-pip.is-on span, .pmn-pip.is-on b { color: var(--text); font-weight: 800; }
.pmn-bands.is-plain { flex: 0 1 520px; }
.pmn-bands.is-plain .pmn-band { cursor: default; }
.pmn-bands.is-plain .pmn-band span::before { display: none; }
.pmn-bands.is-plain .pmn-band:hover, .pmn-bands.is-plain .pmn-band:active, .pmn-bands.is-plain .pmn-band:focus-visible { background: none; }
.pmn-ntable td { white-space: nowrap; }
.pmn-ntable .pmn-row { cursor: pointer; }
.pmn-ntable a.pmn-name { text-decoration: none; }
.pmn-ntable .pmn-row.is-next { background: color-mix(in srgb, var(--pm2-acc) 7%, var(--surface)); }
.pmn-ntag { margin-left: 8px; padding: 1px 8px; border-radius: var(--radius-full); background: var(--pm2-acc); font-size: 11px; font-weight: 800; color: var(--on-primary); }
.pmn-n { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.pmn-n.is-dim { font-weight: 500; color: var(--text-muted); }
.pmn-n small { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.pmn-rate { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pmn-rate i { display: block; width: 120px; height: 8px; border-radius: var(--radius-full); background: linear-gradient(to right, var(--pm2-acc) var(--p, 0%), var(--surface-active) var(--p, 0%)); }
.pmn-ntable .pmn-chip { min-height: 26px; padding: 0 9px; font-size: 12px; }
.pmn-ntable .pmn-go { color: var(--text-muted); font-size: 18px; }
.pmn-strip--trip { flex-wrap: wrap; row-gap: 10px; }
.pmn-strip--trip .pmn-todo { flex: 1 1 100%; order: 9; flex-wrap: wrap; overflow: visible; padding-top: 10px; border-top: 1px solid var(--border-light); }
.pmn-strip--trip .pmn-strip__when { max-width: 260px; }
.pmn-chip.is-fact { border-style: dashed; color: var(--text-secondary); cursor: default; }
.pmn-fold { display: grid; grid-template-rows: 0fr; margin: 0; transition: grid-template-rows .32s cubic-bezier(.2, .8, .2, 1), margin .32s cubic-bezier(.2, .8, .2, 1); }
.pmn-fold__in { min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0 32px; padding: 0 18px; border: 1px solid transparent;
border-radius: var(--radius-lg); background: var(--surface); opacity: 0; transition: opacity .25s ease, padding .32s cubic-bezier(.2, .8, .2, 1), border-color .2s ease; }
.pmn-fold.is-open { grid-template-rows: 1fr; margin: 0 0 12px; }
.pmn-fold.is-open .pmn-fold__in { padding: 16px 18px; border-color: var(--border-light); opacity: 1; }
.pmn-fold__main .pm2-hist { margin-top: 10px; }
.pmn-fold__side { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-left: 28px; border-left: 1px solid var(--border-light); }
.pmn-fold__side .cp-team-row { grid-template-columns: 22px minmax(0, 1fr) 70px auto; margin-bottom: 0; }
.pmn-fold__side .cp-num { white-space: nowrap; }
.pmn-fold__side .cp-mini i { background: var(--pm2-acc); }
.pmn-bandkey { display: grid; gap: 5px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--text-secondary); }
.pmn-bandkey li { display: flex; align-items: baseline; gap: 7px; }
.pmn-bandkey i { flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--bc); }
.pmn-bandkey b { flex: none; color: var(--text); }
.pmn-bandkey em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.pmn-bandkey.is-set { margin: 8px 0 0; }
.pm2-hist { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 92px; margin: 14px 0 24px; }
.pm2-hbar { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; }
.pm2-hbar i { display: block; width: 100%; height: var(--h); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--surface-active); }
.pm2-hbar.is-made i { background: var(--pm2-acc); }
.pm2-hbar em { position: absolute; bottom: -17px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 10.5px; color: var(--text-muted); }
.pm2-hist__bar { position: absolute; top: -4px; bottom: 0; left: var(--x); border-left: 2px dashed var(--pm2-acc); padding-left: 5px; font-size: 11px; font-weight: 600; color: var(--pm2-acc); pointer-events: none; }
.pm2-pvswitch.is-inline { order: -1; flex: none; margin: 0; padding: 3px; }
.pm2-pvswitch.is-inline .thrive-tab { padding: 5px 12px; font-size: 13px; white-space: nowrap; }
.pmn-ptable td.pmn-c-sess { white-space: nowrap; }
.pmn-ptable td.pmn-c-sess .pm2-dots12 { max-width: none; flex-wrap: nowrap; }
.pmn-ptable td.pmn-c-sess .pm2-sub { display: inline; margin-left: 10px; font-variant-numeric: tabular-nums; }
.pmn-ptable td.pmn-c-credit, .pmn-ptable td.pmn-c-trip { white-space: nowrap; }
.pmn-ptable .pmn-note { display: inline-block; max-width: 190px; vertical-align: middle; }
.pmn-ptable .pmn-c-owner { width: 60px; }
.pmn-ptable td.pmn-c-owner .pp-av { width: 26px; height: 26px; flex-basis: 26px; font-size: 10px; }
.pmn-ptable .pmn-row { cursor: default; }
.pmn-ptable .pmn-row.is-wait .pmn-slot { width: 260px; }
.pmn-mk { margin-left: 8px; padding: 1px 7px; border-radius: var(--radius-full); background: var(--surface-active); font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.pm2-credit.is-came { background: color-mix(in srgb, var(--v2-accent) 14%, var(--surface)); color: var(--v2-accent); }
.pm2-credit.is-track { background: var(--success-bg); color: var(--success); }
.pm2-credit.is-slip { background: var(--warning-bg); color: var(--warning-text); }
.pm2-credit.is-short { background: var(--danger-bg); color: var(--danger-text); }
.pmn-bar__mk { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--surface) 25%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 10%, transparent); font: inherit; font-size: 12.5px; font-weight: 800; color: var(--surface); white-space: nowrap; cursor: pointer; }
.pmn-bar__mk:hover, .pmn-bar__mk:active, .pmn-bar__mk:focus-visible { background: color-mix(in srgb, var(--surface) 20%, transparent); }
.pm2-dots12 { display: inline-flex; flex-wrap: wrap; gap: 3px; max-width: 240px; vertical-align: middle; }
.pm2-dots12 i { width: 10px; height: 10px; border-radius: 3px; background: var(--surface-active); }
.pm2-dots12 i.is-here { background: var(--v2-accent); }
.pm2-dots12 i.is-late { background: color-mix(in srgb, var(--v2-accent) 45%, var(--surface)); }
.pm2-dots12 i.is-abs { background: color-mix(in srgb, var(--danger) 35%, var(--surface)); }
.pm2-dots12 i.is-ahead { background: none; box-shadow: inset 0 0 0 1px var(--border-light); }
.pmn-goal { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--bc) 10%, var(--surface)); }
.pmn-goal > b { flex: none; font-size: 30px; line-height: 1; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.pmn-goal > b small { font-size: 15px; font-weight: 700; color: var(--text-secondary); }
.pmn-goal strong { display: block; font-size: 14px; color: var(--text); }
.pmn-goal span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--text-secondary); }
.pmn-goal > b span { display: inline; margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.pmn-sheet .pm2-dots12 { display: grid; grid-template-columns: repeat(var(--n, 12), minmax(0, 1fr)); gap: 4px; max-width: none; margin-top: 12px; }
.pmn-sheet .pm2-dots12 i { width: auto; height: 18px; border-radius: 5px; }
.pmn-sheet .pm2-elig { margin-top: 10px; }
.pmn-sheet .odw-lbl em { margin-left: 6px; font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.pmn-sheet .odw-row { align-items: center; }
.pmn-sheet .cs-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--text-muted); }
.pmn-sheet .cs-link { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--danger-text); cursor: pointer; }
.pmn-auto { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.pmn-form { display: contents; }
.pmn-mkadd { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.pmn-mkadd :is(input, select) { min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--surface); font: inherit; font-size: 14px; color: var(--text); }
.pmn-mkadd button { grid-column: 1 / -1; justify-self: start; }
.pmn-mkadd.is-who { grid-template-columns: minmax(0, 1.1fr) 150px minmax(0, 1.4fr) auto; margin-top: 12px; }
.pmn-mkadd.is-who button { grid-column: auto; }
.pmn-mkadd.is-new { grid-template-columns: minmax(0, 1fr) 150px auto; }
.pmn-mkadd.is-new button { grid-column: auto; }
.pmn-mkadd.is-new .cs-hint { grid-column: 1 / -1; margin: 0; }
.pm2-set .cs-sec.is-first { order: -1; }
.pm2-trip { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.pm2-trip b { font-size: 15px; }
.pm2-trip span { font-size: 12.5px; color: var(--text-secondary); }
.pm2-tripnums { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--text-secondary); }
.pm2-tripnums b { display: block; font-size: 18px; color: var(--text); }
.pm2-tripacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pm2-link2 { color: var(--pm2-acc); font-weight: 600; text-decoration: none; }
.pm2-link2:hover, .pm2-link2:active, .pm2-link2:focus-visible { text-decoration: underline; }
.pm2-pp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.pm2-pp__have { padding: 6px 12px; border-radius: var(--radius-full); background: var(--success-bg); color: var(--success-text); font-size: 13px; font-weight: 600; }
.pm2-pp__have.is-short { background: var(--surface-active); color: var(--text-secondary); }
.pm2-pp-ok { color: var(--success-text); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pm2-pill.is-wait { background: var(--warning-bg); color: var(--warning-text); }
button.pm2-pill { border: 0; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
button.pm2-pill:hover, button.pm2-pill:active, button.pm2-pill:focus-visible { box-shadow: inset 0 0 0 1px currentColor; }
.pm2-elig-status { margin: 0; }
.pm2-elig { width: 100%; border-collapse: collapse; font-size: 13px; }
.pm2-elig td { padding: 7px 0; border-bottom: 1px solid var(--border-light); color: var(--text-secondary); }
.pm2-elig td:last-child { text-align: right; color: var(--text); font-weight: 600; white-space: nowrap; }
.pm2-elig tr.is-total td { border-bottom: 0; color: var(--text); font-weight: 700; }
.pm2-elig small { display: block; font-weight: 500; color: var(--text-muted); }
.pm2-makeup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; font-size: 13px; font-weight: 500; color: var(--text-secondary); border-bottom: 1px solid var(--border-light); }
.pm2-makeup b { color: var(--text); }
.pm2-makeup .cs-link { margin-left: auto; }
.pm2-makeup .cs-link + .cs-link, .pm2-makeup b + .cs-link { margin-left: 0; }
.pm2-makeup-add { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 8px; }
.pm2-pptable td, .pm2-pptable th { white-space: nowrap; }
.pm2-invbody { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--surface); }
@media (max-width: 760px) {
.pmn-bands { flex: 1 1 100%; order: 2; }
.pmn-band { flex-direction: column; align-items: center; gap: 4px; min-height: 48px; padding: 6px 2px; }
.pmn-band b { font-size: 24px; }
.pmn-band span { max-width: 100%; font-size: 10.5px; }
.pmn-band span::before { width: 6px; height: 6px; margin-right: 3px; }
.pmn-band .l { display: none; }
.pmn-band .s { display: inline; }
.pmn-strip--prog .pmn-todo { flex: 1 1 100%; order: 4; margin-left: -14px; }
.pmn-time { order: 5; flex-direction: column; align-items: stretch; gap: 8px; }
.pmn-time__cap { justify-content: space-between; }
.pmn-time__step { width: 44px; height: 44px; }
.pmn-pip { min-height: 48px; padding: 4px 0; }
.pmn-pip i { height: 18px; }
.pmn-pip span em { display: none; }
.pmn-pips.is-many { grid-auto-columns: 30px; overflow-x: auto; scrollbar-width: none; }
.pmn-pips.is-many::-webkit-scrollbar { display: none; }
.pmn-bands.is-plain { flex: 1 1 100%; }
.pmn-table tr.pmn-nrow { grid-template-columns: minmax(0, 1fr) auto 24px; gap: 4px 8px; min-height: 58px; padding: 8px 8px 8px 12px; }
.pmn-table tr.pmn-nrow > td.pmn-c-name { grid-column: 1; grid-row: 1; }
.pmn-table tr.pmn-nrow > td.pmn-c-came { grid-column: 2; grid-row: 1; justify-self: end; }
.pmn-table tr.pmn-nrow > td.pmn-c-rate { grid-column: 1 / 3; grid-row: 2; }
.pmn-table tr.pmn-nrow > td.pmn-c-up { display: none; }
.pmn-table tr.pmn-nrow > td.pmn-c-go { grid-column: 3; grid-row: 1 / span 2; }
.pmn-rate { width: 100%; }
.pmn-rate i { flex: 1; width: auto; }
.pmn-strip--trip .pmn-todo { margin: 0; padding: 10px 0 0; }
.pmn-fold__in { grid-template-columns: minmax(0, 1fr); gap: 14px 0; }
.pmn-fold__side { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--border-light); }
.pm2-pvswitch.is-inline { flex: 1 1 100%; display: flex; }
.pm2-pvswitch.is-inline .thrive-tab { flex: 1; justify-content: center; min-height: 44px; padding: 6px 8px; }
.pmn-table tr.pmn-prow { position: relative; grid-template-columns: minmax(0, 1fr) auto 38px; gap: 4px 8px; min-height: 62px; padding: 8px 4px 8px 12px; }
.pmn-table tr.pmn-prow > td.pmn-c-name { grid-column: 1; grid-row: 1; }
.pmn-table tr.pmn-prow > td.pmn-c-credit { grid-column: 2; grid-row: 1; justify-self: end; }
.pmn-table tr.pmn-prow > td.pmn-c-more { grid-column: 3; grid-row: 1 / span 2; }
.pmn-table tr.pmn-prow > td.pmn-c-sess { grid-column: 1; grid-row: 2; display: flex; align-items: center; min-width: 0; }
.pmn-table tr.pmn-prow > td.pmn-c-trip { grid-column: 2; grid-row: 2; justify-self: end; }
.pmn-table tr.pmn-prow.is-wait { min-height: 48px; }
.pmn-table tr.pmn-prow.is-wait > td.pmn-c-slot { grid-column: 2; grid-row: 1; }
.pmn-table tr.pmn-prow.is-wait > td.pmn-c-more { grid-row: 1; }
.pmn-ptable .pmn-row.is-wait .pmn-slot { width: 96px; }
.pmn-ptable td.pmn-c-sess .pm2-dots12 { min-width: 0; overflow: hidden; }
.pmn-ptable td.pmn-c-sess .pm2-dots12 i { flex: none; width: 9px; height: 9px; }
.pmn-ptable .pmn-mk { display: none; }
.pmn-table tr.pmn-prow .pmn-dots::after { content: ""; position: absolute; inset: 0; }
.pmn-table tr.pmn-prow .pm2-credit, .pmn-table tr.pmn-prow .pm2-pill, .pmn-table tr.pmn-prow .pmn-name { pointer-events: none; }
.pmn-table tr.pmn-prow > td.pmn-c-tick { z-index: 1; }
.pmn-table tr.pmn-prow .pmn-approve { position: relative; z-index: 1; }
.pmn-mkadd, .pmn-mkadd.is-who, .pmn-mkadd.is-new { grid-template-columns: minmax(0, 1fr); }
.pmn-mkadd :is(input, select) { min-height: 44px; font-size: 16px; }
.pmn-bar__mk { min-height: 44px; }
.pmn-bar .cst-menu__pop { max-height: 65vh; overflow-y: auto; }
.pmn-bar .cst-menu__pop select { display: block; width: 100%; max-width: none; min-height: 44px; margin: 2px 0; padding: 0 10px; border: 1px solid var(--border-light); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: 16px; font-weight: 700; }
.pm2-makeup-add { grid-template-columns: 1fr; }
.pm2-tripacts .cst-btn, .pm2-pp .cst-btn { min-height: 44px; }
.pm2-link2 { display: inline-flex; align-items: center; min-height: 44px; }
.pm2-makeup .cs-link { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
.pmn-fold, .pmn-fold__in, .pmn-band, .pmn-pip { transition: none; }
.pmn-bands__bar i, .pmn-pip i { animation: none; }
}
.olami-ee2-shell {
--primary-100: color-mix(in srgb, var(--primary) 14%, #fff);
--bg: #f5f5f7;
--surface: #ffffff;
--surface-hover: #fafbfc;
--text: #1d1d1f;
--text-secondary: #6b7280;
--text-faint: #9ca3af;
--border: #e5e7eb;
--border-soft: #f1f2f4;
--success: #16a34a;
--success-bg: #dcfce7;
--success-text: #166534;
--warning: #f59e0b;
--warning-bg: #fffbeb;
--warning-text: #92400e;
--danger: #dc2626;
--danger-bg: #fef2f2;
--info: #3b82f6;
--info-bg: #eff6ff;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow: 0 4px 12px rgba(0,0,0,0.04);
--shadow-md: 0 4px 24px rgba(0,0,0,0.06);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.08);
--radius-sm: 6px;
--radius: 8px;
--radius-md: 10px;
--radius-lg: 12px;
--shell-max: 1680px;
--rail-w: 224px;
--gap: 28px;
--preview-w: 360px;
background: var(--bg);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, var(--emoji);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: -24px;
padding: 0;
}
.olami-ee2-shell *, .olami-ee2-shell *::before, .olami-ee2-shell *::after { box-sizing: border-box; }
.olami-ee2-shell .ee2-topbar {
position: sticky; top: 0;
z-index: 50;
background: rgba(255,255,255,0.85);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--border);
}
@media (min-width: 1024px) {
.olami-ee2-shell .ee2-topbar { z-index: 20; }
}
.olami-ee2-shell .ee2-topbar-inner {
max-width: var(--shell-max); margin: 0 auto; padding: 12px 24px;
display: flex; align-items: center; gap: 14px;
}
.olami-ee2-shell .ee2-brand {
display: flex; align-items: center; gap: 10px;
font-weight: 700; letter-spacing: -0.01em; font-size: 15px;
}
.olami-ee2-shell .ee2-brand-dot {
width: 26px; height: 26px; border-radius: 7px;
background: linear-gradient(135deg, var(--primary), var(--primary-hover));
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 13px; font-weight: 800;
}
.olami-ee2-shell .ee2-brand-sep { width: 1px; height: 22px; background: var(--border); margin: 0 6px; }
.olami-ee2-shell .ee2-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.olami-ee2-shell .ee2-breadcrumb a { color: inherit; text-decoration: none; }
.olami-ee2-shell .ee2-breadcrumb a:hover { color: var(--text); }
.olami-ee2-shell .ee2-breadcrumb .crumb-current { color: var(--text); font-weight: 600; }
.olami-ee2-shell .ee2-breadcrumb svg { color: var(--text-faint); }
.olami-ee2-shell .ee2-topbar-spacer { flex: 1; }
.olami-ee2-shell .ee2-topbar-actions { display: flex; align-items: center; gap: 8px; }
.olami-ee2-shell .ee2-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px; font-size: 13px; font-weight: 600; font-family: inherit;
border: 1px solid var(--border); background: var(--surface); color: var(--text);
border-radius: var(--radius); cursor: pointer; transition: all 0.12s ease;
white-space: nowrap; text-decoration: none; line-height: 1.2;
}
.olami-ee2-shell .ee2-btn:hover { border-color: var(--border); box-shadow: var(--shadow-sm); color: var(--text); }
.olami-ee2-shell .ee2-btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.olami-ee2-shell .ee2-btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.olami-ee2-shell .ee2-btn--ghost { border-color: transparent; background: transparent; color: var(--text-secondary); }
.olami-ee2-shell .ee2-btn--ghost:hover { background: var(--border-soft); color: var(--text); }
.olami-ee2-shell .ee2-btn--danger { color: var(--danger); border-color: var(--border); }
.olami-ee2-shell .ee2-btn--danger:hover { background: var(--danger-bg); border-color: #fecaca; }
.olami-ee2-shell .ee2-btn--warn { color: var(--warning-text); border-color: var(--border); }
.olami-ee2-shell .ee2-btn--warn:hover { background: var(--warning-bg); border-color: #fde68a; }
.olami-ee2-shell .ee2-topbar-div { width: 1px; height: 22px; background: var(--border-light); margin: 0 4px; }
.olami-ee2-shell .ee2-pill--cancelled { background: var(--danger-bg); color: var(--danger-text); }
.olami-ee2-shell .ee2-btn--sm { padding: 5px 10px; font-size: 12px; }
.olami-ee2-shell .ee2-btn--icon { padding: 7px 9px; width: 32px; height: 32px; justify-content: center; }
.olami-ee2-shell .ee2-page { max-width: var(--shell-max); margin: 0 auto; padding: 24px 24px 96px; }
.olami-ee2-shell .ee2-page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.olami-ee2-shell .ee2-page-title h1 {
margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--text);
}
.olami-ee2-shell .ee2-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-secondary); flex-wrap: wrap; }
.olami-ee2-shell .ee2-pill {
display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
border-radius: 999px; background: var(--border-soft); color: var(--text-secondary);
}
.olami-ee2-shell .ee2-pill--draft { background: #fef3c7; color: #92400e; }
.olami-ee2-shell .ee2-pill--published { background: var(--success-bg); color: var(--success-text); }
.olami-ee2-shell .ee2-pill--featured { background: linear-gradient(90deg, #fffbeb, #fef3c7); color: #92400e; }
.olami-ee2-shell .ee2-toast {
background: var(--success-bg); color: var(--success-text); border: 1px solid #bbf7d0;
border-radius: var(--radius); padding: 10px 14px; font-size: 13px; font-weight: 600; margin-bottom: 16px;
}
.olami-ee2-shell .ee2-layout { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--preview-w, 360px); gap: var(--gap); align-items: start; }
.olami-ee2-shell .ee2-preview { position: sticky; top: 88px; align-self: start; }
.olami-ee2-shell .ee2-preview-head { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); padding: 0 2px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.olami-ee2-shell .ee2-preview-stage { width: 100%; overflow: hidden; border-radius: 16px; }
.olami-ee2-shell .ee2-preview-frame { transform-origin: top left; width: 460px; height: 540px; border: 0; border-radius: 16px; background: var(--bg); box-shadow: var(--shadow-md); display: block; transition: height 0.2s ease; }
@media (max-width: 1380px) {
.olami-ee2-shell .ee2-layout { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
.olami-ee2-shell .ee2-preview { display: none; }
}
.olami-ee2-shell .ee2-rail {
position: sticky; top: 88px; background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius-md);
padding: 10px; box-shadow: var(--shadow-sm); max-height: calc(100vh - 130px); overflow: auto;
}
.olami-ee2-shell .ee2-rail-section { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); padding: 8px 10px 4px; }
.olami-ee2-shell .ee2-rail a {
display: flex; align-items: center; gap: 9px; padding: 8px 10px;
font-size: 13px; font-weight: 500; color: var(--text); border-radius: var(--radius);
margin-bottom: 1px; cursor: pointer; transition: background 0.12s, color 0.12s; text-decoration: none;
}
.olami-ee2-shell .ee2-rail a:hover { background: var(--border-soft); color: var(--text); }
.olami-ee2-shell .ee2-rail a.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.olami-ee2-shell .ee2-rail a .ico { font-size: 14px; line-height: 1; }
.olami-ee2-shell .ee2-rail-divider { height: 1px; background: var(--border); margin: 8px 4px; }
.olami-ee2-shell .ee2-rail-save { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--surface-hover); border-radius: var(--radius); border: 1px dashed var(--border); }
.olami-ee2-shell .ee2-rail-save .save-status { font-size: 11px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.olami-ee2-shell .ee2-rail-save .save-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.olami-ee2-shell .ee2-main { min-width: 0; }
.olami-ee2-shell .ee2-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow); margin-bottom: 16px; overflow: hidden; }
.olami-ee2-shell .ee2-card-head { padding: 18px 22px 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--border); }
.olami-ee2-shell .ee2-card-head h2 { margin: 0 0 4px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 9px; color: var(--text); }
.olami-ee2-shell .ee2-card-head h2 .ico { font-size: 17px; line-height: 1; }
.olami-ee2-shell .ee2-card-head .sub { font-size: 12px; color: var(--text-secondary); }
.olami-ee2-shell .ee2-card-head .head-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.olami-ee2-shell .ee2-card-body { padding: 18px 22px 22px; }
.olami-ee2-shell .ee2-cond-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; background: var(--info-bg); color: #1e40af; }
.olami-ee2-shell .ee2-cond-pill--trip { background: #ecfeff; color: #155e75; }
.olami-ee2-shell .ee2-cond-pill--prog { background: #f3e8ff; color: #6b21a8; }
.olami-ee2-shell .ee2-cond-pill--event { background: #ecfdf5; color: #047857; }
.olami-ee2-shell[data-type="trip"] .ee2-only-event,
.olami-ee2-shell[data-type="program"] .ee2-only-event,
.olami-ee2-shell[data-type="event"] .ee2-only-trip,
.olami-ee2-shell[data-type="program"] .ee2-only-trip,
.olami-ee2-shell[data-type="event"] .ee2-only-prog,
.olami-ee2-shell[data-type="trip"] .ee2-only-prog,
.olami-ee2-shell[data-type="program"] .ee2-only-not-prog { display: none !important; }
.olami-ee2-shell[data-recurring="none"] .ee2-only-recurring { display: none !important; }
.olami-ee2-shell .ee2-form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 16px; margin-bottom: 14px; }
.olami-ee2-shell .ee2-form-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.olami-ee2-shell .ee2-form-row.cols-1 { grid-template-columns: 1fr; }
.olami-ee2-shell .ee2-form-row > .full { grid-column: 1 / -1; }
.olami-ee2-shell .ee2-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.olami-ee2-shell .ee2-field.full { grid-column: 1 / -1; }
.olami-ee2-shell .ee2-field label { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; gap: 6px; }
.olami-ee2-shell .ee2-field label .req { color: var(--danger); }
.olami-ee2-shell .ee2-field .helper { font-size: 12px; color: var(--text-secondary); }
.olami-ee2-shell .ee2-input,
.olami-ee2-shell .ee2-select,
.olami-ee2-shell textarea.ee2-input {
font: inherit; font-size: 13px; color: var(--text); padding: 9px 12px;
border: 1px solid var(--border); background: var(--surface-hover); border-radius: var(--radius);
transition: border-color 0.12s, background 0.12s, box-shadow 0.12s; outline: none; width: 100%; line-height: 1.4; min-height: unset;
}
.olami-ee2-shell textarea.ee2-input { min-height: 92px; resize: vertical; }
.olami-ee2-shell .ee2-input:focus,
.olami-ee2-shell .ee2-select:focus,
.olami-ee2-shell textarea.ee2-input:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px rgba(180,31,81,0.10); }
.olami-ee2-shell .ee2-select {
appearance: none; -webkit-appearance: none; padding-right: 32px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
}
.olami-ee2-shell .ee2-input-group { position: relative; }
.olami-ee2-shell .ee2-input-group .prefix,
.olami-ee2-shell .ee2-input-group .suffix { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--text-secondary); font-weight: 500; pointer-events: none; }
.olami-ee2-shell .ee2-input-group .prefix { left: 12px; }
.olami-ee2-shell .ee2-input-group .suffix { right: 12px; }
.olami-ee2-shell .ee2-input-group--prefix .ee2-input { padding-left: 30px; }
.olami-ee2-shell .ee2-input-group--suffix .ee2-input { padding-right: 60px; }
.olami-ee2-shell .ee2-type-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.olami-ee2-shell .ee2-type-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 2px solid var(--border); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; text-align: left; font: inherit; transition: all 0.15s ease; color: var(--text); position: relative; }
.olami-ee2-shell .ee2-type-card:hover { border-color: var(--border); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(16,24,40,0.06); }
.olami-ee2-shell .ee2-type-card.is-active { border-color: var(--primary); background: linear-gradient(180deg, #fff5f9 0%, #fdf2f7 100%); box-shadow: 0 0 0 4px rgba(180,31,81,0.12), 0 4px 14px rgba(180,31,81,0.10); transform: translateY(-1px); }
.olami-ee2-shell .ee2-type-card.is-active::after { content: ""; position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; background: var(--primary); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: 14px 14px; background-position: center; background-repeat: no-repeat; box-shadow: 0 2px 6px rgba(180,31,81,0.35); }
.olami-ee2-shell .ee2-type-card .tc-emoji { font-size: 24px; line-height: 1; margin-bottom: 4px; }
.olami-ee2-shell .ee2-type-card .tc-title { font-weight: 700; font-size: 14px; }
.olami-ee2-shell .ee2-type-card .tc-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.olami-ee2-shell .ee2-type-card.is-active .tc-title { color: var(--primary); }
.olami-ee2-shell .ee2-type-card.is-active .tc-emoji { transform: scale(1.08); transition: transform 0.2s; }
.olami-ee2-shell .ee2-toggle-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface-hover); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all 0.12s; }
.olami-ee2-shell .ee2-toggle-row:hover { background: var(--surface); border-color: var(--border); }
.olami-ee2-shell .ee2-toggle-row + .ee2-toggle-row { margin-top: 8px; }
.olami-ee2-shell .ee2-toggle-row input[type="checkbox"] { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; margin: 0; flex-shrink: 0; }
.olami-ee2-shell .ee2-toggle-row .tr-text { flex: 1; min-width: 0; }
.olami-ee2-shell .ee2-toggle-row .tr-text strong { display: block; font-weight: 600; font-size: 13px; color: var(--text); }
.olami-ee2-shell .ee2-toggle-row .tr-text small { color: var(--text-secondary); font-size: 12px; display: block; margin-top: 2px; }
.olami-ee2-shell .ee2-toggle-row.is-on { background: var(--primary-soft); border-color: rgba(180,31,81,0.25); }
.olami-ee2-shell .ee2-toggle-row.is-on .tr-text strong { color: var(--primary); }
.olami-ee2-shell .ee2-featured-row { position: relative; }
.olami-ee2-shell .ee2-featured-row::before { content: ""; position: absolute; left: -22px; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #f59e0b, #fbbf24); border-radius: 999px; }
.olami-ee2-shell .ee2-dt-pair { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.olami-ee2-shell .ee2-day-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.olami-ee2-shell .ee2-day-cell { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; text-align: center; transition: all 0.12s; }
.olami-ee2-shell .ee2-day-cell:hover { border-color: var(--border); }
.olami-ee2-shell .ee2-day-cell.is-on { border-color: var(--primary); background: var(--primary-soft); }
.olami-ee2-shell .ee2-day-cell .dl { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); letter-spacing: 0.04em; }
.olami-ee2-shell .ee2-day-cell.is-on .dl { color: var(--primary); }
.olami-ee2-shell .ee2-day-cell input[type="time"] { width: 100%; font: inherit; font-size: 11px; border: 0; background: transparent; text-align: center; color: var(--text); padding: 0; }
.olami-ee2-shell .ee2-day-cell input[type="time"]:disabled { color: var(--text-faint); }
.olami-ee2-shell .ee2-options-list { display: flex; flex-direction: column; gap: 8px; }
.olami-ee2-shell .ee2-option-row { display: grid; grid-template-columns: 18px 1.4fr 1.4fr 1fr 100px 80px 70px 32px 32px; gap: 8px; padding: 8px 10px; background: var(--surface-hover); border: 1px solid var(--border); border-radius: var(--radius); align-items: center; }
.olami-ee2-shell .ee2-option-row .drag { color: var(--text-faint); cursor: grab; display: flex; justify-content: center; }
.olami-ee2-shell .ee2-option-row.is-inactive { opacity: 0.55; }
.olami-ee2-shell .ee2-option-row .ee2-input { padding: 7px 10px; font-size: 13px; }
.olami-ee2-shell .ee2-option-row .o-wait,
.olami-ee2-shell .ee2-option-row .o-active { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); }
.olami-ee2-shell .ee2-add-row { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: transparent; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-secondary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; width: 100%; justify-content: center; transition: all 0.12s; }
.olami-ee2-shell .ee2-add-row:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.olami-ee2-shell .ee2-map-preview { height: 140px; background: linear-gradient(135deg, #e0e7ef 0%, #cbd5e1 100%); border-radius: var(--radius); border: 1px solid var(--border); position: relative; overflow: hidden; }
.olami-ee2-shell .ee2-map-preview::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.4) 1px, transparent 1px); background-size: 28px 28px; }
.olami-ee2-shell .ee2-map-preview .pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); font-size: 24px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25)); }
.olami-ee2-shell .ee2-map-preview .radius-circle { position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; border-radius: 50%; background: rgba(180,31,81,0.15); border: 2px solid rgba(180,31,81,0.5); transform: translate(-50%, -50%); }
.olami-ee2-shell .ee2-email-template { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; background: var(--surface); }
.olami-ee2-shell .ee2-email-template summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; align-items: center; gap: 10px; background: var(--surface-hover); font-size: 13px; font-weight: 600; }
.olami-ee2-shell .ee2-email-template summary::-webkit-details-marker { display: none; }
.olami-ee2-shell .ee2-email-template summary .chev { color: var(--text-faint); transition: transform 0.15s; }
.olami-ee2-shell .ee2-email-template[open] summary .chev { transform: rotate(90deg); }
.olami-ee2-shell .ee2-email-template summary .tpl-name { flex: 1; }
.olami-ee2-shell .ee2-email-template summary .tpl-status { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--border-soft); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.olami-ee2-shell .ee2-email-template summary .tpl-status.is-set { background: var(--success-bg); color: var(--success-text); }
.olami-ee2-shell .ee2-email-template .et-body { padding: 14px; }
.olami-ee2-shell .ee2-tag-legend { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; background: #fdfbf3; border: 1px dashed #facc15; border-radius: var(--radius); margin-bottom: 14px; }
.olami-ee2-shell .ee2-tag-legend .lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #92400e; margin-right: 4px; display: flex; align-items: center; }
.olami-ee2-shell .ee2-tag-legend code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; padding: 2px 7px; background: var(--surface); border: 1px solid #fde68a; border-radius: 4px; color: #92400e; }
.olami-ee2-shell .ee2-radio-cards { display: flex; flex-direction: column; gap: 10px; }
.olami-ee2-shell .ee2-radio-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 44px 14px 14px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: all 0.15s ease; position: relative; }
.olami-ee2-shell .ee2-radio-card:hover { border-color: var(--border); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(16,24,40,0.06); }
.olami-ee2-shell .ee2-radio-card.is-active { border-color: var(--primary); background: linear-gradient(180deg, #fff5f9 0%, #fdf2f7 100%); box-shadow: 0 0 0 4px rgba(180,31,81,0.12), 0 4px 14px rgba(180,31,81,0.10); transform: translateY(-1px); }
.olami-ee2-shell .ee2-radio-card.is-active::after { content: ""; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 22px; height: 22px; background: var(--primary); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: 14px 14px; background-position: center; background-repeat: no-repeat; box-shadow: 0 2px 6px rgba(180,31,81,0.35); }
.olami-ee2-shell .ee2-radio-card input[type="radio"] { accent-color: var(--primary); margin: 2px 0 0; width: 16px; height: 16px; flex-shrink: 0; }
.olami-ee2-shell .ee2-radio-card .rc-text strong { display: block; font-size: 13px; font-weight: 600; }
.olami-ee2-shell .ee2-radio-card .rc-text small { color: var(--text-secondary); font-size: 12px; }
.olami-ee2-shell .ee2-radio-card.is-active .rc-text strong { color: var(--primary); }
.olami-ee2-shell .ee2-invite-link { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.olami-ee2-shell .ee2-invite-link .ee2-input { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; flex: 1 1 260px; min-width: 0; }
.olami-ee2-shell .ee2-help { font-size: 12px; line-height: 1.55; color: var(--text-secondary); background: var(--surface-hover); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.olami-ee2-shell .ee2-help strong { color: var(--text); }
.olami-ee2-shell .ee2-help em { font-style: normal; display: inline-block; margin-top: 6px; opacity: 0.85; }
.olami-ee2-shell .ee2-reward-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.olami-ee2-shell .ee2-reward-box { padding: 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-hover); }
.olami-ee2-shell .ee2-reward-box .rb-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: 6px; }
.olami-ee2-shell .ee2-reward-box .rb-input { display: flex; align-items: center; gap: 8px; }
.olami-ee2-shell .ee2-reward-box .rb-input .ee2-input { font-size: 18px; font-weight: 700; padding: 6px 10px; }
.olami-ee2-shell .ee2-reward-box .rb-input .emoji { font-size: 22px; }
.olami-ee2-shell .ee2-reward-box .rb-helper { font-size: 11px; color: var(--text-secondary); margin-top: 6px; }
.olami-ee2-shell .ee2-hero-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.olami-ee2-shell .ee2-hero-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; font: inherit; transition: all 0.15s ease; color: var(--text); position: relative; }
.olami-ee2-shell .ee2-hero-tile:hover { border-color: var(--border); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(16,24,40,0.05); }
.olami-ee2-shell .ee2-hero-tile.is-active { border-color: var(--primary); background: linear-gradient(180deg, #fff5f9 0%, #fdf2f7 100%); box-shadow: 0 0 0 3px rgba(180,31,81,0.14), 0 3px 10px rgba(180,31,81,0.10); transform: translateY(-1px); }
.olami-ee2-shell .ee2-hero-tile.is-active::after { content: ""; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; background: var(--primary); border: 2px solid #fff; border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: 10px 10px; background-position: center; background-repeat: no-repeat; box-shadow: 0 2px 6px rgba(180,31,81,0.4); }
.olami-ee2-shell .ee2-hero-tile .ht-emoji { font-size: 24px; line-height: 1; transition: transform 0.2s; }
.olami-ee2-shell .ee2-hero-tile.is-active .ht-emoji { transform: scale(1.1); }
.olami-ee2-shell .ee2-hero-tile .ht-name { font-size: 10px; font-weight: 600; color: var(--text-secondary); text-align: center; }
.olami-ee2-shell .ee2-hero-tile.is-active .ht-name { color: var(--primary); font-weight: 700; }
.olami-ee2-shell .ee2-sub-divider { margin: 18px -22px; height: 1px; background: var(--border); }
.olami-ee2-shell .ee2-sub-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.olami-ee2-shell .ee2-image-upload { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface-hover); }
.olami-ee2-shell .ee2-image-upload .iu-thumb { width: 64px; height: 42px; border-radius: 6px; background: linear-gradient(135deg, #fed7aa, #fb923c); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; background-size: cover; background-position: center; }
.olami-ee2-shell .ee2-image-upload .iu-info { flex: 1; min-width: 0; }
.olami-ee2-shell .ee2-image-upload .iu-info .iu-name { font-size: 13px; font-weight: 600; color: var(--text); }
.olami-ee2-shell .ee2-image-upload .iu-info .iu-meta { font-size: 11px; color: var(--text-secondary); }
.olami-ee2-shell .ee2-checklist-panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.olami-ee2-shell .ee2-checklist-panel .cp-filter { padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface-hover); }
.olami-ee2-shell .ee2-checklist-panel .cp-filter input { width: 100%; border: 0; background: transparent; font: inherit; font-size: 13px; padding: 4px 6px; outline: none; }
.olami-ee2-shell .ee2-checklist-panel .cp-list { max-height: 220px; overflow-y: auto; padding: 6px; }
.olami-ee2-shell .ee2-checklist-panel .cp-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.olami-ee2-shell .ee2-checklist-panel .cp-row:hover { background: var(--surface-hover); }
.olami-ee2-shell .ee2-checklist-panel .cp-row.is-checked { background: #ecfdf5; }
.olami-ee2-shell .ee2-checklist-panel .cp-row input[type="checkbox"] { accent-color: var(--primary); }
.olami-ee2-shell .ee2-checklist-panel .cp-row .cp-title { flex: 1; min-width: 0; }
.olami-ee2-shell .ee2-checklist-panel .cp-row .cp-date { font-size: 11px; color: var(--text-secondary); }
.olami-ee2-shell .ee2-checklist-panel .cp-empty { padding: 14px; text-align: center; color: var(--text-faint); font-size: 12px; }
.olami-ee2-shell .ee2-mk { counter-reset: mk; }
.olami-ee2-shell .ee2-field .ee2-mk .cp-row,
.olami-ee2-shell .ee2-field .ee2-mk .mk-all { text-transform: none; letter-spacing: normal; font-weight: 400; font-size: 13px; color: var(--text); }
.olami-ee2-shell .ee2-mk .cp-list { max-height: 280px; }
.olami-ee2-shell .ee2-mk .cp-row:has(input:checked) { background: var(--success-bg); }
.olami-ee2-shell .ee2-mk .cp-row input:checked { counter-increment: mk; }
.olami-ee2-shell .ee2-mk .mk-tag { font-size: 11px; font-weight: 700; color: var(--success-text); }
.olami-ee2-shell .ee2-mk .mk-off,
.olami-ee2-shell .ee2-mk.is-locked .cp-row { cursor: default; }
.olami-ee2-shell .ee2-mk .mk-off { opacity: .55; }
.olami-ee2-shell .ee2-mk .mk-group { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); padding: 10px 10px 4px; }
.olami-ee2-shell .ee2-mk .mk-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--border); background: var(--surface-hover); font-size: 12px; color: var(--text-secondary); }
.olami-ee2-shell .ee2-field .ee2-mk .mk-all { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; font-size: 12px; font-weight: 600; }
.olami-ee2-shell .ee2-mk .mk-count::before { content: counter(mk) " credited"; font-weight: 700; }
.olami-ee2-shell .ee2-mk-lock { font-size: 12px; color: var(--text-secondary); background: var(--surface-hover); border: 1px dashed var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
@media (max-width: 820px) {
.olami-ee2-shell .ee2-mk .cp-row .cp-date { display: none; }
.olami-ee2-shell .ee2-mk .cp-row.mk-off .cp-date { display: inline; }
}
.olami-ee2-shell .ee2-note { background: linear-gradient(90deg, #fffbeb, #fef3c7); border: 1px solid #fde68a; border-radius: var(--radius); padding: 10px 14px; font-size: 12px; color: #92400e; display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; }
.olami-ee2-shell .ee2-note .emoji { font-size: 16px; line-height: 1.2; }
.olami-ee2-shell .ee2-mobile-nav { display: none; }
@media (max-width: 1024px) { .olami-ee2-shell { --rail-w: 192px; --gap: 20px; } }
@media (max-width: 820px) {
.olami-ee2-shell .ee2-page { padding: 16px 14px 40px; }
.olami-ee2-shell .ee2-layout { grid-template-columns: 1fr; gap: 0; }
.olami-ee2-shell .ee2-rail { display: none; }
.olami-ee2-shell .ee2-mobile-nav { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 6px; padding: 8px 14px 12px; margin: 0 0 14px; -webkit-overflow-scrolling: touch; background: var(--bg); position: sticky; top: 56px; z-index: 30; border-bottom: 1px solid var(--border); }
.olami-ee2-shell .ee2-mobile-nav::-webkit-scrollbar { display: none; }
.olami-ee2-shell .ee2-mobile-nav a { flex-shrink: 0; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; cursor: pointer; text-decoration: none; }
.olami-ee2-shell .ee2-mobile-nav a.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.olami-ee2-shell .ee2-topbar-inner { padding: 10px 14px; gap: 10px; }
.olami-ee2-shell .ee2-brand-sep { display: none; }
.olami-ee2-shell .ee2-brand { font-size: 14px; }
.olami-ee2-shell .ee2-brand-dot { width: 24px; height: 24px; }
.olami-ee2-shell .ee2-topbar-inner { flex-wrap: wrap; row-gap: 8px; }
.olami-ee2-shell .ee2-brand,
.olami-ee2-shell .ee2-brand-sep,
.olami-ee2-shell .ee2-breadcrumb,
.olami-ee2-shell .ee2-topbar-spacer { display: none; }
.olami-ee2-shell .ee2-topbar-actions { width: 100%; flex-wrap: wrap; gap: 6px; }
.olami-ee2-shell .ee2-topbar-actions .ee2-btn { padding: 7px 10px; font-size: 12.5px; }
.olami-ee2-shell .ee2-topbar-actions .ee2-btn--primary { order: 10; margin-left: auto; }
.olami-ee2-shell .ee2-topbar-div { display: none; }
.olami-ee2-shell .ee2-page-head { flex-direction: column; align-items: stretch; gap: 12px; }
.olami-ee2-shell .ee2-page-title h1 { font-size: 20px; flex-wrap: wrap; }
.olami-ee2-shell .ee2-form-row,
.olami-ee2-shell .ee2-form-row.cols-3 { grid-template-columns: 1fr; gap: 12px; }
.olami-ee2-shell .ee2-dt-pair { grid-template-columns: 1.4fr 1fr; }
.olami-ee2-shell .ee2-type-cards { grid-template-columns: 1fr; }
.olami-ee2-shell .ee2-reward-boxes { grid-template-columns: 1fr; }
.olami-ee2-shell .ee2-day-grid { grid-template-columns: repeat(3, 1fr); }
.olami-ee2-shell .ee2-hero-grid { grid-template-columns: repeat(4, 1fr); }
.olami-ee2-shell .ee2-card-head { padding: 14px 16px 10px; flex-direction: column; gap: 6px; align-items: flex-start; }
.olami-ee2-shell .ee2-card-body { padding: 14px 16px 18px; }
.olami-ee2-shell .ee2-sub-divider { margin: 14px -16px; }
.olami-ee2-shell .ee2-option-row { grid-template-columns: 18px 1fr 1fr; grid-template-areas: "drag name name" ". addr addr" ". staff staff" ". time limit" ". waitlist active" ". del del"; gap: 6px; }
.olami-ee2-shell .ee2-option-row .drag { grid-area: drag; }
.olami-ee2-shell .ee2-option-row .o-name { grid-area: name; }
.olami-ee2-shell .ee2-option-row .o-addr { grid-area: addr; }
.olami-ee2-shell .ee2-option-row .o-staff { grid-area: staff; }
.olami-ee2-shell .ee2-option-row .o-time { grid-area: time; }
.olami-ee2-shell .ee2-option-row .o-limit { grid-area: limit; }
.olami-ee2-shell .ee2-option-row .o-wait { grid-area: waitlist; }
.olami-ee2-shell .ee2-option-row .o-active { grid-area: active; }
.olami-ee2-shell .ee2-option-row .o-del { grid-area: del; justify-self: end; }
}
.olami-ee2-shell .ee2-budget-head,
.olami-ee2-shell .ee2-budget-row {
display: grid;
grid-template-columns: 2fr 1.3fr 70px 110px 90px 110px 32px;
gap: 8px;
align-items: center;
}
.olami-ee2-shell .ee2-budget-head {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
color: var(--muted, #94a3b8); padding: 0 2px 6px;
}
.olami-ee2-shell .ee2-budget-row { margin-bottom: 8px; }
.olami-ee2-shell .ee2-budget-row .ee2-input { margin: 0; }
.olami-ee2-shell .ee2-budget-est { font-weight: 700; text-align: right; padding-right: 4px; color: var(--text, #1e293b); }
.olami-ee2-shell .ee2-budget-del {
border: none; background: none; color: var(--muted, #94a3b8); cursor: pointer; font-size: 15px;
width: 28px; height: 28px; border-radius: 7px;
}
.olami-ee2-shell .ee2-budget-del:hover { background: #fee2e2; color: #dc2626; }
.olami-ee2-shell .ee2-budget-totals {
display: flex; gap: 28px; justify-content: flex-end; margin-top: 14px;
padding-top: 12px; border-top: 1px dashed var(--border, #e2e8f0);
}
.olami-ee2-shell .ee2-budget-totals .lbl { color: var(--muted, #94a3b8); font-size: 12px; font-weight: 600; margin-right: 8px; }
.olami-ee2-shell .ee2-budget-totals .val { font-weight: 800; font-size: 16px; color: var(--text, #1e293b); }
@media (max-width: 900px) {
.olami-ee2-shell .ee2-budget-head { display: none; }
.olami-ee2-shell .ee2-budget-row { grid-template-columns: 1fr 1fr; }
.olami-ee2-shell .ee2-budget-est { text-align: left; }
}
.olami-ee2-shell .ee2-adv-head { cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.olami-ee2-shell .ee2-adv-chev { color: var(--text-muted, #9ca3af); transition: transform 0.15s ease; flex-shrink: 0; }
.olami-ee2-shell .ee2-adv-chev.is-open { transform: rotate(90deg); }
.olami-ee2-shell .ee2-tag { cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.olami-ee2-shell .ee2-tag:hover { background: var(--ee2-accent, #6366f1); border-color: var(--ee2-accent, #6366f1); color: #fff; }
.olami-ee2-shell .ee2-aud { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-hover); padding: 16px; margin-top: 12px; }
.olami-ee2-shell .ee2-aud-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.olami-ee2-shell .ee2-aud-match { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.olami-ee2-shell .ee2-aud-match select { width: auto; min-width: 190px; }
.olami-ee2-shell .ee2-aud-count { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.olami-ee2-shell .ee2-aud-count strong { font-size: 14px; color: var(--text); font-weight: 700; }
.olami-ee2-shell .ee2-aud-count.is-zero { background: var(--danger-bg); border-color: #fecaca; color: var(--danger); }
.olami-ee2-shell .ee2-aud-count.is-zero strong { color: var(--danger); }
.olami-ee2-shell .ee2-aud-rules { display: flex; flex-direction: column; gap: 8px; }
.olami-ee2-shell .ee2-aud-rule { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.olami-ee2-shell .ee2-aud-rule-top { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 210px) 1fr; gap: 8px; align-items: center; }
.olami-ee2-shell .ee2-aud-del { justify-self: end; }
.olami-ee2-shell .ee2-aud-rule .ee2-input { padding: 7px 10px; font-size: 13px; }
.olami-ee2-shell .ee2-aud-rule-val { margin-top: 9px; }
.olami-ee2-shell .ee2-aud-num { display: flex; align-items: center; gap: 8px; }
.olami-ee2-shell .ee2-aud-num .ee2-input { max-width: 110px; }
.olami-ee2-shell .ee2-aud-num .unit { font-size: 12px; color: var(--text-secondary); }
.olami-ee2-shell .ee2-aud-hint { font-size: 11.5px; color: var(--text-secondary); margin-top: 8px; line-height: 1.45; }
.olami-ee2-shell .ee2-aud-join { display: flex; align-items: center; gap: 8px; color: var(--text-faint); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0 2px; }
.olami-ee2-shell .ee2-aud-join::before, .olami-ee2-shell .ee2-aud-join::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.olami-ee2-shell .ee2-aud-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.olami-ee2-shell .ee2-aud-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 12.5px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: all 0.12s; user-select: none; }
.olami-ee2-shell .ee2-aud-chip:hover { border-color: var(--text-faint); color: var(--text); }
.olami-ee2-shell .ee2-aud-chip input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.olami-ee2-shell .ee2-aud-chip.is-on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.olami-ee2-shell .ee2-aud-chip.is-on::before { content: "✓"; font-size: 11px; font-weight: 800; line-height: 1; }
.olami-ee2-shell .ee2-aud-results { margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.olami-ee2-shell .ee2-aud-result { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; background: transparent; border: 0; border-bottom: 1px solid var(--border-soft); font: inherit; font-size: 13px; color: var(--text); cursor: pointer; text-align: left; transition: background 0.1s; }
.olami-ee2-shell .ee2-aud-result:last-child { border-bottom: 0; }
.olami-ee2-shell .ee2-aud-result:hover { background: var(--primary-soft); color: var(--primary); }
.olami-ee2-shell .ee2-aud-result .add { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); flex-shrink: 0; }
.olami-ee2-shell .ee2-aud-result:hover .add { color: var(--primary); }
.olami-ee2-shell .ee2-aud-people { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.olami-ee2-shell .ee2-aud-person { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px; border-radius: 999px; border: 1px solid var(--primary); background: var(--primary-soft); color: var(--primary); font-size: 12.5px; font-weight: 600; }
.olami-ee2-shell .ee2-aud-person button { border: 0; background: rgba(180,31,81,0.14); color: inherit; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 9px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; }
.olami-ee2-shell .ee2-aud-person button:hover { background: var(--primary); color: #fff; }
@media (max-width: 900px) {
.olami-ee2-shell .ee2-aud-rule-top { grid-template-columns: 1fr 1fr; }
.olami-ee2-shell .ee2-aud-rule-top .ee2-aud-del { grid-column: 2; justify-self: end; }
}
@media (max-width: 720px) {
.olami-ee2-shell .ee2-form-row, .olami-ee2-shell .ee2-form-row.cols-3, .olami-ee2-shell .ee2-type-cards,
.olami-ee2-shell .ee2-reward-boxes, .olami-ee2-shell .ee2-dt-pair { grid-template-columns: 1fr !important; }
.olami-ee2-shell .ee2-hero-grid { grid-template-columns: repeat(4, 1fr) !important; }
.olami-ee2-shell .ee2-day-grid { grid-template-columns: repeat(4, 1fr) !important; }
.olami-ee2-shell .ee2-option-row, .olami-ee2-shell .ee2-budget-row { grid-template-columns: 1fr 1fr !important; row-gap: 6px; }
}
.back-link {
display: inline-block;
font-size: 13px;
color: var(--recruiting-text-secondary);
text-decoration: none;
margin-bottom: 16px;
font-weight: 500;
transition: color 0.15s;
}
.back-link:hover { color: var(--recruiting-primary); }
.col-check { width: 36px; text-align: center; padding: 6px 8px !important; }
.col-notes { width: 1%; }
.empty-icon {
display: block;
font-size: 40px;
margin-bottom: 12px;
}
.bulk-bar {
background: var(--surface, #fff);
border: 1px solid var(--border-light, #e5e7eb);
border-left: 3px solid var(--recruiting-primary);
padding: 6px 12px;
border-radius: 8px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
animation: bulkSlideIn 0.15s ease;
}
@keyframes bulkSlideIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.bulk-count {
font-size: 11px;
font-weight: 700;
color: var(--recruiting-primary);
background: color-mix(in srgb, var(--recruiting-primary) 10%, transparent);
padding: 2px 8px;
border-radius: 10px;
white-space: nowrap;
flex-shrink: 0;
}
.bulk-sep {
width: 1px;
height: 18px;
background: var(--border-light, #e0e0e0);
flex-shrink: 0;
}
.bulk-bar select {
padding: 4px 8px;
border: 1px solid var(--border-light, #ddd);
border-radius: 6px;
background: var(--surface, #fff);
color: var(--text, #333);
font-size: 12px;
min-width: 120px;
flex: 1;
max-width: 220px;
}
.bulk-btn {
padding: 4px 12px;
border: 1px solid var(--border-light, #ddd);
border-radius: 6px;
background: var(--surface, #fff);
color: var(--text, #333);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
white-space: nowrap;
flex-shrink: 0;
}
.bulk-btn:hover {
background: var(--recruiting-primary);
color: #fff;
border-color: var(--recruiting-primary);
}
@media (max-width: 768px) {
.bulk-bar { flex-wrap: wrap; gap: 6px; padding: 6px 10px; }
.bulk-bar select { min-width: 100px; max-width: none; flex: 1; }
.bulk-sep { display: none; }
}
.np-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.np-field > label {
font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
color: var(--text-secondary);
}
.np-form .np-field input[type=text], .np-form .np-field input[type=date],
.np-form .np-field input[type=number], .np-form .np-field input[type=url],
.np-form .np-field select, .np-form .np-field textarea {
width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; font-weight: 600;
padding: 9px 11px; border-radius: var(--radius); background: var(--surface);
border: 1px solid var(--border); color: var(--text);
}
.np-form .np-field textarea { min-height: 74px; resize: vertical; line-height: 1.55; }
.np-form .np-field input:focus, .np-form .np-field select:focus, .np-form .np-field textarea:focus {
outline: none; border-color: var(--primary);
}
.np-hint { font-size: 11px; font-weight: 600; color: var(--text-muted); line-height: 1.5; }
.np-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.np-richwrap { border: 1px solid var(--border-light); border-radius: 5px; background: var(--surface-active); overflow: hidden; }
.np-richbar { display: flex; gap: 2px; padding: 5px; border-bottom: 1px solid var(--border-light); background: var(--surface); flex-wrap: wrap; }
.np-richbtn { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 4px; border: none; background: transparent; color: var(--text); cursor: pointer; font-family: inherit; }
.np-richbtn:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.np-richbox { min-height: 70px; padding: 8px 10px; font-size: 13px; line-height: 1.5; color: var(--text); outline: none; }
.np-richbox:focus { background: var(--surface); }
.olami-settings .np-richbox { min-height: 260px; }
.np-richbox img { max-width: 100%; height: auto; }
:root {
--recruiting-primary: var(--primary);
--recruiting-primary-dark: var(--primary-hover);
--recruiting-primary-light: var(--primary-soft);
--recruiting-accent: var(--primary);
--recruiting-bg: var(--bg);
--recruiting-card: var(--surface);
--recruiting-text: var(--text);
--recruiting-text-secondary: var(--text-secondary);
--recruiting-border: var(--border);
--recruiting-border-light: var(--border-light);
--recruiting-shadow: var(--shadow);
--recruiting-shadow-lg: var(--shadow-lg);
--recruiting-shadow-xl: var(--shadow-xl);
--recruiting-radius: var(--radius-lg, 16px);
--recruiting-radius-lg: var(--radius-xl, 24px);
--recruiting-transition: var(--transition-slow, all 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}
.olami-app .recruiting-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
background: var(--recruiting-card) !important;
color: var(--recruiting-text) !important;
border: 1.5px solid var(--recruiting-border) !important;
box-shadow: none !important;
height: auto !important;
line-height: normal !important;
transform: none !important;
padding: 10px 20px !important;
font-size: 13px !important;
font-weight: 600 !important;
border-radius: 12px !important;
}
.olami-app .recruiting-btn-primary {
background: linear-gradient(135deg, var(--recruiting-primary) 0%, var(--recruiting-primary-dark) 100%) !important;
border: none !important;
box-shadow: 0 4px 14px color-mix(in srgb, var(--recruiting-primary) 35%, transparent) !important;
color: #fff !important;
}
.olami-app .recruiting-btn-primary:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px color-mix(in srgb, var(--recruiting-primary) 45%, transparent) !important;
}
.olami-app .recruiting-btn-secondary {
background: var(--recruiting-card) !important;
color: var(--recruiting-text) !important;
border: 1.5px solid var(--recruiting-border) !important;
}
.olami-app .recruiting-btn-secondary:hover {
background: var(--recruiting-bg) !important;
border-color: var(--recruiting-text-secondary) !important;
}
.olami-app .recruiting-btn-ghost {
background: transparent !important;
color: var(--recruiting-text-secondary) !important;
border: 1.5px solid var(--recruiting-border-light) !important;
}
.olami-app .recruiting-btn-ghost:hover {
background: var(--recruiting-border-light) !important;
color: var(--recruiting-text) !important;
border-color: var(--recruiting-border) !important;
}
.olami-app .recruiting-btn.btn-sm {
padding: 7px 16px !important;
font-size: 12px !important;
border-radius: 8px !important;
}
.olami-app .recruiting-wrap .action-btn {
background: none !important;
border: none !important;
padding: 6px !important;
font-size: 18px !important;
color: var(--recruiting-text-secondary) !important;
border-radius: 4px !important;
height: auto !important;
line-height: 1 !important;
min-width: 0 !important;
}
.olami-app .recruiting-wrap .action-btn:hover {
background: var(--recruiting-border-light) !important;
color: var(--recruiting-text) !important;
}
.recruiting-wrap {
margin: 0;
font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif), var(--emoji);
color: var(--recruiting-text);
-webkit-font-smoothing: antialiased;
}
.recruiting-wrap * { box-sizing: border-box; }
.recruiting-content { max-width: var(--shell-max-width, 1800px); }
.recruiting-header {
background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
border-radius: var(--recruiting-radius-lg);
padding: 32px 40px 0;
margin-bottom: 24px;
border: 1px solid var(--recruiting-border-light);
}
.recruiting-header-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
gap: 16px;
}
.recruiting-title-section h1 {
font-size: 28px;
font-weight: 700;
margin: 0 0 4px;
color: var(--recruiting-text);
}
.recruiting-subtitle {
font-size: 14px;
color: var(--recruiting-text-secondary);
margin: 0;
}
.recruiting-header-actions {
display: flex;
gap: 10px;
flex-shrink: 0;
}
.recruiting-nav {
display: flex;
gap: 0;
border-bottom: 3px solid var(--recruiting-border-light);
margin: 0 -40px;
padding: 0 40px;
}
.recruiting-nav-link {
display: flex;
align-items: center;
gap: 6px;
padding: 12px 20px;
font-size: 13.5px;
font-weight: 600;
color: var(--recruiting-text-secondary);
text-decoration: none;
border-bottom: 3px solid transparent;
margin-bottom: -3px;
transition: var(--recruiting-transition);
}
.recruiting-nav-link:hover { color: var(--recruiting-primary); }
.recruiting-nav-link.active {
color: var(--recruiting-primary);
border-bottom-color: var(--recruiting-primary);
}
.nav-icon { font-size: 16px; }
.recruiting-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
font-size: 14px;
font-weight: 600;
border-radius: 12px;
border: none;
cursor: pointer;
transition: var(--recruiting-transition);
text-decoration: none;
white-space: nowrap;
}
.recruiting-btn-primary {
background: linear-gradient(135deg, var(--recruiting-primary) 0%, var(--recruiting-primary-dark) 100%);
color: var(--text-inverse);
box-shadow: 0 4px 14px color-mix(in srgb, var(--recruiting-primary) 35%, transparent);
}
.recruiting-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px color-mix(in srgb, var(--recruiting-primary) 45%, transparent);
}
.recruiting-btn-secondary {
background: var(--recruiting-card);
color: var(--recruiting-text);
border: 1.5px solid var(--recruiting-border);
}
.recruiting-btn-secondary:hover {
background: var(--recruiting-bg);
border-color: var(--recruiting-text-secondary);
}
.recruiting-btn-ghost {
background: transparent;
color: var(--recruiting-text-secondary);
border: 1.5px solid var(--recruiting-border-light);
}
.recruiting-btn-ghost:hover {
background: var(--recruiting-border-light);
color: var(--recruiting-text);
border-color: var(--recruiting-border);
}
.recruiting-btn.btn-sm {
padding: 7px 16px;
font-size: 12px;
border-radius: 8px;
}
.recruiting-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
.btn-icon { font-size: 16px; line-height: 1; }
.recruiting-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 28px;
}
.recruiting-stat-card {
background: var(--recruiting-card);
border: 1px solid var(--recruiting-border-light);
border-radius: var(--recruiting-radius);
padding: 24px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: var(--recruiting-shadow);
transition: var(--recruiting-transition);
}
.recruiting-stat-card:hover {
transform: translateY(-4px);
box-shadow: var(--recruiting-shadow-lg);
}
.recruiting-stat-card .stat-icon {
font-size: 28px;
flex-shrink: 0;
}
.recruiting-stat-card .stat-content {
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
}
.recruiting-stat-card .stat-number {
display: block;
font-size: 28px;
font-weight: 700;
color: var(--recruiting-text);
line-height: 1.1;
}
.recruiting-stat-card .stat-label {
display: block;
font-size: 12px;
color: var(--recruiting-text-secondary);
font-weight: 500;
margin-top: 2px;
text-transform: uppercase;
letter-spacing: 0.3px;
line-height: 1.3;
}
.recruiting-stat-card.highlight {
border-color: var(--recruiting-primary);
background: linear-gradient(135deg, var(--recruiting-card), var(--recruiting-primary-light));
}
.recruiting-dashboard-grid {
display: grid;
grid-template-columns: 1fr 340px;
gap: 24px;
}
.recruiting-section {
margin-bottom: 24px;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.section-title {
font-size: 16px;
font-weight: 700;
color: var(--recruiting-text);
margin: 0 0 16px;
}
.section-header .section-title { margin: 0; }
.recruiting-card-section {
background: var(--recruiting-card);
border: 1px solid var(--recruiting-border-light);
border-radius: var(--recruiting-radius);
padding: 20px;
box-shadow: var(--recruiting-shadow);
}
.recruiting-card-section .section-title { margin-bottom: 12px; }
.recruiting-sidebar-col {
display: flex;
flex-direction: column;
gap: 20px;
}
.campaign-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.campaign-card {
background: var(--recruiting-card);
border: 1px solid var(--recruiting-border-light);
border-radius: var(--recruiting-radius);
padding: 20px;
text-decoration: none;
color: inherit;
transition: var(--recruiting-transition);
display: block;
box-shadow: var(--recruiting-shadow);
}
.campaign-card:hover {
border-color: var(--recruiting-primary);
box-shadow: var(--recruiting-shadow-lg);
transform: translateY(-4px);
}
.campaign-card-head h3 {
font-size: 15px;
font-weight: 700;
margin: 0 0 6px;
color: var(--recruiting-text);
}
.campaign-event-tag {
display: inline-block;
font-size: 11px;
color: var(--recruiting-text-secondary);
background: var(--recruiting-border-light);
padding: 2px 8px;
border-radius: 6px;
margin-bottom: 12px;
}
.campaign-progress-wrap {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.campaign-progress-bar {
flex: 1;
height: 6px;
background: var(--recruiting-border-light);
border-radius: 3px;
overflow: hidden;
}
.campaign-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--recruiting-primary), var(--recruiting-accent));
border-radius: 3px;
transition: width 0.3s ease;
}
.campaign-progress-text {
font-size: 12px;
font-weight: 600;
color: var(--recruiting-text-secondary);
white-space: nowrap;
}
.campaign-card-foot {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: var(--recruiting-text-secondary);
}
.campaign-deadline.urgent {
color: var(--danger);
font-weight: 600;
}
.recruiting-feed { display: flex; flex-direction: column; gap: 2px; }
.feed-item {
padding: 8px 4px;
border-bottom: 1px solid var(--recruiting-border-light);
}
.feed-item:last-child { border-bottom: none; }
.feed-text {
font-size: 12px;
color: var(--recruiting-text);
line-height: 1.5;
}
.feed-text strong { font-weight: 600; }
.feed-time {
display: block;
font-size: 11px;
color: var(--recruiting-text-secondary);
margin-top: 2px;
}
.recruiting-table-wrap {
overflow-x: auto;
border: 1px solid var(--recruiting-border-light);
border-radius: 12px;
background: var(--recruiting-card);
box-shadow: var(--recruiting-shadow);
}
.recruiting-table {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
}
.recruiting-table thead th {
background: var(--surface-hover, var(--recruiting-border-light));
padding: 8px 12px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--recruiting-text-secondary);
text-align: left;
border-bottom: 1px solid var(--recruiting-border);
white-space: nowrap;
}
.recruiting-table tbody td {
padding: 7px 12px;
border-bottom: 1px solid var(--recruiting-border-light);
color: var(--recruiting-text);
vertical-align: middle;
font-size: 12.5px;
}
.recruiting-table tbody tr:last-child td { border-bottom: none; }
.recruiting-table tbody tr:hover {
background: var(--surface-hover, color-mix(in srgb, var(--recruiting-primary) 4%, transparent));
}
.recruiting-table tbody tr:nth-child(even) {
background: rgba(0,0,0,0.015);
}
.recruiting-table tbody tr:nth-child(even):hover {
background: var(--surface-hover, color-mix(in srgb, var(--recruiting-primary) 4%, transparent));
}
.col-actions { white-space: nowrap; width: 1%; padding: 4px 6px !important; }
.recruiting-table .col-notes { width: 100%; max-width: 0; }
.rc-v2 .recruiting-table .col-notes { min-width: 100px; }
.recruiting-table th.col-notes { white-space: nowrap; }
.recruiting-wrap input[type="checkbox"] {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
border: 1.5px solid var(--recruiting-border);
border-radius: 4px;
background: var(--surface);
accent-color: var(--primary);
cursor: pointer;
-webkit-appearance: auto;
appearance: auto;
margin: 0;
vertical-align: middle;
}
.recruiting-wrap input[type="checkbox"]:checked {
background: var(--primary);
border-color: var(--primary);
}
.recruiting-wrap input[type="radio"] {
width: 16px;
height: 16px;
accent-color: var(--primary);
cursor: pointer;
margin: 0;
}
.campaign-title-link {
font-weight: 600;
color: var(--recruiting-primary);
text-decoration: none;
}
.campaign-title-link:hover { text-decoration: underline; }
.mini-progress {
display: flex;
align-items: center;
gap: 8px;
}
.mini-progress-bar {
width: 80px;
height: 4px;
background: var(--recruiting-border-light);
border-radius: 2px;
overflow: hidden;
}
.mini-progress-fill {
height: 100%;
background: var(--recruiting-primary);
border-radius: 2px;
}
.mini-progress span {
font-size: 12px;
color: var(--recruiting-text-secondary);
white-space: nowrap;
}
.recruiting-wrap .text-muted { color: var(--recruiting-text-secondary); }
.empty-cell {
text-align: center;
padding: 40px 20px !important;
color: var(--recruiting-text-secondary);
}
.actions-cell {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: nowrap;
}
.recruiting-wrap .action-btn {
background: none;
border: none;
cursor: pointer;
padding: 6px;
font-size: 18px;
border-radius: 4px;
transition: background 0.1s;
line-height: 1;
}
.recruiting-wrap .action-btn:hover {
background: var(--recruiting-border-light);
}
.recruiting-wrap .status-badge,
.recruiting-wrap .stage-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
background: color-mix(in srgb, var(--badge-color) 15%, transparent);
color: var(--badge-color);
white-space: nowrap;
}
.stage-inline-select {
padding: 5px 10px;
border: 1.5px solid var(--recruiting-border-light);
border-radius: 8px;
font-size: 12px;
font-weight: 600;
background: var(--recruiting-card);
color: var(--recruiting-text);
cursor: pointer;
transition: border-color 0.15s;
}
.stage-inline-select:focus {
outline: none;
border-color: var(--recruiting-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--recruiting-primary) 10%, transparent);
}
.staff-inline-select {
padding: 5px 10px;
border: 1.5px solid var(--recruiting-border-light) !important;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
background: var(--recruiting-card) !important;
color: var(--recruiting-text);
cursor: pointer;
transition: border-color 0.15s;
box-shadow: none !important;
transform: none !important;
}
.staff-inline-select:focus {
outline: none;
border-color: var(--recruiting-primary) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--recruiting-primary) 10%, transparent) !important;
}
.custom-col-inline {
padding: 4px 8px;
border: 1.5px solid var(--recruiting-border-light);
border-radius: 6px;
font-size: 12px;
background: var(--recruiting-card);
color: var(--recruiting-text);
cursor: pointer;
transition: border-color 0.15s, outline 0.15s;
}
select.custom-col-inline {
font-weight: 600;
}
.custom-col-inline:focus {
outline: none;
border-color: var(--recruiting-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--recruiting-primary) 10%, transparent);
}
input[type="checkbox"].custom-col-inline {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--recruiting-primary);
}
.rc-student-name {
color: var(--recruiting-text);
text-decoration: none;
border-bottom: 1px dashed var(--recruiting-border-light);
transition: color 0.15s, border-color 0.15s;
cursor: pointer;
}
.rc-student-name:hover {
color: var(--recruiting-primary);
border-bottom-color: var(--recruiting-primary);
}
.stage-pill {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 20px;
background: color-mix(in srgb, var(--pill-color) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--pill-color) 30%, transparent);
cursor: default;
transition: all 0.15s;
}
.stage-pill-label {
font-size: 12px;
font-weight: 600;
color: var(--pill-color);
}
.stage-pill-active {
background: var(--pill-color) !important;
border-color: var(--pill-color) !important;
}
.stage-pill-active .stage-pill-label {
color: #fff !important;
}
.detail-header {
background: var(--recruiting-card);
border: 1px solid var(--recruiting-border-light);
border-radius: var(--recruiting-radius);
padding: 24px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
box-shadow: var(--recruiting-shadow);
}
.recruiting-table .note-preview {
display: block;
font-size: 12px;
color: var(--recruiting-text-secondary);
cursor: help;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 90px;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid var(--recruiting-border-light);
}
.modal-header h3 {
font-size: 17px;
font-weight: 700;
margin: 0;
}
.modal-close,
.olami-app .modal-close {
background: none !important;
border: none !important;
font-size: 22px !important;
cursor: pointer;
color: var(--recruiting-text-secondary) !important;
padding: 4px 8px !important;
border-radius: var(--radius-sm, 6px) !important;
transition: background 0.1s;
height: auto !important;
line-height: 1 !important;
box-shadow: none !important;
}
.modal-close:hover,
.olami-app .modal-close:hover {
background: var(--recruiting-border-light) !important;
}
.modal-body { padding: 24px; }
.modal-footer {
padding: 16px 24px;
border-top: 1px solid var(--recruiting-border-light);
display: flex;
justify-content: flex-end;
gap: 10px;
}
.form-group { margin-bottom: 16px; }
.form-group label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--recruiting-text-secondary);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.form-row { display: flex; gap: 16px; }
.form-group.half { flex: 1; }
.filter-row {
display: flex;
gap: 12px;
align-items: flex-end;
flex-wrap: wrap;
margin-bottom: 12px;
}
.filter-row:last-child { margin-bottom: 0; }
.filter-row .form-group {
flex: 1;
min-width: 120px;
margin-bottom: 0;
}
.assignment-group { margin-bottom: 28px; }
.assignment-campaign-title {
font-size: 16px;
font-weight: 700;
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 12px;
}
.assignment-deadline {
font-size: 12px;
font-weight: 500;
color: var(--recruiting-text-secondary);
background: var(--recruiting-border-light);
padding: 2px 10px;
border-radius: 20px;
}
.assignment-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 14px;
}
.assignment-card {
background: var(--recruiting-card);
border: 1px solid var(--recruiting-border-light);
border-radius: var(--recruiting-radius);
padding: 16px;
transition: var(--recruiting-transition);
box-shadow: var(--recruiting-shadow);
}
.assignment-card:hover {
border-color: var(--recruiting-primary);
box-shadow: var(--recruiting-shadow-lg);
transform: translateY(-2px);
}
.assignment-card-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.assignment-name {
font-size: 14px;
font-weight: 700;
color: var(--recruiting-text);
}
.assignment-card-meta {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 12px;
color: var(--recruiting-text-secondary);
margin-bottom: 8px;
}
.assignment-notes-preview {
font-size: 12px;
color: var(--recruiting-text-secondary);
background: var(--surface-hover, var(--recruiting-border-light));
padding: 8px 10px;
border-radius: 8px;
margin-bottom: 10px;
line-height: 1.4;
}
.assignment-card-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.empty-state {
text-align: center;
padding: 48px 20px;
color: var(--recruiting-text-secondary);
}
.empty-state.small { padding: 20px 10px; }
.empty-state p {
font-size: 14px;
margin: 0;
line-height: 1.5;
}
@media (max-width: 960px) {
.recruiting-stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.recruiting-dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.recruiting-header { padding: 20px 16px 0; }
.recruiting-header-top { flex-direction: column; }
.recruiting-title-section h1 { font-size: 22px; }
.recruiting-nav {
margin: 0 -16px;
padding: 0 16px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.recruiting-nav::-webkit-scrollbar { display: none; }
.recruiting-nav-link { padding: 12px 16px; font-size: 13px; white-space: nowrap; }
.recruiting-stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 20px;
}
.recruiting-stat-card {
padding: 14px 12px;
gap: 10px;
overflow: hidden;
}
.recruiting-stat-card .stat-icon {
width: 40px;
height: 40px;
min-width: 40px;
border-radius: 10px;
font-size: 18px;
}
.recruiting-stat-card .stat-number {
font-size: 22px;
}
.recruiting-stat-card .stat-label {
font-size: 10px;
line-height: 1.3;
word-break: break-word;
}
.recruiting-stat-card .stat-content {
min-width: 0;
overflow: hidden;
}
.recruiting-stat-card:hover {
transform: none;
}
.campaign-cards-grid { grid-template-columns: 1fr; }
.detail-header { flex-direction: column; align-items: stretch; gap: 16px; padding: 16px; overflow: hidden; }
.filter-row { flex-direction: column; }
.form-row { flex-direction: column; }
.assignment-cards { grid-template-columns: 1fr; }
.recruiting-table-wrap { font-size: 11px; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.recruiting-table thead th,
.recruiting-table tbody td { padding: 5px 6px; }
.recruiting-table .col-email,
.recruiting-table .col-contact { display: none; }
.actions-cell { gap: 4px; }
.olami-app .recruiting-wrap .actions-cell .action-btn { padding: 4px !important; font-size: 16px !important; }
.rc-wa-btn svg { width: 16px !important; height: 16px !important; }
.stage-pill { padding: 6px 12px; }
.stage-pill-label { font-size: 11px; }
.section-title { font-size: 15px; }
.campaign-card { padding: 16px; }
.campaign-card-head h3 { font-size: 14px; }
.recruiting-card-section { padding: 14px; }
.feed-item { padding: 6px 2px; }
.rc-panel { padding: 14px; }
.rc-panel-header { flex-direction: column; align-items: flex-start; gap: 8px; }
}
.rc-panel {
background: var(--recruiting-card);
border: 1px solid var(--recruiting-border-light);
border-radius: var(--recruiting-radius);
padding: 20px;
margin-bottom: 16px;
box-shadow: var(--recruiting-shadow);
animation: panelSlideIn 0.2s ease;
}
@keyframes panelSlideIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.rc-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.rc-panel-title {
font-size: 16px;
font-weight: 700;
color: var(--recruiting-text);
margin: 0;
}
.ambassador-empty {
text-align: center;
padding: 24px 10px;
color: var(--recruiting-text-secondary);
font-size: 13px;
}
@media (max-width: 480px) {
.recruiting-header { padding: 16px 12px 0; }
.recruiting-nav { margin: 0 -12px; padding: 0 12px; }
.recruiting-stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.recruiting-stat-card {
padding: 12px 10px;
gap: 8px;
}
.recruiting-stat-card .stat-icon {
width: 34px;
height: 34px;
min-width: 34px;
border-radius: 8px;
font-size: 16px;
}
.recruiting-stat-card .stat-number {
font-size: 20px;
}
.recruiting-stat-card .stat-label {
font-size: 9px;
}
.recruiting-nav-link { padding: 10px 12px; font-size: 12px; }
.recruiting-nav-link .nav-icon { display: none; }
.stage-pill-label { display: none; }
.campaign-card-head h3 { font-size: 13px; }
}
.olami-app .recruiting-wrap .rc-wa-btn {
color: #25D366 !important;
padding: 5px !important;
border: none !important;
background: none !important;
cursor: pointer;
transition: opacity 0.2s;
}
.olami-app .recruiting-wrap .rc-wa-btn:hover { opacity: 0.7; }
.olami-app .recruiting-wrap .rc-wa-btn.wa-sent { color: #128C7E !important; }
.rc-wa-btn svg { width: 19px; height: 19px; vertical-align: middle; }
.olami-app .recruiting-wrap .rc-wa-check {
font-size: 16px !important;
padding: 4px !important;
border: none !important;
background: none !important;
cursor: pointer;
opacity: 0.4;
transition: opacity 0.2s;
}
.olami-app .recruiting-wrap .rc-wa-check:hover { opacity: 1; }
.olami-app .recruiting-wrap .rc-wa-check.wa-sent { opacity: 1; }
.wa-queue-bar {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: #fff;
padding: 10px 16px;
border-radius: 8px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
}
.wa-queue-bar .wa-queue-icon { font-size: 20px; }
.wa-queue-bar .wa-queue-status { flex: 1; }
.wa-queue-bar .bulk-btn {
font-size: 12px !important;
padding: 5px 12px !important;
border-radius: 4px !important;
}
@keyframes rcFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.rc-phase-tabs {
display: flex;
gap: 4px;
padding: 6px 0 10px;
border-bottom: 1px solid var(--recruiting-border-light);
margin-bottom: 8px;
flex-wrap: wrap;
}
.rc-phase-tab {
padding: 6px 16px;
border: 1px solid var(--recruiting-border);
border-radius: 8px;
background: var(--recruiting-card);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
color: var(--recruiting-text-secondary);
}
.rc-phase-tab:hover {
border-color: var(--phase-color, var(--recruiting-primary));
color: var(--phase-color, var(--recruiting-primary));
background: color-mix(in srgb, var(--phase-color, var(--recruiting-primary)) 6%, transparent);
}
.rc-phase-tab.active {
border-color: var(--phase-color, var(--recruiting-primary));
background: color-mix(in srgb, var(--phase-color, var(--recruiting-primary)) 12%, transparent);
color: var(--phase-color, var(--recruiting-primary));
font-weight: 600;
}
.rc-phase-tab-count {
font-size: 11px;
font-weight: 400;
opacity: 0.7;
}
.rc-phase-tab.active .rc-phase-tab-count {
opacity: 0.9;
}
.rc-phase-badge {
display: inline-block;
font-size: 9px;
font-weight: 600;
padding: 1px 6px;
border-radius: 4px;
margin-left: 6px;
vertical-align: middle;
letter-spacing: 0.3px;
text-transform: uppercase;
line-height: 1.4;
}
.rc-phase-focused .rc-phase-group-header {
text-align: center;
}
.rc-phase-header-row th {
padding: 6px 8px !important;
}
.rc-phase-group-header {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.5px;
text-transform: uppercase;
text-align: center !important;
padding: 5px 8px !important;
white-space: nowrap;
}
.rc-note-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 15px;
height: 15px;
background: var(--recruiting-primary, #B41F51);
color: #fff;
font-size: 9px;
font-weight: 700;
line-height: 15px;
text-align: center;
border-radius: 50%;
pointer-events: none;
}
.action-btn.has-notes { position: relative; }
td.col-custom[data-phase] {
padding: 4px 6px !important;
text-align: center;
}
td.col-custom[data-phase] select.custom-col-inline {
font-size: 11px;
padding: 3px 4px;
min-width: 70px;
}
@media (max-width: 768px) {
.rc-phase-tabs {
gap: 3px;
}
.rc-phase-tab {
padding: 5px 10px;
font-size: 12px;
}
}
@media (max-width: 820px) { .recruiting-dashboard-grid { grid-template-columns: 1fr !important; } }
.rc-v2 {
--v2-surface: #ffffff;
--v2-surface-soft: #fafbfc;
--v2-bg: #f7f8fa;
--v2-border: var(--border-light);
--v2-border-soft: #f1f2f4;
--v2-text: #111827;
--v2-text-muted: #6b7280;
--v2-text-faint: #9ca3af;
--v2-primary: var(--primary, #e21b4d);
--v2-primary-50: color-mix(in srgb, var(--primary, #e21b4d) 6%, #fff);
--v2-primary-100: color-mix(in srgb, var(--primary, #e21b4d) 14%, #fff);
--v2-primary-700: color-mix(in srgb, var(--primary, #e21b4d) 78%, #000);
--v2-danger: #dc2626;
--v2-warn: #d97706;
--v2-radius: 10px;
--v2-radius-sm: 8px;
--v2-shadow-sm: 0 1px 2px rgba(16,24,40,0.04);
--v2-shadow: 0 2px 8px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
}
.rc-v2 {
color: var(--v2-text);
font-size: 14px;
line-height: 1.5;
}
.rc-v2 .back-link {
display: inline-block;
font-size: 13px;
color: var(--v2-text-muted);
font-weight: 500;
padding: 4px 8px 4px 4px;
border-radius: 6px;
margin-bottom: 14px;
text-decoration: none;
transition: background 0.12s, color 0.12s;
}
.rc-v2 .back-link:hover {
color: var(--v2-primary);
background: var(--v2-primary-50);
}
.rc-v2 .rc-v2-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
font-size: 13px;
font-weight: 600;
border: 1px solid var(--v2-border);
background: var(--v2-surface);
color: var(--v2-text);
border-radius: 8px;
cursor: pointer;
transition: all 0.12s;
white-space: nowrap;
line-height: 1;
}
.rc-v2 .rc-v2-btn:hover {
border-color: var(--v2-border);
box-shadow: var(--v2-shadow-sm);
}
.rc-v2 .rc-v2-btn--primary {
background: var(--v2-primary);
border-color: var(--v2-primary);
color: #fff;
}
.rc-v2 .rc-v2-btn--primary:hover {
background: var(--v2-primary-700);
border-color: var(--v2-primary-700);
color: #fff;
}
.rc-v2 .rc-v2-btn--ghost {
background: var(--v2-surface);
color: var(--v2-text);
}
.rc-v2 .rc-v2-btn--ghost:hover {
border-color: var(--v2-primary);
color: var(--v2-primary);
background: var(--v2-primary-50);
}
.rc-v2 .rc-v2-btn--icon {
padding: 7px 9px;
}
.rc-v2 .rc-v2-chip-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
font-size: 12px;
font-weight: 600;
background: transparent;
color: var(--v2-text-muted);
border: 1px solid transparent;
border-radius: 6px;
cursor: pointer;
transition: all 0.12s;
}
.rc-v2 .rc-v2-chip-btn:hover {
background: var(--v2-border-soft);
color: var(--v2-text);
}
.rc-v2 .rc-v2-header {
background: var(--v2-surface);
border: 1px solid var(--v2-border);
border-radius: var(--v2-radius);
padding: 20px 24px;
box-shadow: var(--v2-shadow-sm);
margin-bottom: 14px;
display: block;
}
.rc-v2 .rc-v2-header__top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
margin-bottom: 16px;
}
.rc-v2 .rc-v2-header__info { min-width: 0; flex: 1; }
.rc-v2 .rc-v2-header__title {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--v2-text);
margin: 0 0 6px;
}
.rc-v2 .rc-v2-header__meta {
display: flex;
flex-wrap: wrap;
gap: 14px;
font-size: 13px;
color: var(--v2-text-muted);
}
.rc-v2 .rc-v2-header__meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.rc-v2 .rc-v2-header__deadline--near { color: var(--v2-danger); font-weight: 600; }
.rc-v2 .rc-v2-header__deadline--late { color: var(--v2-danger); font-weight: 600; }
.rc-v2 .rc-v2-header__actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.rc-v2 .rc-v2-header__goal {
display: flex;
align-items: center;
gap: 14px;
padding-top: 4px;
}
.rc-v2 .rc-v2-goal__label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--v2-text-muted);
white-space: nowrap;
}
.rc-v2 .rc-v2-goal__track {
flex: 1;
height: 10px;
background: var(--v2-border-soft);
border-radius: 999px;
overflow: hidden;
min-width: 100px;
}
.rc-v2 .rc-v2-goal__fill {
height: 100%;
background: linear-gradient(90deg, #e11d74 0%, var(--v2-primary) 100%);
border-radius: 999px;
box-shadow: inset 0 1px 2px rgba(255,255,255,0.25);
transition: width 0.4s;
}
.rc-v2 .rc-v2-goal__count {
font-size: 14px;
font-weight: 500;
color: var(--v2-text-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.rc-v2 .rc-v2-goal__count strong { color: var(--v2-text); font-weight: 700; }
.rc-v2 .rc-v2-goal__sep { color: var(--v2-text-faint); margin: 0 2px; }
.rc-v2 .rc-v2-goal__pct { color: var(--v2-text-muted); font-weight: 500; }
.rc-v2 .rc-v2-stats {
display: flex;
gap: 8px;
padding: 10px;
background: var(--v2-surface);
border: 1px solid var(--v2-border);
border-radius: var(--v2-radius);
margin-bottom: 14px;
overflow-x: auto;
box-shadow: var(--v2-shadow-sm);
}
.rc-v2 .rc-v2-stat {
flex: 1;
min-width: 135px;
padding: 10px 14px;
border-radius: var(--v2-radius-sm);
background: var(--v2-border-soft);
border: 1px solid transparent;
cursor: pointer;
transition: all 0.12s;
display: flex;
flex-direction: column;
gap: 2px;
flex-shrink: 0;
}
.rc-v2 .rc-v2-stat:hover {
background: var(--v2-surface-soft);
border-color: var(--v2-border);
transform: translateY(-1px);
}
.rc-v2 .rc-v2-stat--primary {
background: var(--v2-primary-50);
border-color: var(--v2-primary-100);
}
.rc-v2 .rc-v2-stat--primary .rc-v2-stat__value {
color: var(--v2-primary-700);
}
.rc-v2 .rc-v2-stat--ineligible .rc-v2-stat__value { color: var(--v2-danger); }
.rc-v2 .rc-v2-stat--dismissed { opacity: 0.85; }
.rc-v2 .rc-v2-stat__label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--v2-text-muted);
line-height: 1.4;
}
.rc-v2 .rc-v2-stat__value {
font-size: 20px;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
color: var(--v2-text);
line-height: 1.1;
}
.rc-v2 .rc-v2-stat__value small {
font-size: 11px;
color: var(--v2-text-muted);
font-weight: 500;
margin-left: 4px;
}
.rc-v2 .rc-v2-stat.stage-pill-active,
.rc-v2 .rc-v2-stat.active {
background: var(--v2-primary-50);
border-color: var(--v2-primary);
box-shadow: 0 2px 8px rgba(180, 31, 81, 0.15);
}
.rc-v2 .rc-v2-stat.stage-pill-active .rc-v2-stat__label,
.rc-v2 .rc-v2-stat.active .rc-v2-stat__label { color: var(--v2-primary-700); }
.rc-v2 .rc-v2-stat.stage-pill-active .rc-v2-stat__value,
.rc-v2 .rc-v2-stat.active .rc-v2-stat__value { color: var(--v2-primary); }
.rc-v2 .rc-v2-stat--clickable { cursor: pointer; }
.rc-v2 .rc-v2-stat.stage-pill {
padding: 10px 14px;
border-radius: var(--v2-radius-sm);
background: var(--v2-border-soft);
border: 1px solid transparent;
color: inherit;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
min-width: 135px;
font-weight: 400;
}
.rc-v2 .rc-v2-phase-tabs {
display: inline-flex;
gap: 2px;
padding: 3px;
background: #f3f4f6;
border: 1px solid var(--v2-border);
border-radius: 9px;
margin: 0 0 12px;
width: fit-content;
max-width: 100%;
flex-wrap: wrap;
}
.rc-v2 .rc-v2-phase-tabs .rc-phase-tab {
padding: 7px 14px;
font-size: 13px;
font-weight: 600;
border: none;
background: transparent;
color: var(--v2-text-muted);
border-radius: 7px;
cursor: pointer;
transition: all 0.12s;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.rc-v2 .rc-v2-phase-tabs .rc-phase-tab:hover {
color: var(--v2-text);
background: rgba(255,255,255,0.5);
}
.rc-v2 .rc-v2-phase-tabs .rc-phase-tab.active {
background: var(--v2-surface);
color: var(--v2-text);
box-shadow: var(--v2-shadow-sm);
}
.rc-v2 .rc-v2-phase-tabs .rc-phase-tab[style*="--phase-color"]::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--phase-color);
flex-shrink: 0;
}
.rc-v2 .rc-v2-phase-tabs .rc-phase-tab-count {
padding: 1px 7px;
background: var(--v2-border-soft);
color: var(--v2-text-muted);
border-radius: 999px;
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.rc-v2 .rc-v2-phase-tabs .rc-phase-tab.active .rc-phase-tab-count {
background: var(--v2-primary-100);
color: var(--v2-primary-700);
}
.rc-v2 .rc-v2-table-card {
background: var(--v2-surface);
border: 1px solid var(--v2-border);
border-radius: var(--v2-radius);
box-shadow: var(--v2-shadow-sm);
overflow: hidden;
}
.rc-v2 .rc-v2-table-top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
border-bottom: 1px solid var(--v2-border);
font-size: 13px;
color: var(--v2-text-muted);
}
.rc-v2 .rc-v2-table-top__left strong { color: var(--v2-text); font-weight: 700; }
.rc-v2 .rc-v2-table-top__sep { margin: 0 8px; color: var(--v2-text-faint); }
.rc-v2 .rc-v2-table-top__right { display: flex; gap: 4px; align-items: center; }
.rc-v2 .rc-v2-table-wrap {
background: var(--v2-surface);
border: none;
border-radius: 0;
box-shadow: none;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.rc-v2 .rc-v2-table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
font-size: 13px;
}
.rc-v2 .rc-v2-table thead th {
background: var(--v2-surface-soft);
border-bottom: 1px solid var(--v2-border);
padding: 8px 10px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--v2-text-muted);
white-space: nowrap;
text-align: left;
position: sticky;
top: 0;
z-index: 2;
line-height: 1.2;
}
.rc-v2 .rc-v2-table tbody td {
padding: 7px 10px;
border-bottom: 1px solid var(--v2-border-soft);
vertical-align: middle;
line-height: 1.3;
}
.rc-v2 .rc-v2-table tbody tr:nth-child(even) { background: #fafbfc; }
.rc-v2 .rc-v2-table tbody tr:hover { background: var(--v2-primary-50); }
.rc-v2 .rc-v2-table tbody tr:last-child td { border-bottom: none; }
.rc-v2 .rc-v2-phase-header-row th.rc-phase-group-header {
padding: 6px 10px;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.08em;
text-align: center !important;
border-top: 1px solid var(--v2-border);
text-transform: uppercase;
top: 0;
z-index: 2;
line-height: 1.3;
}
.rc-v2 .rc-v2-phase-header-row th.col-check,
.rc-v2 .rc-v2-phase-header-row th.col-name,
.rc-v2 .rc-v2-phase-header-row th.col-staff,
.rc-v2 .rc-v2-phase-header-row th.col-stage,
.rc-v2 .rc-v2-phase-header-row th.col-actions {
vertical-align: bottom;
}
.rc-v2 .rc-v2-col-icon {
text-align: center !important;
padding: 6px 8px !important;
vertical-align: bottom;
min-width: 66px;
}
.rc-v2 .rc-v2-col-icon .rc-v2-col-ic { display: block; font-size: 14px; line-height: 1.1; }
.rc-v2 .rc-v2-col-icon .rc-v2-col-lbl {
display: block;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .3px;
color: var(--v2-text-muted);
margin: 3px auto 0;
max-width: 84px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rc-v2 .rc-v2-col-icon[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% - 4px);
left: 50%;
transform: translateX(-50%);
padding: 4px 8px;
background: #111827;
color: #fff;
font-size: 11px;
font-weight: 500;
border-radius: 5px;
white-space: nowrap;
z-index: 10;
letter-spacing: normal;
text-transform: none;
pointer-events: none;
}
.rc-v2 .rc-v2-col-icon { position: relative; }
.rc-v2 .rc-v2-table thead th.col-check,
.rc-v2 .rc-v2-table tbody td.col-check {
position: sticky;
left: 0;
background: var(--v2-surface);
z-index: 1;
box-sizing: border-box;
width: 36px;
min-width: 36px;
max-width: 36px;
padding-left: 4px;
padding-right: 4px;
}
.rc-v2 .rc-v2-table thead th.col-name,
.rc-v2 .rc-v2-table tbody td.col-name {
position: sticky;
left: 36px;
background: var(--v2-surface);
z-index: 1;
box-sizing: border-box;
min-width: 160px;
max-width: 220px;
}
.rc-v2 .rc-v2-table tbody tr:nth-child(even) td.col-check,
.rc-v2 .rc-v2-table tbody tr:nth-child(even) td.col-name { background: #fafbfc; }
.rc-v2 .rc-v2-table tbody tr:hover td.col-check,
.rc-v2 .rc-v2-table tbody tr:hover td.col-name { background: var(--v2-primary-50); }
.rc-v2 .rc-v2-table thead th.col-check,
.rc-v2 .rc-v2-table thead th.col-name { z-index: 3; background: var(--v2-surface-soft); }
.rc-v2 .rc-v2-table tbody tr[data-stage] td.col-check {
border-left: 3px solid transparent;
}
.rc-v2 .rc-phase-badge {
padding: 1px 7px;
font-size: 10px;
font-weight: 700;
border-radius: 999px;
letter-spacing: 0.03em;
text-transform: uppercase;
margin-left: 6px;
}
.rc-v2 .staff-inline-select,
.rc-v2 .stage-inline-select {
border: none;
background: transparent;
padding: 4px 8px;
font-size: 12px;
cursor: pointer;
color: var(--v2-text);
transition: all 0.12s;
}
.rc-v2 .staff-inline-select:hover,
.rc-v2 .stage-inline-select:hover { background: rgba(0,0,0,0.03); border-radius: 6px; }
.rc-v2 .custom-col-inline {
font-size: 12px;
}
@media (max-width: 900px) {
.rc-v2 .rc-v2-header__top { flex-direction: column; gap: 14px; }
.rc-v2 .rc-v2-header__actions { width: 100%; flex-wrap: wrap; }
.rc-v2 .rc-v2-header__title { font-size: 20px; }
.rc-v2 .rc-v2-header__goal { flex-wrap: wrap; }
.rc-v2 .rc-v2-goal__count { order: 2; width: 100%; text-align: right; }
.rc-v2 .rc-v2-stats { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rc-v2 .rc-v2-stat { min-width: 130px; }
}
@media (max-width: 720px) {
.rc-v2 .rc-v2-header { padding: 16px; }
.rc-v2 .rc-v2-header__title { font-size: 18px; }
.rc-v2 .rc-v2-header__meta { gap: 8px; font-size: 12px; }
.rc-v2 .rc-v2-header__meta-item { font-size: 12px; }
.rc-v2 .rc-v2-btn { padding: 7px 10px; font-size: 12px; }
.rc-v2 .rc-v2-stat { min-width: 120px; padding: 8px 12px; }
.rc-v2 .rc-v2-stat__value { font-size: 18px; }
.rc-v2 .rc-v2-stat__label { font-size: 9px; }
.rc-v2 .rc-v2-phase-tabs {
width: 100%;
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
}
.rc-v2 .rc-v2-phase-tabs .rc-phase-tab { flex-shrink: 0; padding: 6px 10px; font-size: 12px; }
.rc-v2 .rc-v2-table-top { padding: 8px 12px; font-size: 12px; }
.rc-v2 .rc-v2-table { font-size: 12px; }
.rc-v2 .rc-v2-table thead th,
.rc-v2 .rc-v2-table tbody td { padding: 8px 8px; }
.rc-v2 .rc-v2-table thead th { font-size: 10px; padding: 8px 6px; }
.rc-v2 .rc-v2-table thead th.col-name,
.rc-v2 .rc-v2-table tbody td.col-name { min-width: 150px; }
.rc-v2 .rc-v2-table thead th.col-check,
.rc-v2 .rc-v2-table tbody td.col-check { box-sizing: border-box; width: 34px; min-width: 34px; padding-left: 4px; padding-right: 4px; }
}
@media (max-width: 480px) {
.rc-v2 .rc-v2-header { padding: 14px; }
.rc-v2 .rc-v2-header__actions .rc-v2-btn { flex: 1; justify-content: center; }
.rc-v2 .rc-v2-stat { min-width: 110px; }
.rc-v2 .rc-v2-table thead th.col-name,
.rc-v2 .rc-v2-table tbody td.col-name { min-width: 130px; }
}
.rc-v2 .rc-v2-row-name {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
min-width: 0;
}
.rc-v2 .rc-v2-row-name .rc-student-name {
font-weight: 600;
color: var(--v2-text);
text-decoration: none;
font-size: 13px;
max-width: 196px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.3;
display: block;
border: none;
background: none;
padding: 0;
margin: 0;
text-align: left;
cursor: pointer;
}
.rc-v2 .rc-v2-row-name .rc-student-name:hover { color: var(--v2-primary); text-decoration: underline; }
.rc-v2 .rc-v2-row-name .rc-phase-badge {
margin-left: 0;
align-self: flex-start;
}
.rc-v2 .rc-v2-row-staff {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.rc-v2 .rc-v2-avatar {
width: 22px;
height: 22px;
border-radius: 50%;
color: #fff;
font-size: 9px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
line-height: 1;
letter-spacing: 0.02em;
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
@media (min-width: 761px) {
.rc-v2 .rc-v2-row-staff .staff-inline-select,
.rc-v2 .rc-v2-row-staff .staff-inline-select:focus {
border: 1px solid transparent !important;
background: transparent !important;
padding: 3px 6px !important;
font-size: 12px !important;
font-weight: 500 !important;
color: var(--v2-text) !important;
cursor: pointer;
max-width: 130px;
border-radius: 6px !important;
box-shadow: none !important;
}
.rc-v2 .rc-v2-row-staff .staff-inline-select:hover {
background: var(--v2-surface-soft) !important;
border-color: var(--v2-border) !important;
}
}
@media (min-width: 761px) {
.rc-v2 .rc-v2-table tbody td.col-stage {
padding: 5px 8px !important;
text-align: left;
}
}
.rc-v2 .rc-stage-pill {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 140px;
padding: 4px 9px;
border-radius: 14px;
background: color-mix(in srgb, var(--sc) 12%, var(--v2-surface));
border: 1px solid color-mix(in srgb, var(--sc) 35%, transparent);
cursor: pointer;
overflow: hidden;
transition: filter 0.12s;
}
.rc-v2 .rc-stage-pill:hover { filter: brightness(0.97); }
.rc-v2 .rc-stage-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc); flex-shrink: 0; }
.rc-v2 .rc-stage-pill-label { font-size: 11.5px; font-weight: 600; color: var(--v2-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-v2 .rc-stage-pill-caret { font-size: 9px; color: var(--v2-text-muted); flex-shrink: 0; }
.rc-v2 .rc-stage-pill-sel {
position: absolute; inset: 0; width: 100%; height: 100%;
margin: 0; padding: 0; border: none; background: transparent;
color: transparent; opacity: 0; appearance: none; -webkit-appearance: none;
cursor: pointer; font-size: 0;
}
.rc-v2 .rc-stage-pill-sel option { color: var(--v2-text); background: var(--v2-surface); font-size: 13px; }
.rc-v2 .rc-v2-stage-circle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: #94a3b8;
color: #fff;
font-weight: 800;
font-size: 11px;
line-height: 1;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
transition: filter 0.12s, transform 0.12s;
user-select: none;
}
.rc-v2 .rc-v2-stage-circle:hover { filter: brightness(1.08); transform: scale(1.06); }
.rc-v2 .rc-v2-stage-circle::before {
content: attr(data-letter);
pointer-events: none;
letter-spacing: 0.02em;
}
.rc-v2 .rc-v2-stage-circle .stage-inline-select {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
color: transparent !important;
opacity: 0 !important;
appearance: none !important;
-webkit-appearance: none !important;
cursor: pointer !important;
font-size: 0 !important;
}
.rc-v2 .rc-v2-stage-circle .stage-inline-select option {
color: var(--v2-text);
background: var(--v2-surface);
font-size: 13px;
opacity: 1 !important;
}
.rc-v2 .rc-v2-table tbody td.col-stage .stage-inline-select:hover { filter: brightness(1.08); }
.rc-v2 .rc-v2-table tbody td.col-stage .stage-inline-select option { color: var(--v2-text); background: var(--v2-surface); }
.rc-v2 .rc-v2-table .col-phase-wa .rc-wa-btn,
.rc-v2 .rc-v2-table .col-phase-wa .rc-wa-check {
border: none;
background: transparent;
color: #16a34a;
padding: 4px;
border-radius: 6px;
cursor: pointer;
transition: background 0.12s;
}
.rc-v2 .rc-v2-table .col-phase-wa .rc-wa-btn:hover,
.rc-v2 .rc-v2-table .col-phase-wa .rc-wa-check:hover { background: rgba(22, 163, 74, 0.1); }
.rc-v2 .rc-v2-table .col-phase-wa .rc-wa-btn.wa-sent,
.rc-v2 .rc-v2-table .col-phase-wa .rc-wa-check.wa-sent { color: #15803d; background: rgba(22, 163, 74, 0.15); }
.rc-v2 .rc-v2-table tbody td.col-actions .actions-cell {
display: flex;
gap: 5px;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
}
.rc-v2 .rc-v2-table tbody td.col-actions .action-btn {
border: none;
background: transparent;
color: var(--v2-text-muted);
width: 28px;
height: 28px;
padding: 0;
border-radius: 7px;
cursor: pointer;
font-size: 13px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
transition: all 0.12s;
}
.rc-v2 .rc-v2-table tbody td.col-actions .action-btn:hover {
background: var(--v2-border-soft);
color: var(--v2-text);
}
body.rc-v2-active .recruiting-header {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 16px !important;
padding: 8px 18px !important;
margin-bottom: 16px !important;
background: var(--v2-surface) !important;
border: 1px solid var(--v2-border) !important;
border-radius: 10px !important;
box-shadow: 0 1px 2px rgba(16,24,40,0.04) !important;
}
body.rc-v2-active .recruiting-header-top {
display: contents !important;
}
body.rc-v2-active .recruiting-title-section {
display: flex !important;
align-items: center !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
flex-shrink: 0 !important;
order: 0 !important;
}
body.rc-v2-active .recruiting-title-section h1 {
font-size: 0 !important;
line-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
body.rc-v2-active .recruiting-title-section h1::before {
content: "●";
width: 24px;
height: 24px;
background: var(--v2-primary);
color: #ffffff;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 800;
line-height: 1;
flex-shrink: 0;
}
body.rc-v2-active .recruiting-title-section h1::after {
content: "Recruiting Center";
font-size: 15px;
color: var(--v2-text);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
white-space: nowrap;
}
body.rc-v2-active .recruiting-subtitle { display: none !important; }
body.rc-v2-active .recruiting-nav.tabs {
display: flex !important;
gap: 2px !important;
border: none !important;
border-bottom: none !important;
padding: 0 0 0 16px !important;
margin-left: 0 !important;
border-left: 1px solid var(--v2-border) !important;
height: 22px !important;
align-items: center !important;
flex: 1 !important;
order: 1 !important;
flex-wrap: wrap !important;
}
body.rc-v2-active .recruiting-nav-link.tab {
padding: 5px 11px !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #6b7280 !important;
border: none !important;
border-radius: 7px !important;
text-decoration: none !important;
transition: all 0.12s !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
background: transparent !important;
line-height: 1.3 !important;
height: auto !important;
}
body.rc-v2-active .recruiting-nav-link.tab:hover {
background: #f3f4f6 !important;
color: var(--v2-text) !important;
}
body.rc-v2-active .recruiting-nav-link.tab.active {
background: var(--v2-primary-50) !important;
color: var(--v2-primary) !important;
}
body.rc-v2-active .recruiting-nav-link.tab .nav-icon {
opacity: 0.65;
font-size: 12px;
}
body.rc-v2-active .recruiting-nav-link.tab.active .nav-icon { opacity: 1; }
body.rc-v2-active .recruiting-header-actions {
margin-left: auto !important;
flex-shrink: 0 !important;
order: 2 !important;
display: flex !important;
gap: 8px !important;
}
body.rc-v2-active .olami-app .recruiting-header-actions .recruiting-btn-primary,
body.rc-v2-active .recruiting-header-actions .recruiting-btn-primary {
background: var(--v2-primary) !important;
background-image: none !important;
border: 1px solid var(--v2-primary) !important;
color: #ffffff !important;
padding: 7px 14px !important;
font-size: 13px !important;
font-weight: 600 !important;
border-radius: 8px !important;
box-shadow: none !important;
transform: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
line-height: 1 !important;
transition: background 0.12s, border-color 0.12s !important;
}
body.rc-v2-active .olami-app .recruiting-header-actions .recruiting-btn-primary:hover,
body.rc-v2-active .recruiting-header-actions .recruiting-btn-primary:hover {
background: #8a1741 !important;
background-image: none !important;
border-color: #8a1741 !important;
box-shadow: 0 2px 6px rgba(180,31,81,0.2) !important;
transform: none !important;
}
body.rc-v2-active .recruiting-header-actions .recruiting-btn .btn-icon {
font-weight: 700 !important;
font-size: 15px !important;
margin: 0 !important;
line-height: 1 !important;
}
@media (max-width: 720px) {
body.rc-v2-active .recruiting-header { padding: 8px 12px !important; gap: 8px !important; }
body.rc-v2-active .recruiting-nav.tabs {
border-left: none !important;
padding-left: 0 !important;
height: auto !important;
width: 100% !important;
order: 3 !important;
}
body.rc-v2-active .recruiting-header-actions { order: 2 !important; }
body.rc-v2-active .recruiting-nav-link.tab { padding: 5px 9px !important; font-size: 12px !important; }
}
.rc-v2 .rc-v2-table tbody td.col-custom { text-align: center; vertical-align: middle; }
.rc-v2 .rc-v2-table tbody td input[type="checkbox"] {
width: 14px;
height: 14px;
accent-color: var(--v2-primary);
cursor: pointer;
}
.rc-v2 .rc-v2-table .text-muted,
.rc-v2 .rc-v2-table tbody td:empty::before {
color: var(--v2-text-faint);
}
.rc-v2 input[type="checkbox"]:not(.rc-student-check) {
width: 14px !important;
height: 14px !important;
min-width: 14px !important;
min-height: 14px !important;
accent-color: var(--v2-primary);
}
@media (min-width: 761px) {
.rc-v2 .rc-v2-table .col-check {
padding: 4px 6px !important;
width: 32px !important;
}
}
@media (min-width: 761px) {
.rc-v2 .rc-v2-table .col-actions {
padding: 4px 8px !important;
width: 1% !important;
white-space: nowrap !important;
}
}
@media (min-width: 761px) {
.rc-v2 .rc-v2-table .col-staff {
padding: 4px 10px !important;
width: 1% !important;
white-space: nowrap !important;
max-width: 200px !important;
}
}
@media (min-width: 761px) {
.rc-v2 .rc-v2-table .col-credit,
.rc-v2 .rc-v2-table .col-channel {
padding: 4px 10px !important;
width: 1% !important;
white-space: nowrap !important;
max-width: 220px !important;
}
}
.rc-v2 .rc-v2-table .col-credit .rc-credit-select,
.rc-v2 .rc-v2-table .col-channel .rc-channel-select {
font-size: 11.5px;
opacity: .9;
max-width: 100%;
}
.rc-v2 .rc-v2-table .col-channel .rc-channel-select { width: 200px; }
@media (min-width: 761px) {
.rc-v2 .rc-v2-table .col-stage {
width: 1% !important;
white-space: nowrap !important;
max-width: 160px !important;
text-align: left !important;
}
}
@media (min-width: 761px) {
.rc-v2 .rc-v2-row-staff .staff-inline-select {
width: 150px !important;
max-width: 150px !important;
text-overflow: ellipsis;
overflow: hidden;
}
}
@media (min-width: 761px) {
.rc-v2 .rc-v2-table tbody td { line-height: 1.25 !important; padding: 5px 8px !important; }
.rc-v2 .rc-v2-table tbody td.col-name { padding: 5px 10px 5px 8px !important; }
.rc-v2 .rc-v2-table tbody td.col-stage { padding: 4px 8px !important; }
}
.rc-v2 .rc-v2-table thead th { padding: 6px 8px !important; }
.rc-v2 .rc-v2-table .col-phase-wa { padding: 4px 6px !important; }
.rc-v2 .rc-v2-table thead th,
.rc-v2 .rc-v2-table tbody td {
border: 0 !important;
border-bottom: 1px solid #f1f2f4 !important;
box-shadow: none !important;
outline: none !important;
}
.rc-v2 .rc-v2-table tbody tr:last-child td { border-bottom: 0 !important; }
.rc-v2 .rc-v2-table thead tr:last-child th { border-bottom: 1px solid var(--v2-border) !important; }
.rc-v2 .rc-v2-phase-header-row th[data-phase] { border-bottom-width: 2px !important; }
.rc-v2 .rc-v2-table tbody tr[data-stage] td.col-check {
border-left: 3px solid transparent !important;
border-bottom: 1px solid #f1f2f4 !important;
}
.rc-v2 .rc-v2-table td input[type="checkbox"] {
margin: 0;
box-shadow: none;
}
.rc-v2 .rc-v2-table-wrap { border: 0 !important; }
.rc-v2 .rc-v2-table thead th.rc-v2-th-sortable {
cursor: pointer;
user-select: none;
transition: background 0.12s, color 0.12s;
padding-right: 18px !important;
}
.rc-v2 .rc-v2-table thead th.rc-v2-th-sortable:hover {
color: var(--v2-primary) !important;
}
.rc-v2 .rc-v2-table thead th.rc-v2-th-sortable::after {
content: "↕";
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
font-size: 10px;
color: var(--v2-text-faint);
opacity: 0.55;
transition: opacity 0.12s, color 0.12s;
}
.rc-v2 .rc-v2-table thead th.rc-v2-th-sortable:hover::after { opacity: 1; }
.rc-v2 .rc-v2-table thead th.rc-v2-th-asc::after {
content: "▲";
color: var(--v2-primary);
opacity: 1;
}
.rc-v2 .rc-v2-table thead th.rc-v2-th-desc::after {
content: "▼";
color: var(--v2-primary);
opacity: 1;
}
.rc-v2 .rc-v2-table thead th.rc-v2-th-asc,
.rc-v2 .rc-v2-table thead th.rc-v2-th-desc {
color: var(--v2-primary) !important;
}
.rc-v2 .rc-v2-phase-header-row th.rc-v2-th-sortable:hover { filter: brightness(0.9); }
.rc-v2 .rc-v2-phase-header-row th.rc-v2-th-asc::after,
.rc-v2 .rc-v2-phase-header-row th.rc-v2-th-desc::after {
color: inherit;
}
.rc-v2 .rc-v2-table .col-phase-wa .rc-wa-btn,
.rc-v2 .rc-v2-table .col-phase-wa .rc-wa-check { padding: 2px 4px !important; }
.rc-v2 .rc-v2-table .col-phase-wa .rc-wa-btn svg { width: 12px; height: 12px; }
.rc-v2 .rc-v2-table .custom-col-inline {
padding: 3px 6px !important;
font-size: 11px !important;
border-radius: 4px !important;
}
.rc-v2 .rc-v2-phase-header-row th[data-phase] {
text-shadow: none;
}
.rc-v2 .rc-v2-table tbody td[data-phase] {
}
.rc-v2 .rc-v2-phase-tabs { margin: 0 0 10px; }
.rc-v2 .rc-v2-table-top { padding: 8px 14px; font-size: 12px; }
.rc-v2 .rc-v2-table-top__sort-label { color: var(--v2-text-muted); }
.rc-v2 .rc-v2-table:not(.rc-phase-focused) .rc-phase-hidden-default { display: none; }
.rc-v2 .rc-v2-header__actions:only-child { margin-left: 0; }
@media (max-width: 600px) {
.rc-v2 .rc-v2-phase-tabs {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.rc-v2 .rc-v2-phase-tabs::-webkit-scrollbar { display: none; }
.rc-v2 .rc-v2-phase-tabs .rc-phase-tab { flex-shrink: 0; white-space: nowrap; padding: 5px 10px; font-size: 12px; }
.rc-v2 .rc-v2-table-top { padding: 6px 10px; font-size: 11px; }
.rc-v2 .rc-v2-stat { min-width: 100px; padding: 8px 10px; }
.rc-v2 .rc-v2-stat__value { font-size: 16px; }
.rc-v2 .rc-v2-stat__label { font-size: 8px; }
.rc-v2 .rc-v2-header__goal { flex-wrap: wrap; }
}
.rc-v2 .rc-v2-table.rc-all-hide-hidden tbody tr[data-hidden-in-all="1"] {
display: none;
}
.rc-phase-group-header .rc-phase-stats-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.45);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 5px;
padding: 1px 5px;
margin-left: 6px;
font-size: 11px;
line-height: 1;
cursor: pointer;
vertical-align: middle;
transition: background 0.15s, transform 0.15s;
}
.rc-phase-group-header .rc-phase-stats-btn:hover {
background: rgba(255, 255, 255, 0.85);
transform: scale(1.08);
}
.rc-phase-stats-modal-content {
max-width: 820px;
width: 92vw;
}
.rc-phase-stats-body {
display: grid;
grid-template-columns: 180px 1fr;
gap: 0;
max-height: 72vh;
padding: 0;
overflow: hidden;
}
.rc-phase-stats-rail {
border-right: 1px solid var(--v2-border);
background: var(--v2-surface-soft);
padding: 10px 8px;
overflow-y: auto;
max-height: 72vh;
}
.rc-phase-stats-rail-btn {
display: block;
width: 100%;
text-align: left;
padding: 8px 10px;
margin-bottom: 4px;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: var(--v2-text-muted);
cursor: pointer;
transition: background 0.12s;
}
.rc-phase-stats-rail-btn:hover { background: var(--v2-surface); border-color: var(--v2-border); }
.rc-phase-stats-rail-btn.active {
background: var(--v2-surface);
border-color: var(--phase-color, #94a3b8);
color: var(--phase-color, #111827);
}
.rc-phase-stats-rail-btn .rc-phase-stats-rail-count {
display: inline-block;
font-size: 11px;
color: #6b7280;
margin-left: 6px;
font-weight: 400;
}
.rc-phase-stats-main {
padding: 14px 18px 20px;
overflow-y: auto;
max-height: 72vh;
}
.rc-phase-stats-summary {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 10px 12px;
margin-bottom: 14px;
background: var(--v2-surface-soft);
border: 1px solid var(--v2-border);
border-radius: 8px;
font-size: 13px;
}
.rc-phase-stats-summary strong { font-size: 18px; font-weight: 700; color: var(--v2-text); }
.rc-phase-stats-summary .rc-phase-stats-cc-note {
font-size: 11px;
color: #92400e;
background: #fef3c7;
padding: 2px 8px;
border-radius: 4px;
border: 1px solid #fde68a;
}
.rc-phase-stats-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--v2-text-muted);
cursor: pointer;
user-select: none;
}
.rc-phase-stats-toggle input { margin: 0; }
.rc-phase-stats-col {
background: var(--v2-surface);
border: 1px solid var(--v2-border);
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 10px;
}
.rc-phase-stats-col-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid #f1f2f4;
}
.rc-phase-stats-col-title { font-size: 13px; font-weight: 600; color: var(--v2-text); }
.rc-phase-stats-col-type {
font-size: 10px;
font-weight: 500;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-left: 6px;
}
.rc-phase-stats-col-filled { font-size: 11px; color: #6b7280; }
.rc-phase-stats-bar {
display: grid;
grid-template-columns: 140px minmax(96px, max-content) 1fr 70px auto;
align-items: center;
gap: 10px;
font-size: 12px;
padding: 4px 0;
}
.rc-phase-stats-bar-label {
color: var(--v2-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rc-phase-stats-bar-demo {
display: inline-flex;
gap: 8px;
font-size: 11px;
font-weight: 600;
color: #6b7280;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.rc-phase-stats-bar-demo-latino { color: #be185d; }
.rc-phase-stats-bar-demo-intl { color: #0f766e; }
.rc-phase-stats-bar.is-empty .rc-phase-stats-bar-demo { opacity: 0.65; }
.rc-phase-stats-bar-label.is-empty { color: #9ca3af; font-style: italic; }
.rc-phase-stats-bar-track {
background: #f3f4f6;
border-radius: 4px;
height: 14px;
overflow: hidden;
position: relative;
}
.rc-phase-stats-bar-fill {
height: 100%;
background: var(--phase-color, #B41F51);
border-radius: 4px;
min-width: 2px;
transition: width 0.3s ease-out;
}
.rc-phase-stats-bar.is-empty .rc-phase-stats-bar-fill { background: #d1d5db; }
.rc-phase-stats-bar-count {
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--v2-text);
text-align: right;
}
.rc-phase-stats-bar-count-pct {
font-weight: 400;
color: #9ca3af;
margin-left: 4px;
font-size: 11px;
}
.rc-phase-stats-bar-view {
font-size: 11px;
color: #6366f1;
text-decoration: none;
white-space: nowrap;
padding: 2px 6px;
border-radius: 4px;
transition: background 0.12s;
}
.rc-phase-stats-bar-view:hover { background: #eef2ff; color: #4338ca; text-decoration: underline; }
.rc-phase-stats-by-staff {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed var(--v2-border);
}
.rc-phase-stats-by-staff > summary {
font-size: 11px;
color: #6b7280;
cursor: pointer;
padding: 4px 0;
list-style: none;
}
.rc-phase-stats-by-staff > summary::-webkit-details-marker { display: none; }
.rc-phase-stats-by-staff > summary::before { content: '▸ '; font-size: 10px; }
.rc-phase-stats-by-staff[open] > summary::before { content: '▾ '; }
.rc-phase-stats-staff-row {
display: grid;
grid-template-columns: 160px 1fr;
gap: 10px;
align-items: start;
font-size: 11px;
padding: 4px 0;
border-top: 1px solid #f1f2f4;
}
.rc-phase-stats-staff-name { color: var(--v2-text-muted); font-weight: 500; }
.rc-phase-stats-staff-vals { color: #6b7280; }
.rc-phase-stats-staff-vals span {
display: inline-block;
margin-right: 8px;
padding: 1px 6px;
background: #f3f4f6;
border-radius: 3px;
}
.rc-phase-stats-empty {
text-align: center;
color: #9ca3af;
font-size: 13px;
padding: 40px 20px;
}
@media (max-width: 720px) {
.rc-phase-stats-body {
grid-template-columns: 1fr;
}
.rc-phase-stats-rail {
border-right: none;
border-bottom: 1px solid var(--v2-border);
max-height: 120px;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.rc-phase-stats-rail-btn {
width: auto;
margin-bottom: 0;
font-size: 12px;
padding: 5px 9px;
}
.rc-phase-stats-bar {
grid-template-columns: 100px 1fr 60px;
}
.rc-phase-stats-bar-view { grid-column: 2 / 4; text-align: right; padding-top: 2px; }
}
.rc-v2 { min-width: 0; max-width: 100%; }
.rc-v2 .rc-v2-table-wrap { max-width: 100%; min-width: 0; }
.rc-v2 .rc-v2-table { min-width: max(100%, 760px); }
@media (max-width: 600px) {
.rc-v2 .rc-v2-btn {
padding: 10px 14px;
min-height: 44px;
line-height: 1.1;
}
.rc-v2 .rc-v2-header__actions { flex-wrap: wrap; gap: 6px; }
.rc-v2 .rc-stage-select,
.rc-v2 .rc-staff-select { padding: 6px 10px; min-height: 36px; }
}
@media (max-width: 600px) {
.rc-v2 .rc-v2-stats { gap: 6px; padding: 8px; }
.rc-v2 .rc-v2-stat { min-width: 100px; padding: 8px 10px; }
.rc-v2 .rc-v2-stat__label { font-size: 10px; }
.rc-v2 .rc-v2-stat__value { font-size: 18px; }
.rc-v2 .rc-v2-toolbar { flex-wrap: wrap; gap: 6px; }
.rc-v2 .rc-v2-header__actions { width: 100%; justify-content: flex-start; }
.rc-v2 .rc-v2-header__actions .rc-v2-btn { flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 600px) {
.rc-v2 .rc-v2-page,
.rc-v2 .rc-v2-canvas,
.rc-v2 .recruiting-content { padding: 12px 14px; }
.rc-v2 .rc-v2-header { padding: 14px 16px; }
}
.rc-v2 .rc-v2-table-wrap {
background-image:
linear-gradient(to right, transparent calc(100% - 12px), rgba(15, 23, 42, 0.06) 100%);
background-attachment: local;
background-repeat: no-repeat;
background-size: 12px 100%;
background-position: right top;
}
@media (hover: none) {
.rc-v2 .rc-v2-col-icon[data-tooltip]:hover::after,
.rc-v2 .rc-v2-col-icon[data-tooltip]:hover::before { display: none; }
.rc-v2 .rc-student-name {
text-decoration: underline;
text-decoration-color: var(--v2-primary, #b41f51);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
}
.rc-v2 .wa-queue-bar {
align-items: center;
gap: 12px;
background: #ecfdf5;
border: 1px solid #6ee7b7;
border-radius: 12px;
padding: 10px 16px;
margin: 12px 0;
font-size: 13px;
color: #065f46;
}
.rc-v2 .wa-queue-bar .wa-queue-icon { font-size: 18px; }
.rc-v2 .wa-queue-bar .wa-queue-status { flex: 1; }
.rc-v2 .wa-queue-bar .bulk-btn {
border: 1px solid var(--v2-border);
background: var(--v2-surface);
border-radius: 8px;
padding: 6px 12px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.rc-v2 .wa-queue-bar .bulk-btn.is-wa { border-color: var(--wa); background: var(--wa); color: var(--wa-ink); }
.rc-v2 .wa-queue-bar .bulk-btn.is-stop { border-color: var(--danger); background: var(--danger); color: var(--on-primary); }
.rc-v2 .rc-cols-panel {
position: absolute;
right: 0;
top: calc(100% + 6px);
z-index: 50;
background: var(--v2-surface);
border: 1px solid var(--v2-border);
border-radius: 10px;
box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
padding: 8px;
min-width: 220px;
max-height: 320px;
overflow-y: auto;
}
.rc-v2 .rc-cols-panel__row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 8px;
font-size: 13px;
color: var(--v2-text-muted);
cursor: pointer;
}
.rc-v2 .rc-cols-panel__row:hover { background: #f3f4f6; }
.rc-v2 .rc-custom-cell { text-align: center; white-space: nowrap; }
.rc-v2 .rc-custom-select,
.rc-v2 .rc-custom-text,
.rc-v2 .rc-custom-date {
border: 1px solid var(--v2-border);
border-radius: 7px;
padding: 4px 8px;
font-size: 12px;
max-width: 130px;
background: var(--v2-surface);
}
.rc-v2 .rc-custom-check { width: 16px; height: 16px; cursor: pointer; }
.rc-v2 .rc-custom-wa { display: inline-flex; gap: 4px; align-items: center; }
.rc-v2 .rc-v2-stat--clickable.is-active { outline: 2px solid #6366f1; outline-offset: -2px; }
.rc-v2 .rc-v2-stat.is-open { outline: 2px solid #6366f1; outline-offset: -2px; }
.rc-v2 .rc-amb-code {
background: #eef2ff;
color: #4338ca;
border-radius: 6px;
padding: 2px 8px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
letter-spacing: .5px;
}
.rc-v2 .rc-amb-count {
display: inline-block;
min-width: 26px;
background: #16a34a;
color: #fff;
border-radius: 999px;
padding: 2px 8px;
font-size: 12px;
font-weight: 700;
}
.rc-v2 .rc-amb-link { font-size: 12px; color: #64748b; }
.rc-v2 .rc-v2-goal-stages { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.rc-v2 .rc-v2-goal-stages__label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; opacity: .6; margin-right: 2px; }
.rc-v2 .rc-v2-goalstage { font-size: 11px; font-weight: 600; padding: 3px 11px; border-radius: 999px; cursor: pointer; line-height: 1.45;
border: 1px solid color-mix(in srgb, var(--gs-color, #94a3b8) 40%, transparent); background: transparent; color: inherit; opacity: .55; transition: all .12s; }
.rc-v2 .rc-v2-goalstage:hover { opacity: .9; }
.rc-v2 .rc-v2-goalstage.is-on { opacity: 1; background: color-mix(in srgb, var(--gs-color, #94a3b8) 16%, transparent); border-color: var(--gs-color, #94a3b8); }
.rc-v2 .rc-v2-goalstage.is-on::before { content: '✓ '; font-weight: 800; }
.rc-tasks { margin: 10px 0 14px; }
.rc-tasks-head { font-size: 13px; font-weight: 800; color: var(--v2-text); margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; }
.rc-tasks-sub { font-size: 12px; font-weight: 600; color: #9ca3af; }
.rc-tasks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.rc-task { background: var(--v2-surface); border: 1px solid var(--v2-border); border-left: 3px solid var(--tc, #6366f1); border-radius: 10px; padding: 11px 13px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.rc-task-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rc-task-title { font-size: 13.5px; font-weight: 700; color: var(--v2-text); }
.rc-task-count { font-size: 15px; font-weight: 800; color: var(--v2-text); font-variant-numeric: tabular-nums; }
.rc-task-den { color: #9ca3af; font-weight: 600; font-size: 12px; }
.rc-task-bar { height: 6px; border-radius: 999px; background: #f1f2f4; overflow: hidden; margin: 8px 0 4px; }
.rc-task-bar i { display: block; height: 100%; border-radius: 999px; background: var(--tc, #6366f1); }
.rc-task-staff { margin-top: 6px; display: flex; flex-direction: column; }
.rc-task-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid #f3f4f6; font-size: 12.5px; }
.rc-task-row:first-child { border-top: 0; }
.rc-task-who { flex: 1; min-width: 0; color: var(--v2-text-muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-task-prog { color: #6b7280; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-task-prog strong { color: var(--v2-text); }
.rc-task-done { color: #16a34a; font-weight: 800; margin-left: 4px; }
.rc-task-empty { font-size: 12px; color: #9ca3af; font-style: italic; padding: 4px 0; }
.rc-task-due { margin-top: 3px; font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.rc-task.is-overdue { border-left-color: var(--danger); }
.rc-task.is-overdue .rc-task-due { color: var(--danger-text); }
.rc-task-auto { margin-top: 6px; font-size: 11px; color: var(--text-muted); }
.rc-task-btns { display: inline-flex; gap: 4px; flex: none; }
.rc-task-btn { width: 26px; height: 26px; border: 1px solid var(--v2-border); background: var(--v2-surface); border-radius: 7px; font-size: 15px; font-weight: 800; line-height: 1; color: #6b7280; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rc-task-btn:hover { border-color: #cbd5e1; color: var(--v2-text); }
.rc-task-btn:disabled { opacity: .4; cursor: default; }
.rc-task-btn--add { background: var(--tc, #6366f1); border-color: var(--tc, #6366f1); color: #fff; }
.rc-task-btn--add:hover { color: #fff; filter: brightness(.95); }
.dark .rc-task-btn { background: #111827; border-color: rgba(255, 255, 255, .12); color: #d1d5db; }
.dark .rc-task { background: #1f2937; border-color: rgba(255, 255, 255, .08); }
.dark .rc-tasks-head, .dark .rc-task-title, .dark .rc-task-count, .dark .rc-task-prog strong { color: #fff; }
.dark .rc-task-who { color: #d1d5db; }
.dark .rc-task-bar { background: rgba(255, 255, 255, .08); }
.dark .rc-task-row { border-color: rgba(255, 255, 255, .06); }
@media (max-width: 640px) { .rc-tasks-grid { grid-template-columns: 1fr; } }
.cp-head { position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 2px 2px 12px; }
.cp-head__title { font-size: 20px; font-weight: 900; letter-spacing: -.2px; color: var(--text); }
.cp-head__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.cp-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-full); background: var(--surface-active); color: var(--text-secondary); font-size: 11.5px; font-weight: 800; }
.cp-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.cp-status.is-active { background: var(--success-bg); color: var(--success-text); }
.cp-status.is-active::before { background: var(--success); }
.cp-status.is-paused { background: var(--warning-bg); color: var(--warning-text); }
.cp-status.is-paused::before { background: var(--warning); }
.cp-head__tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.cp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--border-light); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; list-style: none; }
.cp-btn:hover, .cp-btn:focus-visible, .cp-btn:active { border-color: var(--border); background: var(--surface-hover); }
.cp-menu { position: relative; }
.cp-menu > summary::-webkit-details-marker { display: none; }
.cp-menu__pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-dropdown); min-width: 250px; padding: 6px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 16px 40px rgba(0, 0, 0, .14); }
.cp-menu__pop button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius); background: none; text-align: left; font: inherit; font-size: 13px; font-weight: 800; color: var(--text); cursor: pointer; }
.cp-menu__pop button small { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.cp-menu__pop button:hover, .cp-menu__pop button:focus-visible, .cp-menu__pop button:active { background: var(--surface-hover); }
.cp-menu__pop button.is-danger { color: var(--danger-text); }
.cp-menu__pop hr { margin: 4px 0; border: 0; border-top: 1px solid var(--border-light); }
.cp-plan { display: grid; grid-template-columns: 1.35fr 1fr; margin-bottom: 4px; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; animation: cp-rise .4s ease-out backwards; }
.cp-plan__main { padding: 16px 18px; border-right: 1px solid var(--border-light); }
.cp-plan__team { padding: 16px 18px; background: var(--surface-hover); }
.cp-label { margin-bottom: 6px; font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); }
.cp-goal { margin: 4px 0 12px; }
.cp-goal__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cp-goal__name { min-width: 76px; font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); }
.cp-goal__h b { font-size: 30px; font-weight: 900; letter-spacing: -.5px; font-variant-numeric: tabular-nums; color: var(--text); }
.cp-goal__h > span:not(.cp-goal__name):not(.who-pill) { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.cp-goal__note { font-style: normal; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.cp-goal__bar { height: 10px; margin-top: 6px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--tc) 12%, var(--surface)); overflow: hidden; }
.cp-goal__bar i { display: block; height: 100%; border-radius: var(--radius-full); background: var(--tc); animation: cp-fill 1s ease-out both; }
.cp-split { display: flex; height: 12px; margin: 12px 0 8px; border-radius: var(--radius-full); background: var(--surface-active); overflow: hidden; }
.cp-split span { height: 100%; background: var(--tc); animation: cp-fill 1s ease-out both; }
.cp-legend, .cp-stagegoals { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.cp-legend b { color: var(--text); }
.cp-legend i, .cp-stagegoals i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; background: var(--tc); }
.cp-gap { font-weight: 800; color: var(--warning-text); }
.cp-stagegoals { gap: 6px; margin-top: 12px; }
.cp-team-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 90px 56px; gap: 9px; align-items: center; margin-bottom: 8px; font-size: 12.5px; }
.cp-team-row b { font-weight: 700; color: var(--text); }
.cp-team-who { display: flex; align-items: center; min-width: 0; }
.cp-mini { display: block; height: 6px; border-radius: var(--radius-full); background: var(--surface-active); overflow: hidden; }
.cp-mini i { display: block; height: 100%; border-radius: var(--radius-full); background: var(--primary); animation: cp-fill 1.1s ease-out both; }
.cp-num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.cp-num strong { color: var(--text); }
.cp-foot, .cp-empty { margin: 8px 0 0; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.cp-sec { display: flex; align-items: baseline; gap: 10px; margin: 18px 2px 8px; }
.cp-sec h3 { margin: 0; font-size: 15px; font-weight: 900; color: var(--text); }
.cp-sec span { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.cp-chs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.cp-chs.is-open { grid-template-columns: minmax(250px, 290px) minmax(0, 1fr); align-items: start; }
.cp-ch { position: relative; padding: 13px 14px 11px; border: 1px solid color-mix(in srgb, var(--tc) 22%, var(--border-light)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--tc) 6%, var(--surface)); animation: cp-rise .4s ease-out backwards; }
.cp-ch:hover, .cp-ch:focus-within, .cp-ch:active { border-color: color-mix(in srgb, var(--tc) 45%, var(--border-light)); box-shadow: 0 6px 18px rgba(16, 24, 40, .08); }
.cp-ch.is-on { border-color: color-mix(in srgb, var(--tc) 50%, var(--surface)); background: color-mix(in srgb, var(--tc) 10%, var(--surface)); box-shadow: 0 8px 22px rgba(16, 24, 40, .07); }
.cp-ch__hit { position: absolute; inset: 0; z-index: 1; border: 0; border-radius: var(--radius-lg); background: none; cursor: pointer; }
.cp-ch__top { display: flex; align-items: flex-start; gap: 9px; }
.cp-ico { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: var(--radius); background: color-mix(in srgb, var(--tc) 16%, var(--surface)); font-size: 16px; }
.cp-ch__id { min-width: 0; }
.cp-ch__name { font-size: 13.5px; font-weight: 800; line-height: 1.25; color: var(--text); }
.cp-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-full); background: var(--surface-active); color: var(--text-secondary); font-size: 11px; font-weight: 800; white-space: nowrap; }
.cp-chip.is-late { background: var(--danger-bg); color: var(--danger-text); }
.cp-ch__n { margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.cp-ch__n b { font-size: 20px; font-weight: 900; color: var(--text); }
.cp-ch__n span { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.cp-bar { height: 6px; margin: 10px 0 8px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--tc) 14%, var(--surface)); overflow: hidden; }
.cp-bar i { display: block; height: 100%; border-radius: var(--radius-full); background: var(--tc); animation: cp-fill 1s ease-out both; }
.cp-ch__foot { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.cp-faces { display: flex; align-items: center; }
.cp-faces .pp-av { margin-right: -5px; box-shadow: 0 0 0 2px var(--surface), inset 0 0 0 1px hsl(var(--h) 45% 80%); }
.cp-open { margin-left: auto; font-size: 11.5px; font-weight: 800; }
.cp-ch.is-on .cp-open { color: var(--text); }
.cp-ch__edit { position: relative; z-index: 2; border: 0; border-radius: var(--radius); background: none; padding: 2px 6px; font: inherit; font-weight: 800; color: var(--primary); cursor: pointer; }
.cp-ch__edit:hover, .cp-ch__edit:focus-visible, .cp-ch__edit:active { background: var(--surface); }
.cp-ch-new { display: grid; place-items: center; min-height: 130px; border: 2px dashed var(--border-light); border-radius: var(--radius-lg); background: none; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 800; text-align: center; cursor: pointer; }
.cp-ch-new small { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.cp-ch-new:hover, .cp-ch-new:focus-visible, .cp-ch-new:active { border-color: var(--primary); background: var(--surface); color: var(--primary); }
.cp-also { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 2px 0; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.cp-also .cp-chip { border: 1px solid var(--border-light); background: var(--surface); }
.cp-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; align-items: start; margin-bottom: 14px; }
.cp-duo__main { min-width: 0; }
@media (min-width: 1100px) {
.cp-duo:has(> .cp-aud) { grid-template-columns: minmax(0, 72fr) minmax(0, 28fr); }
}
@media (min-width: 761px) {
.cp-duo .cp-chs:not(.is-open) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(250px, 270px);
overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scroll-snap-type: x proximity;
margin: -4px -4px -6px; padding: 4px 4px 12px; }
.cp-duo .cp-chs:not(.is-open) > * { scroll-snap-align: start; }
}
.cp-people { padding: 16px 18px 14px; border: 1px solid color-mix(in srgb, var(--tc) 22%, var(--border-light)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--tc) 4%, var(--surface)); animation: cp-in .28s ease-out backwards; }
.cp-people__h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 12px; }
.cp-people__h b { font-size: 15px; font-weight: 900; color: var(--text); }
.cp-people__h span { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.cp-back { margin-left: auto; padding: 6px 11px; border: 1px solid var(--border-light); border-radius: var(--radius); background: var(--surface); color: var(--text-secondary); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.cp-back:hover, .cp-back:focus-visible, .cp-back:active { background: var(--surface-hover); color: var(--text); }
.cp-people__wrap { overflow-x: auto; }
.cp-pt { width: 100%; border-collapse: collapse; font-size: 13px; }
.cp-pt th { padding: 0 10px 8px; border-bottom: 1px solid color-mix(in srgb, var(--tc) 18%, var(--surface)); text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; color: var(--text-muted); }
.cp-pt td { padding: 10px; border-bottom: 1px solid var(--border-light); vertical-align: middle; white-space: nowrap; }
.cp-pt tr:last-child td { border-bottom: 0; }
.cp-person { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; color: var(--text); }
.cp-person .pp-av { width: 28px; height: 28px; flex-basis: 28px; font-size: 10.5px; }
.cp-prog { display: flex; align-items: center; gap: 10px; min-width: 170px; }
.cp-prog .cp-mini { flex: 1; height: 7px; background: color-mix(in srgb, var(--tc) 16%, var(--surface)); }
.cp-prog .cp-mini i { background: var(--tc); }
.cp-prog b { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text); }
.cp-prog small { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.cp-n2 { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.cp-warn { font-weight: 800; color: var(--warning-text); }
.cp-pace { padding: 2px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 800; }
.cp-pace.is-ok { background: var(--success-bg); color: var(--success-text); }
.cp-pace.is-behind { background: var(--warning-bg); color: var(--warning-text); }
.cp-pace.is-done { background: var(--surface-active); color: var(--text); }
.cp-muted { color: var(--text-muted); }
.cp-link { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--primary); cursor: pointer; }
.cp-link:hover, .cp-link:focus-visible, .cp-link:active { text-decoration: underline; }
.cp-people__foot { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-light); font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.cp-toreach { margin-left: 6px; padding: 2px 7px; border-radius: var(--radius-full); background: var(--warning-bg); color: var(--warning-text); font-size: 11px; font-weight: 800; line-height: 1; white-space: nowrap; }
.cp-whose { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.cp-whose b { color: var(--text); font-variant-numeric: tabular-nums; }
.cp-whose b.is-gap { color: var(--warning-text); }
.cp-team--ns .cp-team-row, .cp-team-hdr { grid-template-columns: 22px minmax(0, 1fr) 64px 58px 50px; }
.cp-team-hdr { display: grid; gap: 9px; align-items: center; margin-bottom: 4px; font-size: 10.5px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); }
.cp-team-hdr span:nth-child(n+4) { text-align: right; }
.cp-ns-a { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.cp-team--ns small { display: none; }
.cp-mini--ns { position: relative; }
.cp-mini--ns i { position: absolute; inset: 0 auto 0 0; }
.cp-mini--ns i.is-added { background: color-mix(in srgb, var(--primary) 26%, var(--surface)); }
.cp-prog .cp-mini--ns i.is-added { background: color-mix(in srgb, var(--tc) 34%, var(--surface)); }
.cp-ns-n { font-size: 14px; color: var(--text); }
.cp-chip.is-hook { background: color-mix(in srgb, var(--tc) 18%, var(--surface)); color: var(--text); }
.cp-claim { margin-top: 10px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--surface); animation: cp-rise .4s .2s ease-out backwards; }
.cp-claim summary { display: flex; align-items: center; gap: 6px; padding: 9px 11px; list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.cp-claim summary::-webkit-details-marker { display: none; }
.cp-claim summary b { color: var(--warning-text); font-variant-numeric: tabular-nums; }
.cp-claim summary span { margin-left: auto; font-weight: 800; color: var(--primary); }
.cp-claim summary:hover, .cp-claim summary:focus-visible, .cp-claim summary:active { background: var(--surface-hover); }
.cp-claim__body { padding: 0 11px 10px; font-size: 12px; font-weight: 600; color: var(--text-secondary); animation: cp-rise .25s ease-out backwards; }
.cp-claim__body p { margin: 6px 0; }
.cp-claim__mine { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-claim__btn { margin-left: 4px; padding: 2px 8px; border: 0; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.cp-claim__btn:hover, .cp-claim__btn:focus-visible, .cp-claim__btn:active { background: var(--primary-hover); }
@keyframes cp-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes cp-fill { from { width: 0; } }
@keyframes cp-in { from { opacity: 0; transform: translateX(16px); } }
@media (prefers-reduced-motion: reduce) { .cp-plan, .cp-ch, .cp-people, .cp-split span, .cp-bar i, .cp-mini i, .cp-goal__bar i { animation: none; } }
@media (max-width: 760px) {
.cp-plan { grid-template-columns: 1fr; }
.cp-plan__main { border-right: 0; border-bottom: 1px solid var(--border-light); }
.cp-chs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.cp-chs > * { scroll-snap-align: start; }
.cp-chs.is-open { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); overflow: visible; }
.cp-head { flex-wrap: nowrap; align-items: flex-start; }
.cp-head__main { flex: 1 1 auto; min-width: 0; }
.cp-head__tools { margin-left: auto; flex: none; }
.cp-plan__team:has(> .cp-team, > .pm2-owners) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding: 12px 14px; }
.cp-plan__team > .cp-label, .cp-plan__team > .cp-foot { margin: 0; }
.cp-plan:not(.pm2-card) .cp-plan__team > .cp-foot { display: none; }
.cp-plan__team .cp-team, .cp-plan__team .pm2-owners { grid-column: 1 / -1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.cp-plan__team .cp-team::-webkit-scrollbar, .cp-plan__team .pm2-owners::-webkit-scrollbar { display: none; }
.cp-plan__team .cp-team .cp-team-row, .cp-plan__team .pm2-owners .cp-team-row { display: inline-flex; flex: none; gap: 6px; margin: 0; padding: 3px 10px 3px 3px; border: 1px solid var(--border-light); border-radius: var(--radius-full); background: var(--surface); white-space: nowrap; }
.cp-plan__team .cp-team .cp-mini, .cp-plan__team .pm2-owners .cp-mini { display: none; }
.cp-team-hdr { display: none; }
.cp-goal__name { min-width: 0; }
.cp-goal__h b { font-size: 26px; }
.cp-team--ns small { display: inline; font-weight: 600; color: var(--text-muted); }
.cp-plan__team > .cp-claim { grid-column: 1 / -1; margin-top: 0; }
.cp-claim summary, .cp-claim__btn { min-height: 44px; }
.cp-btn, .cp-ch__edit { min-height: 44px; min-width: 44px; justify-content: center; }
.fi-page-content:has(.rc-v2) { row-gap: 0; }
.rc-v2 .cp-head__tools .cp-lbl { display: none; }
.rc-v2 .cp-plan__team .cp-label__more { display: none; }
.rc-v2 .cp-plan .cp-split, .rc-v2 .cp-plan .cp-legend, .rc-v2 .cp-plan .cp-whose { display: none; }
.rc-v2 .cp-goal { margin-bottom: 8px; }
.rc-v2 .cp-sec > span { display: none; }
.rc-v2 .cp-ch__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cp-ch__edit { display: inline-flex; align-items: center; }
}
.cs-pop, .ce-pop { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; justify-content: center; align-items: flex-start; padding: 4vh 16px; overflow-y: auto; }
.ce-pop { z-index: var(--z-modal-top); padding-top: 6vh; }
.cs-pop.is-top { z-index: var(--z-modal-top); }
.cs-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); }
.cs-panel { position: relative; display: grid; grid-template-columns: 190px 1fr; grid-template-rows: auto 1fr auto; width: min(1000px, 100%); height: min(88vh, 880px); border-radius: 18px; background: var(--surface-hover); box-shadow: 0 30px 70px rgba(15, 23, 42, .35); overflow: hidden; animation: cs-pop .22s ease-out backwards; }
.cs-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border-light); background: var(--surface); }
.cs-head b { font-size: 16px; font-weight: 900; color: var(--text); }
.cs-head span { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.cs-x { margin-left: auto; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--text-muted); cursor: pointer; }
.cs-x:hover, .cs-x:focus-visible, .cs-x:active { color: var(--text); }
.cs-rail { display: grid; align-content: start; gap: 2px; padding: 14px 10px; border-right: 1px solid var(--border-light); background: var(--surface); }
.cs-rail button { padding: 8px 12px; border: 0; border-radius: var(--radius); background: none; text-align: left; font: inherit; font-size: 13px; font-weight: 700; color: var(--text-secondary); cursor: pointer; }
.cs-rail button:hover, .cs-rail button:focus-visible, .cs-rail button:active { background: var(--surface-hover); color: var(--text); }
.cs-rail button.is-danger { margin-top: 10px; color: var(--danger-text); }
.cs-body { display: grid; align-content: start; gap: 14px; padding: 16px 20px 30px; overflow-y: auto; }
.cs-foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border-light); background: var(--surface); }
.cs-panel.is-plain { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; height: auto; max-height: 88vh; width: min(620px, 100%); }
.cs-panel.is-plain.is-wide { width: min(880px, 100%); }
.cs-pbody { display: grid; align-content: start; gap: 12px; padding: 16px 20px 18px; overflow-y: auto; background: var(--surface); }
.cs-panel.is-plain textarea.cs-in { height: auto; padding: 9px 12px; line-height: 1.45; resize: vertical; }
.cs-sec { padding: 15px 16px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--surface); scroll-margin-top: 14px; }
.cs-sec h4 { margin: 0 0 3px; font-size: 14.5px; font-weight: 900; color: var(--text); }
.cs-sec > p { margin: 0 0 12px; font-size: 12.5px; color: var(--text-secondary); }
.cs-sec.is-danger { border-color: color-mix(in srgb, var(--danger) 30%, var(--border-light)); }
.cs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.cs-f { display: grid; gap: 5px; font-size: 12px; font-weight: 800; color: var(--text); }
.cs-f small { font-weight: 600; color: var(--text-muted); }
.cs-f--gap { margin-top: 14px; }
.cs-in { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font: inherit; font-size: 13.5px; font-weight: 700; color: var(--text); }
.cs-in:focus { outline: none; border-color: var(--primary); }
.cs-in.is-ro { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface-hover); }
.cs-in.is-small { width: 70px; height: 30px; padding: 0 8px; }
.cs-in.is-area { height: auto; padding: 9px 12px; line-height: 1.5; font-weight: 500; resize: vertical; }
.cs-err { font-size: 11.5px; font-weight: 700; color: var(--danger-text); }
.cs-hint { margin: 8px 0 0; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.cs-sub { margin: 16px 0 8px; font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); }
.cs-link { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--primary); cursor: pointer; }
.cs-link:hover, .cs-link:focus-visible, .cs-link:active { text-decoration: underline; }
.cs-link.is-danger { color: var(--danger-text); }
.cs-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid var(--border-light); border-radius: var(--radius); background: var(--surface); font: inherit; font-size: 13px; font-weight: 800; color: var(--text); cursor: pointer; }
.cs-btn:hover, .cs-btn:focus-visible, .cs-btn:active { border-color: var(--border); background: var(--surface-hover); }
.cs-btn.is-primary { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.cs-btn.is-primary:hover, .cs-btn.is-primary:focus-visible, .cs-btn.is-primary:active { background: var(--primary-hover); }
.cs-btn.is-ghost { border-color: transparent; background: none; color: var(--text-secondary); }
.cs-btn.is-danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--border-light)); color: var(--danger-text); }
.cs-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--radius); background: var(--surface-active); }
.cs-seg label { padding: 6px 12px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 800; color: var(--text-secondary); cursor: pointer; }
.cs-seg label.is-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.cs-seg input { position: absolute; opacity: 0; pointer-events: none; }
.cs-ro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-hover); font-size: 13px; font-weight: 700; color: var(--text); }
.cs-drow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border-light); font-size: 13px; }
.cs-drow:first-of-type { border-top: 0; }
.cs-drow p { margin: 2px 0 0; font-size: 12px; color: var(--text-secondary); }
.cs-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.cs-big { width: 86px; height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font: inherit; font-size: 16px; font-weight: 900; text-align: center; color: var(--text); }
.cs-big.is-ro { display: inline-grid; place-items: center; background: var(--surface-hover); }
.cs-arrow { font-weight: 900; color: var(--border); }
.cs-stagechip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border-light); border-radius: var(--radius-full); background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 800; color: var(--text-secondary); cursor: pointer; }
.cs-stagechip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sc); }
.cs-stagechip.is-on { border-color: color-mix(in srgb, var(--sc) 55%, var(--surface)); background: color-mix(in srgb, var(--sc) 12%, var(--surface)); color: var(--text); }
.cs-team { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-list { overflow: hidden; border: 1px solid var(--border-light); border-radius: var(--radius-md); }
.cs-li { display: block; width: 100%; border: 0; border-top: 1px solid var(--border-light); background: var(--surface); }
.cs-li:first-child { border-top: 0; }
.cs-li__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 9px 12px; font-size: 13px; }
.cs-li__name { flex: 1; min-width: 120px; font-weight: 800; color: var(--text); }
.cs-li__input { flex: 1; min-width: 140px; height: 32px; }
.cs-li__goal { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.cs-li__more { display: grid; gap: 10px; padding: 0 12px 12px 40px; }
.cs-li__n { min-width: 36px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.cs-li--add { padding: 10px 12px; text-align: left; font: inherit; font-size: 13px; font-weight: 800; color: var(--text-secondary); cursor: pointer; background: var(--surface-hover); }
.cs-li--add:hover, .cs-li--add:focus-visible, .cs-li--add:active { color: var(--primary); }
.cs-li--ch { background: color-mix(in srgb, var(--tc) 5%, var(--surface)); }
.cs-move { display: inline-flex; flex-direction: column; width: 18px; }
.cs-move button { border: 0; background: none; padding: 0; font-size: 10px; line-height: 1.1; color: var(--text-muted); cursor: pointer; }
.cs-move button:hover, .cs-move button:focus-visible, .cs-move button:active { color: var(--text); }
.cs-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sc); }
.cs-colour { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.cs-core { padding: 1px 7px; border-radius: var(--radius-full); background: var(--surface-active); font-size: 10.5px; font-weight: 800; color: var(--text-secondary); }
.cs-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--tc) 16%, var(--surface)); }
.ce-panel { position: relative; width: min(640px, 100%); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 25px 50px rgba(0, 0, 0, .25); animation: cs-pop .2s ease-out backwards; }
.ce-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-light); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: color-mix(in srgb, var(--tc) 5%, var(--surface)); }
.ce-icon { width: 42px; height: 42px; border: 0; border-radius: var(--radius); background: color-mix(in srgb, var(--tc) 16%, var(--surface)); font-size: 20px; text-align: center; }
.ce-name { flex: 1; display: grid; gap: 2px; min-width: 0; }
.ce-name input { width: 100%; border: 0; border-bottom: 2px solid transparent; background: none; padding: 2px 0; font: inherit; font-size: 18px; font-weight: 900; color: var(--text); }
.ce-name input:focus { outline: none; border-bottom-color: var(--tc); }
.ce-name span { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.ce-body { display: grid; gap: 16px; padding: 16px 20px 8px; }
.ce-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ce-sw { width: 24px; height: 24px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--c) 22%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, var(--surface)); cursor: pointer; }
.ce-sw.is-on { box-shadow: inset 0 0 0 1.5px var(--c), 0 0 0 3px color-mix(in srgb, var(--c) 25%, var(--surface)); }
.ce-how { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ce-how button { display: grid; gap: 4px; padding: 11px 12px; border: 1.5px solid var(--border-light); border-radius: var(--radius-md); background: var(--surface); text-align: left; font: inherit; font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--text-secondary); cursor: pointer; }
.ce-how button b { font-size: 13px; color: var(--text); }
.ce-how button:hover, .ce-how button:focus-visible, .ce-how button:active { border-color: var(--border); }
.ce-how button.is-on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.ce-hook { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--border-light); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; transition: border-color .2s, background .2s; }
.ce-hook input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ce-hook__sw { position: relative; flex: none; width: 38px; height: 22px; margin-top: 1px; border-radius: var(--radius-full); background: var(--surface-active); box-shadow: inset 0 0 0 1px var(--border); transition: background .2s; }
.ce-hook__sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.ce-hook input:checked + .ce-hook__sw { background: var(--tc); box-shadow: none; }
.ce-hook input:checked + .ce-hook__sw::after { transform: translateX(16px); }
.ce-hook input:focus-visible + .ce-hook__sw { outline: 2px solid var(--primary); outline-offset: 2px; }
.ce-hook:has(input:checked) { border-color: color-mix(in srgb, var(--tc) 45%, var(--border-light)); background: color-mix(in srgb, var(--tc) 6%, var(--surface)); }
.ce-hook:hover, .ce-hook:active { border-color: var(--border); }
.ce-hook__t { display: grid; gap: 3px; font-size: 13px; color: var(--text); }
.ce-hook__t small { font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--text-secondary); }
.ce-routes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ce-routes .cs-stagechip:disabled { cursor: not-allowed; opacity: .5; }
.ce-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border-light); border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--surface-hover); }
.ce-foot__r { display: flex; gap: 8px; }
.wa-ed { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wa-ed__tabs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.wa-ed__tabs .thrive-tab__n { margin-left: 6px; }
.wa-ed__hint { margin: 0; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.wa-ed__copy { margin-left: 6px; padding: 2px 9px; border: 1px solid var(--border-light); border-radius: var(--radius-full); background: var(--surface); font: inherit; font-size: 11.5px; font-weight: 800; color: var(--primary); cursor: pointer; }
.wa-ed__copy:hover, .wa-ed__copy:focus-visible, .wa-ed__copy:active { border-color: var(--primary); }
.wa-ed__ta { width: 100%; min-height: 118px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font: inherit; font-size: 13.5px; line-height: 1.5; color: var(--text); resize: vertical; }
.wa-ed__ta:focus { outline: none; border-color: var(--primary); }
.wa-ed__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.wa-ed__tag { padding: 3px 9px; border: 1px solid var(--border-light); border-radius: var(--radius-full); background: var(--surface); font: inherit; font-size: 11.5px; font-weight: 700; color: var(--text-secondary); cursor: pointer; }
.wa-ed__tag:hover, .wa-ed__tag:focus-visible, .wa-ed__tag:active { border-color: var(--primary); color: var(--primary); }
.wa-ed__preview { padding: 10px; border-radius: var(--radius-md); background: var(--success-bg); }
.wa-ed__label { margin-bottom: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--success-text); }
.wa-ed__label span { font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .8; }
.wa-ed__bubble { padding: 10px 12px; border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 4px; background: var(--surface); font-size: 13px; line-height: 1.5; white-space: pre-wrap; color: var(--text); box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
@keyframes cs-pop { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .cs-panel, .ce-panel { animation: none; } }
@media (max-width: 760px) {
.cs-pop, .ce-pop { padding: 0; }
.cs-panel { width: 100%; height: 100vh; border-radius: 0; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; }
.cs-rail { display: flex; gap: 6px; overflow-x: auto; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--border-light); }
.cs-rail button { white-space: nowrap; background: var(--surface-active); }
.cs-rail button.is-danger { margin-top: 0; }
.cs-rail button, .cs-btn, .cs-in:not(.is-small) { min-height: 44px; }
.cs-in { font-size: 16px; }
.cs-x { min-width: 44px; min-height: 44px; margin-right: -10px; }
.cs-2, .wa-ed, .ce-how { grid-template-columns: 1fr; }
.ce-hook { min-height: 44px; }
.ce-panel, .ce-head, .ce-foot { border-radius: 0; }
.ce-panel { min-height: 100vh; }
.cs-panel.is-plain { max-height: none; }
.cs-panel.is-plain select, .cs-panel.is-plain button:not(.cs-x) { min-height: 44px; font-size: 16px; }
}
.cst-tools { position: relative; z-index: 4; margin: 18px 0 10px; scroll-margin-top: 80px; animation: cst-rise .4s ease-out backwards; }
.cst-tools__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cst-tools__right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.cst-search { display: flex; align-items: center; gap: 6px; flex: 1 1 220px; max-width: 320px; padding: 0 10px; border: 1px solid var(--border-light); border-radius: var(--radius); background: var(--surface); }
.cst-search:focus-within { border-color: var(--primary); }
.cst-search span { font-size: 13px; opacity: .6; }
.cst-search input { flex: 1; min-width: 0; padding: 8px 0; border: 0; outline: 0; background: none; font: inherit; font-size: 13px; color: var(--text); }
.cst-sel { padding: 8px 28px 8px 10px; border: 1px solid var(--border-light); border-radius: var(--radius); background-color: var(--surface); font: inherit; font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; }
.cst-sel:hover, .cst-sel:focus-visible, .cst-sel:active { border-color: var(--border); }
.cst-filter { display: inline-flex; align-items: center; gap: 4px; padding: 7px 11px; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--surface)); border-radius: var(--radius-full); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); color: var(--primary); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.cst-filter:hover, .cst-filter:focus-visible, .cst-filter:active { border-color: var(--primary); }
.cst-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--border-light); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; list-style: none; }
.cst-btn:hover, .cst-btn:focus-visible, .cst-btn:active { border-color: var(--border); background: var(--surface-hover); }
.cst-btn.is-primary { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.cst-btn.is-primary:hover, .cst-btn.is-primary:focus-visible, .cst-btn.is-primary:active { background: var(--primary-hover); }
.cst-menu { position: relative; }
.cst-menu > summary { list-style: none; }
.cst-menu > summary::-webkit-details-marker { display: none; }
.cst-menu__pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-dropdown); min-width: 250px; padding: 6px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 16px 40px rgba(0, 0, 0, .14); }
.cst-menu.is-up .cst-menu__pop { top: auto; bottom: calc(100% + 8px); }
.cst-menu__pop button, .cst-menu__pop a { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius); background: none; text-align: left; text-decoration: none; font: inherit; font-size: 13px; font-weight: 800; color: var(--text); cursor: pointer; }
.cst-menu__pop small { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.cst-menu__pop button:hover, .cst-menu__pop button:focus-visible, .cst-menu__pop button:active,
.cst-menu__pop a:hover, .cst-menu__pop a:focus-visible, .cst-menu__pop a:active { background: var(--surface-hover); }
.cst-menu__pop .is-danger { color: var(--danger-text); }
.cst-menu__pop hr { margin: 4px 0; border: 0; border-top: 1px solid var(--border-light); }
.cst-ico, .cst-menu__pop .cst-phone-only { display: none; }
.cst-tabs { display: flex; gap: 2px; margin-top: 12px; border-bottom: 1px solid var(--border-light); overflow-x: auto; scrollbar-width: none; }
.cst-tabs::-webkit-scrollbar { display: none; }
.cst-tabs button { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; cursor: pointer; }
.cst-tabs button:hover, .cst-tabs button:focus-visible, .cst-tabs button:active { color: var(--text); }
.cst-tabs button i { width: 8px; height: 8px; border-radius: 50%; background: var(--sc, var(--text-muted)); }
.cst-tabs button em { padding: 1px 7px; border-radius: var(--radius-full); background: var(--surface-active); font-style: normal; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.cst-tabs button.is-on { border-bottom-color: var(--sc, var(--primary)); color: var(--text); }
.cst-tabs button.is-on em { background: color-mix(in srgb, var(--sc, var(--primary)) 14%, var(--surface)); color: var(--text); }
.cst-tabs .cst-panel-back { margin-left: auto; color: var(--primary); font-weight: 800; }
.cst-credit { display: block; width: 150px; max-width: 150px; margin: 3px 0 0 32px; padding: 1px 4px; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cst-credit:hover, .cst-credit:focus-visible, .cst-credit:active { background: var(--surface-hover); color: var(--text-secondary); }
.cst-credit.is-claimed { color: var(--primary); }
.cst-msg { padding: 4px 9px; border: 1px solid var(--border-light); border-radius: var(--radius-full); background: var(--surface); font: inherit; font-size: 11.5px; font-weight: 800; color: var(--text-secondary); white-space: nowrap; cursor: pointer; }
.cst-msg:hover, .cst-msg:focus-visible, .cst-msg:active { border-color: var(--border); color: var(--text); }
.cst-msg.is-on { border-color: color-mix(in srgb, var(--success) 35%, var(--surface)); background: var(--success-bg); color: var(--success-text); }
.rc-v2 .actions-cell .rc-wa-btn.is-mine { position: relative; }
.rc-v2 .actions-cell .rc-wa-btn.is-mine::after { content: "✎"; position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: var(--radius-full); background: var(--primary); color: var(--surface); font-size: 9px; font-weight: 900; line-height: 1; pointer-events: none; }
.cst-row-menu > summary { cursor: pointer; }
.cst-row-menu .cst-menu__pop { min-width: 210px; }
.cst-bulk { position: sticky; bottom: 16px; z-index: var(--z-dropdown); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: fit-content; max-width: calc(100% - 24px); margin: 12px auto 0; padding: 8px 10px 8px 16px; border-radius: var(--radius-lg); background: var(--text); color: var(--surface); box-shadow: 0 18px 40px rgba(0, 0, 0, .28); animation: cst-rise .25s ease-out backwards; }
.cst-bulk > b { font-size: 13px; font-weight: 900; margin-right: 4px; }
.cst-bulk select, .cst-bulk .cst-menu > summary { padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--surface) 25%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 10%, transparent); font: inherit; font-size: 12.5px; font-weight: 800; color: var(--surface); cursor: pointer; }
.cst-bulk select option { color: var(--text); background: var(--surface); }
.cst-bulk select { max-width: 150px; }
.cst-bulk select:hover, .cst-bulk select:focus-visible, .cst-bulk select:active,
.cst-bulk .cst-menu > summary:hover, .cst-bulk .cst-menu > summary:focus-visible, .cst-bulk .cst-menu > summary:active { background: color-mix(in srgb, var(--surface) 20%, transparent); }
.cst-bulk .cst-menu__pop { color: var(--text); }
.cst-bulk__x { padding: 4px 8px; border: 0; background: none; font: inherit; font-size: 14px; color: color-mix(in srgb, var(--surface) 70%, transparent); cursor: pointer; }
.cst-bulk__x:hover, .cst-bulk__x:focus-visible, .cst-bulk__x:active { color: var(--surface); }
.cst-bulk__undo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--surface) 12%, transparent); font-size: 12.5px; font-weight: 700; }
.cst-bulk__undo button { padding: 3px 9px; border: 0; border-radius: var(--radius-full); background: var(--surface); font: inherit; font-size: 12px; font-weight: 900; color: var(--text); cursor: pointer; }
.cst-bulk__undo button + button { background: none; color: var(--surface); }
@keyframes cst-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rc-pick { display: contents; }
.rc-pick__txt { display: none; }
@media (prefers-reduced-motion: reduce) { .cst-tools, .cst-bulk { animation: none; } }
@media (max-width: 760px) {
.cst-tools__row { position: relative; gap: 8px 6px; }
.cst-tools__right { display: contents; }
.cst-search { order: 0; flex: 1 1 0; min-width: 140px; max-width: none; min-height: 44px; }
.cst-tools__right > * { order: 1; }
.cst-sel, .cst-filter, .pm2-quiet { order: 2; }
.cst-sel { flex: 1 1 120px; min-width: 0; }
.cst-btn, .cst-sel, .cst-filter { min-height: 44px; }
.cst-sel, .cst-search input { font-size: 16px; }
.cst-lbl { display: none; }
.cst-ico { display: inline; font-size: 18px; line-height: 1; }
.cst-menu__pop .cst-phone-only { display: block; }
.cst-tools .cst-menu { position: static; }
.cst-tools .cst-menu__pop { left: 0; right: 0; min-width: 0; }
.cst-menu__pop button, .cst-menu__pop a { min-height: 44px; }
.cst-tabs button { min-height: 44px; }
.cst-bulk { width: auto; max-width: none; margin-inline: 0; bottom: 8px; }
.cst-bulk .cst-menu { position: static; }
.cst-bulk .cst-menu__pop { left: 0; right: 0; min-width: 0; }
.cst-credit { width: 100%; max-width: none; margin-left: 0; }
}
@media (max-width: 760px) {
.rc-v2 .rc-v2-table-wrap { overflow: visible; background-image: none; }
.rc-v2 .rc-v2-table, .rc-v2 .rc-v2-table tbody { display: block; width: 100%; min-width: 0; }
.rc-v2 .rc-v2-table thead { display: none; }
.rc-v2 .rc-v2-table tbody tr { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 8px 10px 42px; border-bottom: 1px solid var(--border-light); }
.rc-v2 .rc-v2-table tbody td { display: block; padding: 0; border-bottom: 0; background: none; }
.rc-v2 .rc-v2-table tbody td.col-check { position: absolute; left: 8px; top: 20px; width: auto; min-width: 0; max-width: none; }
.rc-v2 .rc-v2-table tbody td.col-name { position: static; order: 0; flex: 1 1 calc(100% - 140px); min-width: 0; max-width: none; }
.rc-v2 .rc-v2-table tbody td.col-stage { order: 1; flex: none; width: auto; margin-left: auto; }
.rc-v2 .rc-v2-table tbody td.col-staff, .rc-v2 .rc-v2-table tbody td.col-channel { order: 2; display: flex; gap: 6px; min-width: 0; }
.rc-v2 .rc-v2-table tbody td.col-staff { flex: 0 1 auto; max-width: 34%; }
.rc-v2 .rc-v2-table tbody td.col-channel { flex: 1 1 0; max-width: none; }
.rc-v2 .rc-v2-table tbody td.col-contact, .rc-v2 .rc-v2-table tbody td.col-notes { display: none; }
.rc-v2 .rc-v2-table tbody td.col-actions { order: 2; flex: none; width: auto; margin-left: auto; }
.rc-v2 .rc-v2-table tbody td.col-custom { order: 4; flex: none; min-width: 0; }
.rc-v2 .rc-pick { position: relative; display: inline-flex; align-items: center; min-width: 0; max-width: 100%; min-height: 44px; padding: 0 12px;
border: 1px solid var(--border-light); border-radius: var(--radius-full); background: var(--surface); }
.rc-v2 .rc-pick__txt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--text-secondary); pointer-events: none; }
.rc-v2 .rc-pick.is-empty .rc-pick__txt { color: var(--text-muted); font-weight: 600; }
.rc-v2 .rc-v2-table tbody td .rc-pick > select:is(.staff-inline-select, .cst-credit) { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); min-height: 0; margin: 0; opacity: 0; font-size: 16px; }
.rc-v2 .rc-pick--credit:not(.is-claimed) { display: none; }
.rc-v2 .rc-v2-table .actions-cell { justify-content: flex-start; gap: 6px; }
.rc-v2 .rc-v2-table tbody td.col-check .rc-student-check { width: 24px; height: 24px; }
.rc-v2 .rc-v2-table .cst-credit:not(.is-claimed) { display: none; }
.rc-v2 .rc-v2-row-staff .rc-v2-avatar { display: none; }
.rc-v2 .rc-student-name { min-height: 44px; font-size: 15px; }
.rc-v2 .rc-v2-table tbody td.col-name .rc-v2-row-name { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0 6px; }
.rc-v2 .rc-v2-row-name .rc-student-name { flex: 0 1 auto; width: auto; max-width: 100%; }
.rc-v2 .rc-v2-table .staff-inline-select, .rc-v2 .rc-v2-table .rc-channel-select, .rc-v2 .rc-v2-table .cst-credit { width: 100%; max-width: none; min-height: 44px; font-size: 16px; }
.rc-v2 .rc-v2-row-staff .staff-inline-select { flex: 1; min-width: 0; }
.rc-v2 .rc-stage-pill { min-height: 46px; max-width: 150px; }
.rc-v2 .rc-v2-table tbody td.col-actions .action-btn, .rc-v2 .rc-v2-table .rc-custom-wa .action-btn { width: 44px; height: 44px; font-size: 16px; }
.rc-v2 .rc-v2-table .cst-msg { min-height: 44px; padding: 0 14px; font-size: 13px; }
}
.cp-aud { min-width: 0; animation: cpAudIn .45s cubic-bezier(.2, .8, .2, 1) backwards; }
.cp-aud__card { display: flex; flex-direction: column; gap: 8px; min-height: 130px; padding: 13px 14px 11px;
border: 1px solid var(--border-light); border-radius: var(--radius-lg);
background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, var(--surface)), var(--surface) 70%); }
.cp-aud__rules { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain;
scrollbar-width: thin; padding-bottom: 4px; }
.cp-aud__rules > * { flex: none; white-space: nowrap; }
.cp-aud__rule { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--border-light); border-radius: var(--radius-full);
background: var(--surface); font-size: 12px; font-weight: 700; color: var(--text); }
.cp-aud__rule.is-missing { border-style: dashed; background: none; color: var(--text-muted); }
.cp-aud__and { font-style: normal; font-size: 11px; font-weight: 800; color: var(--text-muted); }
.cp-aud__join { font-style: normal; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: var(--primary); }
.cp-aud__meta { font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--text-muted); }
.cp-aud__meta b { font-weight: 900; color: var(--text); }
.cp-aud__warn { font-weight: 800; color: var(--warning-text); }
.cp-aud__tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.cp-aud__tools .is-edit { border-color: var(--primary); color: var(--primary); }
.cp-aud__tools .is-new { border-color: var(--success); background: var(--success-bg); color: var(--success-text); }
@keyframes cpAudIn { from { opacity: 0; transform: translateY(6px); } }
.aud-unsaved { margin: 0 0 14px; padding: 12px 14px; border: 1px dashed var(--warning); border-radius: var(--radius-lg);
background: var(--warning-bg); font-size: 12.5px; font-weight: 600; line-height: 1.5; color: var(--text-secondary); }
.aud-unsaved b { display: block; margin-bottom: 2px; font-weight: 900; color: var(--warning-text); }
.aud-unsaved em { font-style: normal; font-weight: 800; color: var(--text); }
.aud-diff { margin-top: 14px; border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; }
.aud-diff__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-light); background: var(--surface-hover); }
.aud-diff__head b { font-size: 12.5px; font-weight: 900; color: var(--text); }
.aud-diff__head small { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.aud-diff__none { margin: 0; padding: 12px 14px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.aud-diff__row { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-top: 1px solid var(--border-light); }
.aud-diff__head + .aud-diff__row { border-top: 0; }
.aud-diff__row > b { display: grid; place-items: center; height: 34px; border-radius: var(--radius-md); font-size: 15px; font-weight: 900; }
.aud-diff__row.is-join > b { background: var(--success-bg); color: var(--success-text); }
.aud-diff__row.is-leave > b { background: var(--danger-bg); color: var(--danger-text); }
.aud-diff__row.is-stay > b { background: var(--warning-bg); color: var(--warning-text); }
.aud-diff__row.is-stay > b::before { content: "⚠ "; font-size: 12px; }
.aud-diff__row strong { display: block; font-size: 13px; font-weight: 900; color: var(--text); }
.aud-diff__row small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.aud-diff__names { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.aud-diff__names span, .aud-diff__names em { padding: 2px 8px; border-radius: var(--radius-full); background: var(--surface-hover);
font-size: 11.5px; font-weight: 700; font-style: normal; color: var(--text-secondary); }
.aud-diff__names em { color: var(--text-muted); }
.cp-aud-out { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--radius-full); background: var(--warning-bg);
color: var(--warning-text); font-size: 10.5px; font-weight: 800; line-height: 1.2; white-space: nowrap; vertical-align: middle; }
@media (max-width: 760px) {
.cp-aud__card { min-height: 0; padding: 10px 12px; }
.cp-aud__tools .cp-btn { min-height: 44px; }
.cp-aud__rule { padding: 3px 8px; font-size: 11.5px; }
}
.mlib, .mcomp{
--brand:#B41F51; --brand-2:#7a1236; --brand-soft:#fbe9f0;
--ink:#1a1725; --muted:#6b6577; --line:#ece9f0; --card:#fff;
--wa:#25D366; --wa-bg:#e5fbe9; --email:#2563eb; --email-bg:#e8f0fe;
--push:#7c3aed; --push-bg:#efe9fd; --ok:#16a34a;
--shadow:0 1px 2px rgba(20,10,30,.06),0 8px 24px rgba(20,10,30,.06); --r:14px;
color:var(--ink); -webkit-font-smoothing:antialiased;
}
.mlib *, .mcomp *{box-sizing:border-box}
.mlib button, .mcomp button{font-family:inherit;cursor:pointer}
.m-btn{border:0;border-radius:10px;padding:10px 15px;font-weight:750;font-size:13.5px;display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.m-btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 6px 16px rgba(180,31,81,.28)}
.m-btn-ghost{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.m-btn-danger{background:var(--card);border:1px solid #f0d4dc;color:#c0143f}
.m-badge{font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.b-wa{background:var(--wa-bg);color:#0f7a37}.b-email{background:var(--email-bg);color:#1d4ed8}
.b-push{background:var(--push-bg);color:#6d28d9}.b-any{background:#eef0f2;color:#4b5563}
.mlib .lib-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.mlib .lib-head h2{margin:0;font-size:23px;font-weight:850;letter-spacing:-.5px}
.mlib .lib-head p{margin:4px 0 0;color:var(--muted);font-size:13.5px;max-width:560px}
.mlib .spacer{flex:1}
.mlib .toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.mlib .search{flex:1;min-width:230px;position:relative}
.mlib .search input{width:100%;border:1px solid var(--line);background:var(--card);border-radius:11px;padding:11px 12px 11px 38px;font-size:14px;color:var(--ink)}
.mlib .search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.mlib .search .si{position:absolute;left:13px;top:12px;opacity:.4}
.mlib .chips{display:flex;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:4px;flex-wrap:wrap}
.mlib .chips button{border:0;background:transparent;color:var(--muted);font-weight:700;font-size:12.5px;padding:7px 12px;border-radius:8px;display:inline-flex;gap:6px;align-items:center}
.mlib .chips button.on{background:var(--brand-soft);color:var(--brand)}
.mlib .chips .dot{width:8px;height:8px;border-radius:50%}
.mlib .lib-grid{display:grid;grid-template-columns:230px 1fr;gap:20px;align-items:start}
.mlib .rail{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:8px;box-shadow:var(--shadow);position:sticky;top:12px}
.mlib .rail .rl-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);padding:10px 12px 6px}
.mlib .rail button{width:100%;text-align:left;border:0;background:transparent;border-radius:9px;padding:9px 12px;display:flex;align-items:center;gap:9px;font-weight:650;font-size:13.5px;color:var(--ink);margin-bottom:1px}
.mlib .rail button .em{width:20px;text-align:center}
.mlib .rail button .n{margin-left:auto;font-size:12px;font-weight:800;color:var(--muted);background:#f1eef4;border-radius:999px;padding:1px 8px}
.mlib .rail button.on{background:var(--brand-soft);color:var(--brand)}
.mlib .rail button.on .n{background:var(--card);color:var(--brand)}
.mlib .stage-h{display:flex;align-items:baseline;gap:10px;margin:2px 0 14px;flex-wrap:wrap}
.mlib .stage-h h3{margin:0;font-size:16px;font-weight:800}
.mlib .stage-h .sub{color:var(--muted);font-size:13px}
.mlib .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.mlib .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s,border-color .12s;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit}
.mlib .card:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(20,10,30,.08),0 16px 34px rgba(20,10,30,.10);border-color:#e2dbe8}
.mlib .card .ch{display:flex;align-items:center;gap:10px}
.mlib .card .em{font-size:20px;line-height:1}
.mlib .card .nm{font-weight:780;font-size:14.5px;letter-spacing:-.2px}
.mlib .card .snip{color:#514b5e;font-size:13px;line-height:1.5;background:#faf9fc;border:1px solid var(--line);border-radius:10px;padding:9px 11px;min-height:52px;white-space:pre-wrap;overflow:hidden;max-height:66px}
.mlib .card .snip .tag,.mcomp .mtag-lite{color:var(--brand);font-weight:700}
.mlib .card .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:11.5px;font-weight:650}
.mlib .pill{background:#f1eef4;border-radius:999px;padding:2px 9px}
.mlib .card .row2{display:flex;align-items:center;gap:8px;margin-top:2px}
.mlib .live{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;color:var(--ok)}
.mlib .live .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.mlib .live.off{color:var(--muted)}.mlib .live.off .dot{background:#c9c4d1}
.mlib .card .acts{margin-left:auto;display:flex;gap:6px}
.mlib .icon-btn{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:5px 9px;font-size:12px;color:var(--muted);font-weight:700}
.mlib .icon-btn:hover{color:var(--brand);border-color:var(--brand-soft);background:var(--brand-soft)}
.mlib .empty{color:var(--muted);padding:40px;grid-column:1/-1;text-align:center;background:var(--card);border:1px dashed var(--line);border-radius:var(--r)}
.mcomp .ed-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.mcomp .back{border:1px solid var(--line);background:var(--card);border-radius:10px;width:38px;height:38px;display:grid;place-items:center;font-size:16px;color:var(--muted);text-decoration:none}
.mcomp .ed-head h2{margin:0;font-size:19px;font-weight:820}
.mcomp .ed-head .crumbs{color:var(--muted);font-size:12.5px;font-weight:600}
.mcomp .ed-head .save{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.mcomp .callout{background:linear-gradient(135deg,#fff,#fbf5f8);border:1px solid var(--brand-soft);border-radius:12px;padding:12px 14px;font-size:12.5px;color:#5c3547;display:flex;gap:10px;margin-bottom:16px}
.mcomp .ed-grid{display:grid;grid-template-columns:1fr 400px;gap:22px;align-items:start}
.mcomp .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}
.mcomp .panel .ph{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px}
.mcomp .panel .ph .n{font-weight:800;font-size:14px}
.mcomp .panel .ph .n small{display:block;font-weight:600;color:var(--muted);font-size:12px;margin-top:1px}
.mcomp .panel .pb{padding:16px 18px}
.mcomp .lbl{display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin:0 0 6px}
.mcomp .lbl .opt{font-weight:600;color:var(--muted);text-transform:none}
.mcomp .inp{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:14px;font-family:inherit;color:var(--ink);background:var(--card)}
.mcomp .inp:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.mcomp .err{color:#c0143f;font-size:12px;font-weight:700;margin:6px 0 0}
.mcomp .name-row{display:flex;gap:10px}
.mcomp .emoji-in{width:56px;text-align:center;font-size:20px}
.mcomp .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mcomp .field{margin-bottom:14px}.mcomp .field:last-child{margin-bottom:0}
.mcomp .hint{font-size:12px;color:var(--muted);margin:6px 0 0;line-height:1.5}
.mcomp select.inp{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6577' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.mcomp .chan{display:flex;gap:8px;flex-wrap:wrap}
.mcomp .chan label{flex:1;min-width:120px;border:1.5px solid var(--line);border-radius:11px;padding:10px;display:flex;align-items:center;gap:9px;font-weight:750;font-size:13.5px;color:var(--muted);cursor:pointer;background:var(--card)}
.mcomp .chan .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:14px}
.mcomp .chan input{position:absolute;opacity:0;pointer-events:none}
.mcomp .chan input:checked+label{border-color:var(--brand);color:var(--ink);background:var(--brand-soft)}
.ic-wa{background:var(--wa-bg)}.ic-email{background:var(--email-bg)}.ic-push{background:var(--push-bg)}.ic-any{background:#eef0f2}
.mcomp .tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.mcomp .tags .t{border:1px dashed #d9cfe0;background:var(--card);color:var(--brand);border-radius:999px;padding:4px 9px;font-size:11px;font-weight:700;cursor:pointer}
.mcomp .tags .t:hover{background:var(--brand-soft);border-style:solid}
.mcomp .variant{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.mcomp .variant .vh{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#faf9fc;border-bottom:1px solid var(--line)}
.mcomp .variant .vt{font-weight:800;font-size:12.5px}
.mcomp .variant .rm{margin-left:auto;border:0;background:transparent;color:var(--muted);font-weight:800;font-size:14px}
.mcomp .variant textarea{width:100%;border:0;padding:12px;font-size:13.5px;font-family:inherit;resize:vertical;min-height:92px;color:var(--ink);line-height:1.55}
.mcomp .variant textarea:focus{outline:none;background:#fffdfe}
.mcomp .variant.is-pv{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.mcomp .addv{border:1.5px dashed #d9cfe0;background:var(--card);color:var(--brand);border-radius:11px;padding:11px;width:100%;font-weight:800;font-size:13px}
.mcomp .addv:hover{background:var(--brand-soft)}
.mcomp .togrow{display:flex;align-items:center;gap:12px}
.mcomp .switch{width:44px;height:26px;border-radius:999px;background:var(--ok);position:relative;border:0;flex-shrink:0}
.mcomp .switch::after{content:"";position:absolute;top:3px;left:21px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.15s}
.mcomp .switch.off{background:#cfc9d6}.mcomp .switch.off::after{left:3px}
.mcomp .preview{position:sticky;top:12px}
.mcomp .pv-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.mcomp .pv-top{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px}
.mcomp .pv-top .n{font-weight:800;font-size:13.5px}
.mcomp .pv-top .vtabs{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.mcomp .pv-top .vtabs button{border:1px solid var(--line);background:var(--card);border-radius:7px;padding:3px 9px;font-size:11.5px;font-weight:800;color:var(--muted)}
.mcomp .pv-top .vtabs button.on{background:var(--brand-soft);border-color:var(--brand-soft);color:var(--brand)}
.mcomp .pv-body{padding:18px;background:#f0edf3}
.mcomp .mtag{color:#0b6b8f;font-weight:600}
.mcomp .phone{max-width:290px;margin:0 auto;background:#0b141a;border-radius:26px;padding:8px;box-shadow:0 12px 30px rgba(0,0,0,.22)}
.mcomp .phone .scr{background:#e6ddd4;border-radius:20px;overflow:hidden}
.mcomp .wa-bar{background:#075E54;color:#fff;padding:10px 12px;display:flex;align-items:center;gap:9px}
.mcomp .wa-bar .av{width:30px;height:30px;border-radius:50%;background:#25D366;display:grid;place-items:center;font-size:13px}
.mcomp .wa-bar .who{font-weight:700;font-size:13px}.mcomp .wa-bar .who small{display:block;font-weight:500;opacity:.8;font-size:10.5px}
.mcomp .wa-msgs{padding:14px 12px;min-height:220px;display:flex;flex-direction:column;gap:8px;justify-content:flex-end}
.mcomp .bubble{align-self:flex-end;background:#dcf8c6;border-radius:10px 10px 2px 10px;padding:8px 10px 16px;font-size:12.5px;color:#111;max-width:82%;position:relative;white-space:pre-wrap;line-height:1.5;box-shadow:0 1px .5px rgba(0,0,0,.13)}
.mcomp .bubble .tm{position:absolute;right:9px;bottom:4px;font-size:9.5px;color:#4a9c6d}
.mcomp .bubble .mtag{color:#0b6b8f}
.mcomp .email{max-width:330px;margin:0 auto;background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.14)}
.mcomp .email .eh{padding:13px 15px;border-bottom:1px solid #eee}
.mcomp .email .from{display:flex;align-items:center;gap:9px}
.mcomp .email .from .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px}
.mcomp .email .from .who{font-weight:750;font-size:13px}.mcomp .email .from .who small{display:block;color:var(--muted);font-weight:500;font-size:11px}
.mcomp .email .subj{font-weight:800;font-size:14px;margin:12px 15px 0}
.mcomp .email .ebody{padding:10px 15px 18px;font-size:12.5px;color:#333;white-space:pre-wrap;line-height:1.6}
.mcomp .push{max-width:320px;margin:26px auto}
.mcomp .push .note{background:rgba(255,255,255,.95);border-radius:16px;padding:12px 14px;box-shadow:0 12px 30px rgba(0,0,0,.18);display:flex;gap:11px}
.mcomp .push .ic{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;display:grid;place-items:center;font-weight:800;flex-shrink:0}
.mcomp .push .pt{font-weight:800;font-size:13px}
.mcomp .push .pb2{font-size:12.5px;color:#333;margin-top:2px;white-space:pre-wrap;line-height:1.45}
.mcomp .push .when{margin-left:auto;font-size:10.5px;color:#888}
.mcomp .pv-empty{opacity:.4}
.mcomp .pv-foot{padding:11px 15px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--line);display:flex;gap:7px;align-items:flex-start;background:var(--card)}
.mcomp .pv-foot b{color:#514b5e}
.mlib .modeseg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.mlib .modeseg button{display:flex;align-items:center;gap:12px;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:13px 16px;color:var(--ink)}
.mlib .modeseg button .em{font-size:22px;line-height:1;flex-shrink:0}
.mlib .modeseg button .tx{display:flex;flex-direction:column;gap:1px}
.mlib .modeseg button .tx b{font-size:14.5px;font-weight:820;letter-spacing:-.2px}
.mlib .modeseg button .tx small{color:var(--muted);font-size:12px;font-weight:600}
.mlib .modeseg button.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px var(--brand-soft)}
.mlib .modeseg button.on .tx b{color:var(--brand)}
.mlib .cards.auto{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
.mlib .card.slot{gap:9px}
.mlib .card .desc{color:var(--muted);font-size:12.5px;font-weight:600;margin-top:-2px}
.mlib .src-default{background:#f1eef4;color:var(--muted)}
.mlib .src-custom{background:var(--wa-bg);color:#0f7a37}
.mlib .typed{border-top:1px dashed var(--line);padding-top:9px;display:flex;flex-direction:column;gap:5px}
.mlib .typed-h{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.mlib .typed-row{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;background:#faf9fc;border:1px solid var(--line);border-radius:9px;padding:6px 10px}
.mlib .typed-row:hover{border-color:var(--brand-soft);background:var(--brand-soft)}
.mlib .typed-row .tp{font-weight:800;font-size:12px;flex-shrink:0}
.mlib .typed-row .tb{color:var(--muted);font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mlib .card.slot .row2{flex-wrap:wrap;gap:8px}
.mlib .add-versions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
.mlib .add-versions .av-lbl{font-size:11.5px;font-weight:700;color:var(--muted)}
@media(max-width:980px){
.mlib .lib-grid{grid-template-columns:1fr}.mlib .rail{position:static}
.mcomp .ed-grid{grid-template-columns:1fr}.mcomp .preview{position:static}
}
@media(max-width:640px){.mlib .cards{grid-template-columns:1fr}.mlib .modeseg{grid-template-columns:1fr}}
.dark .mlib, .dark .mcomp{--ink:#ece9f2;--muted:#a39dad;--line:#2a2733;--card:#1b1922;--brand-soft:#3a1728}
.dark .mlib .search input,.dark .mlib .chips,.dark .mlib .rail button.on,.dark .mcomp .inp,.dark .mcomp .chan label{background:#1b1922}
.dark .mlib .card .snip{background:#221f2b}
.dark .mlib .pill,.dark .mlib .rail button .n,.dark .mlib .src-default{background:#2a2733}
.dark .mlib .modeseg button,.dark .mlib .typed-row{background:#1b1922}
.dark .mcomp .pv-body{background:#141219}
.dark .mcomp .panel .ph,.dark .mcomp .variant .vh{background:#201d28}
@media (max-width: 820px) {
.mlib .lib-grid, .mcomp .ed-grid, .mcomp .grid2, .mlib .cards { grid-template-columns: 1fr !important; }
}
.ab-wrapper {
background: var(--surface);
border-radius: 16px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
margin-bottom: 20px;
}
.ab-wrapper.compact {
padding: 15px;
border-radius: 12px;
}
.ab-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-light);
}
.ab-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 700;
color: var(--text);
}
.ab-title-icon {
font-size: 18px;
}
.ab-count {
display: flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, var(--info-bg) 0%, var(--info-bg) 100%);
padding: 8px 14px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
color: var(--info-text);
}
.ab-count-icon {
font-size: 16px;
}
.ab-count-num {
font-weight: 800;
font-size: 15px;
}
.ab-count-label {
font-weight: 500;
opacity: 0.8;
}
.ab-presets {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.ab-preset {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 14px;
background: var(--bg);
border: 2px solid transparent;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
color: var(--text);
cursor: pointer;
transition: all 0.2s ease;
}
.ab-preset:hover {
background: var(--surface-active);
transform: translateY(-1px);
}
.ab-preset.active {
background: linear-gradient(135deg, var(--info) 0%, var(--secondary-hover) 100%);
color: var(--surface);
border-color: var(--info);
box-shadow: 0 4px 12px rgba(0, 113, 227, 0.3);
}
.ab-preset-custom {
background: linear-gradient(135deg, var(--success-bg) 0%, var(--success-bg) 100%);
color: var(--success);
border-color: var(--success);
}
.ab-preset-custom:hover {
background: linear-gradient(135deg, var(--success-bg) 0%, var(--success) 100%);
}
.ab-preset-custom.active {
background: linear-gradient(135deg, var(--success) 0%, var(--success-text) 100%);
color: var(--surface);
border-color: var(--success);
box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}
.ab-custom-panel {
background: var(--surface-hover);
border-radius: 12px;
padding: 16px;
margin-top: 12px;
}
.ab-rules-container {
margin-bottom: 16px;
}
.ab-rules-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
}
.ab-logic-badge {
background: var(--info-bg);
color: var(--info-text);
padding: 3px 10px;
border-radius: 10px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ab-rules {
display: flex;
flex-direction: column;
gap: 10px;
}
.ab-rule {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
background: var(--surface);
padding: 12px;
border-radius: 10px;
border: 1px solid var(--border);
transition: all 0.2s;
}
.ab-rule:hover {
border-color: var(--border-hover);
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.ab-field,
.ab-operator,
.ab-value {
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 13px;
background: var(--surface);
color: var(--text);
transition: all 0.2s;
}
.ab-field:focus,
.ab-operator:focus,
.ab-value:focus {
outline: none;
border-color: var(--info);
box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);
}
.ab-field {
min-width: 160px;
}
.ab-operator {
min-width: 100px;
}
.ab-value {
min-width: 120px;
}
.ab-value.ab-number {
width: 80px;
min-width: 80px;
}
.ab-suffix {
font-size: 12px;
color: var(--text-secondary);
margin-left: 4px;
}
.ab-value-wrap {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.ab-remove-rule {
width: 28px;
height: 28px;
border: none;
background: var(--danger-bg);
color: var(--danger);
border-radius: 6px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
margin-left: auto;
}
.ab-remove-rule:hover {
background: var(--danger);
color: var(--surface);
}
.ab-add-rule-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
padding: 10px;
margin-top: 10px;
background: transparent;
border: 2px dashed var(--border);
border-radius: 10px;
color: var(--text-secondary);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.ab-add-rule-btn:hover {
border-color: var(--info);
color: var(--info);
background: rgba(0, 113, 227, 0.05);
}
.ab-add-rule-btn span {
font-size: 16px;
font-weight: 700;
}
.ab-multi-select {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ab-multi-option {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
background: var(--bg);
border: 2px solid var(--border);
border-radius: 16px;
font-size: 12px;
font-weight: 600;
color: var(--text);
cursor: pointer;
transition: all 0.2s;
}
.ab-multi-option:hover {
background: var(--surface-active);
}
.ab-multi-option.selected,
.ab-multi-option:has(input:checked) {
background: var(--info);
border-color: var(--info);
color: var(--surface);
}
.ab-multi-option input {
display: none;
}
.ab-user-picker-section {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.ab-section-title {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 12px;
}
.ab-user-search-wrap {
position: relative;
}
.ab-user-search,
.ab-event-search {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: 10px;
font-size: 14px;
background: var(--surface);
transition: all 0.2s;
}
.ab-user-search:focus,
.ab-event-search:focus {
outline: none;
border-color: var(--info);
box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);
}
.ab-user-results,
.ab-event-results {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.12);
max-height: 200px;
overflow-y: auto;
z-index: 100;
display: none;
}
.ab-user-result,
.ab-event-result {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
cursor: pointer;
transition: all 0.15s;
}
.ab-user-result:hover,
.ab-event-result:hover {
background: var(--info-bg);
}
.ab-user-name,
.ab-event-title {
font-weight: 600;
font-size: 13px;
color: var(--text);
}
.ab-user-email,
.ab-event-date {
font-size: 12px;
color: var(--text-secondary);
}
.ab-user-program {
font-size: 11px;
background: var(--info-bg);
color: var(--info-text);
padding: 2px 8px;
border-radius: 10px;
margin-left: auto;
}
.ab-selected-users,
.ab-selected-events {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.ab-user-tag,
.ab-event-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: linear-gradient(135deg, var(--info-bg) 0%, var(--info-bg) 100%);
border: 1px solid var(--info);
border-radius: 16px;
font-size: 12px;
font-weight: 600;
color: var(--info-text);
}
.ab-user-remove,
.ab-event-remove {
width: 18px;
height: 18px;
border: none;
background: var(--info-text);
color: var(--surface);
border-radius: 50%;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.ab-user-remove:hover,
.ab-event-remove:hover {
background: var(--danger);
}
.ab-event-picker {
position: relative;
min-width: 200px;
}
.ab-event-picker .ab-event-search {
width: 100%;
}
.ab-event-picker .ab-event-results {
width: 100%;
}
.ab-event-picker .ab-selected-events {
margin-top: 8px;
}
.ab-event-tag {
background: linear-gradient(135deg, var(--warning-bg) 0%, var(--warning-bg) 100%);
border-color: var(--warning);
color: var(--warning-text);
}
.ab-event-remove {
background: var(--warning-text);
}
.ab-loading {
padding: 12px;
text-align: center;
color: var(--text-secondary);
font-size: 13px;
}
.ab-no-results {
padding: 12px;
text-align: center;
color: var(--text-muted);
font-size: 13px;
}
.ab-error {
padding: 12px;
text-align: center;
color: var(--danger);
font-size: 13px;
}
.ab-hint {
padding: 12px;
text-align: center;
color: var(--text-secondary);
font-size: 12px;
font-style: italic;
}
.ab-note {
font-size: 12px;
color: var(--text-muted);
font-style: italic;
}
@media (max-width: 768px) {
.ab-wrapper {
padding: 15px;
}
.ab-header {
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.ab-count {
align-self: flex-end;
}
.ab-presets {
justify-content: center;
}
.ab-rule {
flex-direction: column;
align-items: stretch;
}
.ab-field,
.ab-operator,
.ab-value {
width: 100%;
min-width: unset;
}
.ab-remove-rule {
align-self: flex-end;
margin-left: 0;
margin-top: 8px;
}
}
@media (prefers-color-scheme: dark) {
}
@keyframes abFadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ab-rule {
animation: abFadeIn 0.2s ease;
}
.ab-user-tag,
.ab-event-tag {
animation: abFadeIn 0.15s ease;
}
.sec-panel .ab-wrapper {
background: transparent;
box-shadow: none;
padding: 0;
margin-bottom: 0;
}
.sec-panel .ab-header {
border-bottom: none;
padding-bottom: 8px;
}
.sec-panel .ab-custom-panel {
background: var(--bg);
}
[x-cloak] { display: none !important; }
.ab-typeahead { display: flex; flex-direction: column; gap: 8px; min-width: 260px; flex: 1 1 260px; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-chip {
display: inline-flex; align-items: center; gap: 6px;
background: var(--primary-soft, rgba(226,27,77,.10)); color: var(--text);
border: 1px solid var(--border); border-radius: 999px;
padding: 4px 6px 4px 12px; font-size: 12px; font-weight: 600;
animation: abFadeIn .12s ease;
}
.ab-chip-x {
border: none; background: rgba(0,0,0,.08); color: var(--text);
width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
font-size: 13px; line-height: 1; display: grid; place-items: center;
transition: background .15s, color .15s;
}
.ab-chip-x:hover { background: var(--primary, var(--info)); color: #fff; }
.ab-ta-box { position: relative; display: flex; align-items: center; }
.ab-ta-icon {
position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
font-size: 13px; opacity: .55; pointer-events: none;
}
.ab-ta-input { width: 100%; padding-left: 32px !important; padding-right: 28px !important; }
.ab-ta-box.is-open .ab-ta-input {
border-color: var(--info); box-shadow: 0 0 0 3px rgba(0,113,227,.10);
}
.ab-ta-clear {
position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
font-size: 14px; color: var(--text-soft, #5b6472); cursor: pointer;
background: rgba(0,0,0,.05); transition: background .15s, color .15s;
}
.ab-ta-clear:hover { background: rgba(0,0,0,.12); color: var(--text); }
.ab-ta-results {
position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
border: 1px solid var(--border); border-radius: 10px;
background: var(--surface);
box-shadow: 0 12px 32px rgba(0,0,0,.14);
max-height: 280px; overflow-y: auto; padding: 5px;
animation: abFadeIn .12s ease;
}
.ab-ta-item {
display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
border: none; background: none; padding: 8px 10px; border-radius: 7px;
font-size: 13px; color: var(--text); cursor: pointer;
}
.ab-ta-item:hover, .ab-ta-item.is-active {
background: var(--info-bg, var(--surface-2, #eef4ff)); color: var(--info, var(--primary));
}
.ab-ta-name { font-weight: 600; line-height: 1.25; }
.ab-ta-sub { font-size: 11px; opacity: .7; line-height: 1.2; }
.ab-ta-item:hover .ab-ta-sub, .ab-ta-item.is-active .ab-ta-sub { opacity: .9; }
.ab-ta-empty { padding: 12px 10px; font-size: 13px; color: var(--text-soft, #5b6472); text-align: center; }
.ab-ta-foot {
margin-top: 4px; padding: 6px 10px; font-size: 11px; color: var(--text-soft, #5b6472);
border-top: 1px dashed var(--border); text-align: center;
}
.ab-ta-results::-webkit-scrollbar { width: 8px; }
.ab-ta-results::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 8px; }
.olami-app .olami-db-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.olami-app .olami-db-header h1 { font-size: 22px; font-weight: 800; color: var(--text); margin: 0; }
.olami-app .olami-db-header .olami-db-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.olami-app .olami-db-header-actions { display: flex; gap: 8px; }
.olami-app .olami-db-add-btn { background: var(--primary); color: #fff; border: none; border-radius: var(--radius); padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.15s; }
.olami-app .olami-db-add-btn:hover { background: var(--primary-hover); }
.olami-db-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; z-index: 90; }
.olami-db-modal { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); width: 100%; max-width: 640px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.olami-db-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-light); }
.olami-db-modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.olami-db-modal-x { background: none; border: none; font-size: 16px; color: var(--text-muted); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.olami-db-modal-x:hover { background: var(--surface-hover); color: var(--text); }
.olami-db-modal-body { padding: 20px; overflow-y: auto; }
.olami-db-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) {
.olami-db-modal-grid { grid-template-columns: 1fr; }
.olami-db-modal-overlay { align-items: flex-end; padding: 0; }
.olami-db-modal { max-width: none; width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
.olami-db-modal-body { padding: 16px; }
.olami-db-modal-grid input, .olami-db-modal-grid select { font-size: 16px; }
}
.olami-db-modal-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.olami-db-modal-grid input, .olami-db-modal-grid select { padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: var(--surface); color: var(--text); font-weight: 400; }
.olami-db-modal-grid input:focus, .olami-db-modal-grid select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.olami-db-modal-err { color: var(--danger); font-size: 12px; margin-top: 10px; }
.olami-db-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border-light); }
.olami-db-modal-cancel { background: var(--surface-active); color: var(--text); border: none; border-radius: var(--radius); padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; }
.olami-db-modal-save { background: var(--primary); color: #fff; border: none; border-radius: var(--radius); padding: 9px 20px; font-size: 13px; font-weight: 600; cursor: pointer; }
.olami-db-modal-save:hover { background: var(--primary-hover); }
.olami-db-modal-save[disabled] { opacity: 0.6; cursor: progress; }
.olami-app .olami-db-stats { display: flex; gap: 8px; flex-wrap: nowrap; margin-bottom: 14px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.olami-app .olami-db-stats::-webkit-scrollbar { display: none; }
.olami-app .olami-db-stat { display: flex; align-items: center; gap: 8px; background: var(--surface, #fff); border: 1px solid var(--border-light, #e5e7eb); border-radius: var(--radius-md, 12px); padding: 8px 14px; cursor: pointer; transition: all 0.15s ease; flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
.olami-app .olami-db-stat:hover { border-color: var(--border-hover, #b0b0b5); box-shadow: var(--shadow-sm); }
.olami-app .olami-db-stat.active-filter { border-color: var(--primary); background: var(--primary-soft); }
.olami-app .olami-db-stat-num { font-size: 18px; font-weight: 700; color: var(--stat-accent, var(--text, #1d1d1f)); line-height: 1; }
.olami-app .olami-db-stat-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-secondary, #86868b); line-height: 1.2; }
.olami-app .olami-db-year-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.olami-app .olami-db-year-tab { display: inline-flex; align-items: center; gap: 6px; background: var(--surface, #fff); border: 1px solid var(--border-light, #e5e7eb); border-radius: var(--radius-md, 12px); padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--text-secondary, #86868b); cursor: pointer; text-decoration: none; transition: all 0.15s ease; }
.olami-app .olami-db-year-tab:hover { border-color: var(--primary); color: var(--primary); }
.olami-app .olami-db-year-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.olami-app .olami-db-year-tab .olami-tab-count { font-size: 11px; font-weight: 700; background: rgba(255,255,255,0.2); padding: 1px 7px; border-radius: 10px; }
.olami-app .olami-db-year-tab:not(.active) .olami-tab-count { background: var(--surface-active, #f3f4f6); }
.olami-app .olami-db-year-tab .olami-tab-hint { font-size: 11px; font-weight: 400; opacity: 0.8; }
.olami-app .os-tag { padding: 3px 8px; border-radius: var(--radius-sm); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; display: inline-block; }
.olami-app .os-tag-green { background: var(--success-bg); color: var(--success-text, var(--success)); }
.olami-app .os-tag-yellow { background: var(--warning-bg); color: var(--warning-text); }
.olami-app .os-tag-blue { background: var(--info-bg); color: var(--info-text); }
.olami-app .os-tag-gray { background: var(--surface-active); color: var(--text-secondary); }
.olami-app .os-tag-olive { background: #556b2f; color: var(--text-inverse, #fff); }
.olami-app .olami-target-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; border: 2px solid rgba(255,255,255,0.8); box-shadow: 0 0 0 1px rgba(0,0,0,0.1); transition: transform 0.15s ease; }
.olami-app .olami-target-cell:hover .olami-target-dot { transform: scale(1.3); }
.olami-app .olami-db-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; background: var(--surface, #fff); padding: 12px 16px; border-radius: var(--radius-md, 12px); border: 1px solid var(--border-light, #e5e7eb); }
.olami-app .olami-db-search-box { position: relative; flex: 1; min-width: 200px; max-width: 320px; }
.olami-app .olami-db-search-box input { width: 100%; padding: 8px 12px 8px 34px; border: 1px solid var(--border, #d2d2d7); border-radius: var(--radius, 8px); font-size: 13px; background: var(--surface-hover, #fafafa); transition: all 0.15s; }
.olami-app .olami-db-search-box input:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-soft); }
.olami-app .olami-db-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted, #9ca3af); font-size: 14px; pointer-events: none; }
.olami-app .olami-db-filter-sep { width: 1px; height: 28px; background: var(--border, #d2d2d7); }
.olami-app .olami-db-filter-group { display: flex; align-items: center; gap: 6px; }
.olami-app .olami-db-filter-group label { font-size: 11px; font-weight: 600; color: var(--text-secondary, #86868b); text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; }
.olami-app .olami-db-filter { padding: 6px 28px 6px 10px; border: 1px solid var(--border, #d2d2d7); border-radius: 6px; font-size: 13px; background: var(--surface-hover, #fafafa); color: var(--text, #1d1d1f); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
.olami-app .olami-db-filter:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.olami-app .olami-db-filter.filter-active { border-color: var(--primary); background-color: var(--primary-soft); font-weight: 600; }
.olami-app .olami-db-clear-filters { padding: 6px 10px; border: none; background: transparent; color: var(--primary); font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 6px; }
.olami-app .olami-db-clear-filters:hover { background: var(--primary-soft); }
.olami-app .olami-db-table-card { background: var(--surface, #fff); border: 1px solid var(--border-light, #e5e7eb); border-radius: var(--radius-md, 12px); overflow: hidden; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.08)); }
.olami-app .olami-db-table-card .table-wrap { overflow-x: auto; overflow-y: visible; }
.olami-app .olami-db-table-card table { width: 100%; border-collapse: collapse; font-size: 13px; border: none; border-spacing: 0; }
.olami-app .olami-db-table-card table, .olami-app .olami-db-table-card table th, .olami-app .olami-db-table-card table td { border: none; box-shadow: none; }
.olami-app .olami-db-table-card thead th { padding: 10px 12px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary, #86868b); background: var(--surface-hover, #fafafa); border-bottom: 2px solid var(--border, #d2d2d7); white-space: nowrap; position: sticky; top: 0; z-index: 2; cursor: pointer; user-select: none; }
.olami-app .olami-db-table-card thead th:hover { color: var(--text, #1d1d1f); }
.olami-app .olami-db-table-card tbody td { padding: 8px 12px; border-bottom: 1px solid var(--border-light, #f1f5f9); white-space: nowrap; vertical-align: middle; }
.olami-app .olami-db-table-card tbody tr:hover td { background: var(--surface-hover, #fafafa); }
.olami-app .olami-sort-arrow { font-size: 10px; margin-left: 4px; opacity: 0.3; }
.olami-app th.sorted-asc .olami-sort-arrow, .olami-app th.sorted-desc .olami-sort-arrow { opacity: 1; color: var(--primary); }
.olami-app .olami-db-table-card thead th:nth-child(1), .olami-app .olami-db-table-card thead th:nth-child(2), .olami-app .olami-db-table-card thead th:nth-child(3) { position: sticky; z-index: 5; background: var(--surface-hover, #fafafa); }
.olami-app .olami-db-table-card thead th:nth-child(1) { left: 0; width: 36px; }
.olami-app .olami-db-table-card thead th:nth-child(2) { left: 36px; width: 40px; }
.olami-app .olami-db-table-card thead th:nth-child(3) { left: 76px; border-right: 2px solid var(--border, #d2d2d7); }
.olami-app .olami-db-table-card tbody td:nth-child(1), .olami-app .olami-db-table-card tbody td:nth-child(2), .olami-app .olami-db-table-card tbody td:nth-child(3) { position: sticky; z-index: 1; background: var(--surface, #fff); }
.olami-app .olami-db-table-card tbody td:nth-child(1) { left: 0; }
.olami-app .olami-db-table-card tbody td:nth-child(2) { left: 36px; }
.olami-app .olami-db-table-card tbody td:nth-child(3) { left: 76px; border-right: 2px solid var(--border, #d2d2d7); }
.olami-app .olami-db-table-card tbody tr:hover td:nth-child(1), .olami-app .olami-db-table-card tbody tr:hover td:nth-child(2), .olami-app .olami-db-table-card tbody tr:hover td:nth-child(3) { background: var(--surface-hover, #fafafa); }
.olami-app .olami-db-table-card th:nth-child(1), .olami-app .olami-db-table-card td:nth-child(1) { width: 36px; text-align: center; }
.olami-app .olami-db-table-card.no-select-col th:nth-child(1),
.olami-app .olami-db-table-card.no-select-col td:nth-child(1) { width: auto; text-align: left; }
.olami-app .olami-db-table-card th:nth-child(2), .olami-app .olami-db-table-card td:nth-child(2) { width: 40px; text-align: center; }
.olami-app .olami-db-table-card th:nth-child(3), .olami-app .olami-db-table-card td:nth-child(3) { width: 272px; min-width: 220px; max-width: 272px; white-space: nowrap; }
.olami-app .olami-db-table-card input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.olami-app .olami-name-cell { position: relative; display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; min-width: 0; max-width: 248px; }
.olami-app .olami-name-cell > .olami-name-main { position: relative; flex: 1 1 auto; min-width: 0; }
.olami-app .olami-name-main > .olami-edit { display: block; }
.olami-app .olami-name-cell .olami-editable { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.olami-app .sgx-tags { flex: none; display: inline-flex; gap: 3px; margin-left: auto; }
.olami-app .sgx-tag { --tc: var(--text-muted); width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 6px; font-size: 11px; line-height: 1; cursor: help;
background: color-mix(in srgb, var(--tc) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 32%, transparent); }
.olami-app .sgx-tag:focus-visible, .olami-app .sgx-key:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.olami-app .sgx-key { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 3px; border-radius: 50%; vertical-align: 1px;
border: 1px solid var(--border); color: var(--text-muted); font-size: 9.5px; font-weight: 800; cursor: help; text-transform: none; }
.olami-app .sgx-key:hover { color: var(--primary); border-color: var(--primary); }
.olami-app .sgx-tag.is-need { --tc: var(--danger); }
.olami-app .sgx-tag.is-low { --tc: var(--warning); }
.olami-app .sgx-tag.is-new { --tc: var(--success); }
.olami-app .olami-avatar-sm { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }
.olami-app .olami-name-text { font-weight: 600; border-bottom: 1px dashed var(--border, #d2d2d7); cursor: pointer; }
.olami-app .olami-name-text:hover { color: var(--primary); }
.olami-app .olami-name-actions { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; padding: 2px;
border-radius: 8px; background: var(--surface-hover); box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.olami-app .olami-db-table-card tbody tr:hover .olami-name-actions, .olami-app .olami-name-actions:focus-within { opacity: 1; pointer-events: auto; }
.olami-app .olami-name-actions button, .olami-app .olami-name-actions a { border: 0; padding: 0; width: 24px; height: 24px; border-radius: 6px; background: var(--surface-active, #f0f0f0); font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.olami-app .olami-name-actions button:hover, .olami-app .olami-name-actions a:hover { background: var(--border, #d2d2d7); }
.olami-app .olami-email-link { color: var(--info, #3b82f6); cursor: pointer; }
.olami-app .olami-email-link:hover { text-decoration: underline; }
.olami-app .olami-wa-link { color: #25d366; text-decoration: none; font-weight: 600; }
.olami-app .olami-wa-link:hover { opacity: 0.8; }
.olami-app .olami-editable { cursor: pointer; border-radius: 4px; padding: 2px 4px; }
.olami-app .olami-editable:hover { background: var(--warning-bg, #fffbeb); }
.olami-app .olami-edit-input { border: 2px solid var(--secondary, #0071e3); border-radius: 4px; padding: 3px 6px; font-size: 13px; width: 100%; min-width: 90px; }
.olami-app .olami-edit { position: relative; display: inline-block; min-width: 36px; max-width: 100%; vertical-align: middle; }
.olami-app .olami-editable.is-editing { visibility: hidden; }
.olami-app .olami-edit > .olami-edit-input { position: absolute; left: -2px; top: 50%; transform: translateY(-50%); z-index: 4;
width: max(calc(100% + 4px), 180px); background: var(--surface); color: var(--text); box-shadow: var(--shadow-md); }
.olami-app :where(button[data-pick]) { font: inherit; color: inherit; border: 0; margin: 0; padding: 0; background: none; cursor: pointer; text-align: left; }
.olami-app .olami-target-dot[data-pick] { padding: 0; cursor: pointer; }
.olami-app button.sgx-miss { padding: 2px 4px; border-radius: 4px; }
.olami-app button.sgx-miss:hover { background: var(--warning-bg); }
.olami-app [data-pick].is-saving { animation: db-pick-saving .6s ease-in-out infinite alternate; }
@keyframes db-pick-saving { to { opacity: .4; } }
.olami-app .olami-att-wrap { display: flex; align-items: center; gap: 6px; min-width: 100px; }
.olami-app .olami-att-bar { flex: 1; height: 6px; background: var(--surface-active, #f0f0f0); border-radius: 3px; overflow: hidden; }
.olami-app .olami-att-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; }
.olami-app .olami-att-pct { font-size: 12px; font-weight: 700; min-width: 32px; text-align: right; }
.olami-app .olami-db-load-actions { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; border-top: 1px solid var(--border-light, #e5e7eb); background: var(--surface-hover, #fafafa); }
.olami-app .olami-db-load-status { font-size: 13px; color: var(--text-secondary, #86868b); }
.olami-app .olami-avatar-btn { border: none; cursor: pointer; padding: 0; }
.olami-app .olami-avatar-btn:hover { box-shadow: 0 0 0 2px var(--primary-soft); }
.olami-app .olami-name-actions button { background: none; border: none; cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 6px; opacity: .65; }
.olami-app .olami-name-actions button:hover { opacity: 1; background: var(--surface-hover); }
.olami-app .olami-name-actions a { width: auto; height: auto; background: none; border: none; font-size: 13px; padding: 2px 4px; border-radius: 6px; opacity: .65; text-decoration: none; }
.olami-app .olami-name-actions a:hover { opacity: 1; background: var(--surface-hover); }
.olami-app .olami-call-link { text-decoration: none; margin-left: 2px; }
.olami-avatar-md { width: 46px; height: 46px; border-radius: 11px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex: none; }
.olami-db-cardbtn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 600; text-decoration: none; border: 1px solid var(--border-light); background: var(--surface); color: var(--text); cursor: pointer; }
.olami-db-cardbtn.wa { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.olami-db-cardbtn.call { background: #eff6ff; border-color: #93c5fd; color: #1e40af; }
.olami-db-cardbtn.mail { background: #fef3f2; border-color: #fecaca; color: #9f1239; }
.olami-db-cardbtn.vcf { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.olami-db-cards { display: none; }
@media (max-width: 768px) {
.olami-app .olami-db-table-card { display: none; }
.olami-app .olami-db-header { margin-bottom: 8px; }
.olami-app .olami-db-header h1 { font-size: 22px; margin: 0; }
.olami-app .olami-db-sub { font-size: 11.5px; margin-top: 1px; }
.olami-app .olami-db-segment { margin-bottom: 10px; gap: 6px; }
.olami-app .olami-db-year-tab { padding: 7px 11px; font-size: 12.5px; }
.olami-app .olami-db-add-btn { margin-left: auto; padding: 7px 12px; font-size: 12.5px; white-space: nowrap; }
.olami-db-cards { display: flex; flex-direction: column; gap: 10px; padding-bottom: 72px; }
.olami-db-card { background: var(--surface); border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.olami-db-card { content-visibility: auto; contain-intrinsic-size: auto 132px; }
.olami-db-card-main { box-sizing: border-box; }
.olami-db-card-main { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 12px; background: none; border: none; cursor: pointer; text-align: left; }
.olami-db-card-id { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.olami-db-card-name { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 700; color: var(--text); }
.olami-db-card-name .olami-target-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.olami-db-card-name .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.olami-db-card-name .sgx-tags { margin-left: 0; }
.olami-db-card-meta { display: flex; gap: 4px; flex-wrap: wrap; }
.olami-db-card-meta .os-tag { font-size: 9px; padding: 1px 5px; }
.olami-db-card-att { font-size: 14px; font-weight: 800; flex: none; }
.olami-db-card-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding: 0 12px 10px; }
.olami-db-card-actions .olami-db-cardbtn { flex-direction: column; justify-content: center; gap: 3px; min-height: 44px;
padding: 5px 2px; font-size: 10.5px; line-height: 1.1; text-align: center; }
.olami-db-card-actions .olami-db-cardbtn .ic { font-size: 15px; line-height: 1; }
}
@media (max-width: 560px) {
.olami-db-modal-grid { grid-template-columns: 1fr !important; }
}
.db-pick { z-index: var(--z-dropdown); min-width: 200px; max-width: 290px; max-height: min(340px, 60vh); overflow-y: auto;
padding: 6px; background: var(--surface); color: var(--text); border: 1px solid var(--border-light); border-radius: 12px;
box-shadow: var(--shadow-xl); font-size: 13px; outline: none; }
.db-pick-h { padding: 5px 8px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.db-pick-find { width: 100%; margin: 2px 0 6px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px;
font: inherit; background: var(--surface); color: var(--text); outline: none; }
.db-pick-find:focus { border-color: var(--primary); }
.db-pick-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border: 0; border-radius: 8px;
background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.db-pick-opt:hover, .db-pick-opt:focus-visible { background: var(--surface-hover); outline: none; }
.db-pick-opt.is-on { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.db-pick-opt .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--c, var(--border));
box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, var(--border)) 22%, transparent); }
.db-pick-opt .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.db-pick-opt .hint { flex: none; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.db-pick-opt .tick { flex: none; width: 14px; text-align: center; color: var(--primary); font-weight: 800; visibility: hidden; }
.db-pick-opt.is-on .tick { visibility: visible; }
.db-pick-t { transition: opacity .12s ease, transform .12s ease; }
.db-pick-from { opacity: 0; transform: translateY(-4px); }
.db-pick-to { opacity: 1; transform: none; }
.db-tip { z-index: var(--z-dropdown); max-width: 280px; padding: 7px 10px; border-radius: 8px; pointer-events: none;
background: var(--text); color: var(--surface); font-size: 12px; font-weight: 600; line-height: 1.45; white-space: pre-line;
box-shadow: var(--shadow-lg); }
@media (prefers-reduced-motion: reduce) {
.db-pick-t { transition: none; }
.olami-app [data-pick].is-saving { animation: none; opacity: .6; }
}
.snp-wrap {
--snp-label: color-mix(in srgb, var(--text) 64%, var(--surface));
display: flex; flex-direction: column; gap: 12px;
}
[data-note-cat] { --cat: var(--text-secondary); }
[data-note-cat="growth"] { --cat: var(--success); }
[data-note-cat="recruiting"] { --cat: var(--info); }
[data-note-cat="meeting"] { --cat: var(--secondary); }
[data-note-cat="touchpoint"] { --cat: var(--warning); }
[data-note-cat="dropout"] { --cat: var(--danger); }
.snp-wrap .snp-add { padding: 12px; border: 1px solid var(--border-light); border-radius: 12px; background: var(--surface); }
.snp-wrap .snp-input { box-sizing: border-box; width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
background: var(--surface); color: var(--text); font-family: inherit; font-size: 13px; resize: vertical;
transition: border-color .15s ease, box-shadow .15s ease; }
.snp-wrap .snp-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.snp-wrap .snp-add-row { display: flex; gap: 8px; margin-top: 8px; }
.snp-wrap .snp-cat { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 12px; }
.snp-wrap .snp-btn { min-width: 84px; padding: 7px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; transition: transform .12s ease, filter .15s ease; }
.snp-wrap .snp-btn:active { transform: scale(.97); }
.snp-wrap .snp-btn-primary { margin-left: auto; border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.snp-wrap .snp-btn-primary:hover, .snp-wrap .snp-btn-primary:focus-visible { filter: brightness(1.05); }
.snp-wrap .snp-btn[disabled] { opacity: .7; cursor: progress; }
.snp-wrap.is-composer .snp-add { display: flex; align-items: flex-start; gap: 8px; padding: 0; border: 0; background: none; }
.snp-wrap.is-composer .snp-input { min-height: 36px; padding: 8px 11px; resize: none; }
.snp-wrap.is-composer .snp-add-row { margin: 0; }
.snp-wrap.is-composer .snp-btn { height: 36px; min-width: 64px; padding: 0 14px; }
.snp-wrap .snp-quick{display:flex;flex-direction:column;gap:8px;}
.snp-wrap .snp-starters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:1px 0 2px;}
.snp-wrap .snp-starters::-webkit-scrollbar{display:none;}
.snp-wrap .snp-starter{flex:none;height:34px;padding:0 12px;border:1px solid var(--border-light);border-radius:var(--radius-full);background:var(--surface-hover);
font:inherit;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;transition:transform .12s ease, background .12s ease, border-color .12s ease;
animation:snpPop .34s cubic-bezier(.3, 1.5, .5, 1) backwards;}
.snp-wrap .snp-starter:nth-child(2){animation-delay:.03s;} .snp-wrap .snp-starter:nth-child(3){animation-delay:.06s;}
.snp-wrap .snp-starter:nth-child(4){animation-delay:.09s;} .snp-wrap .snp-starter:nth-child(n+5){animation-delay:.12s;}
.snp-wrap .snp-starter:hover, .snp-wrap .snp-starter:focus-visible{border-color:var(--border);}
.snp-wrap .snp-starter:active{transform:scale(.93);background:var(--primary-soft);border-color:var(--primary);}
.snp-wrap .snp-kinds.is-pick .snp-kind{height:32px;}
.snp-wrap.is-quick{gap:10px;}
.snp-wrap.is-quick .snp-add{display:contents;}
.snp-wrap.is-quick .snp-input{order:1;min-height:92px;padding:12px;border-radius:12px;font-size:16px;}
.snp-wrap.is-quick .snp-quick{order:2;}
.snp-wrap.is-quick .snp-add-row{order:3;margin:0;}
.snp-wrap.is-quick .snp-btn{width:100%;height:50px;margin:0;border-radius:14px;font-size:15px;font-weight:800;}
.snp-wrap.is-composer:not(.is-quick) .snp-quick{margin-top:2px;}
.snp-wrap .snp-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.snp-wrap .snp-kind { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--border-light);
border-radius: var(--radius-full); background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text); cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease; }
.snp-wrap .snp-kind b { font-size: 11px; font-weight: 800; color: var(--snp-label); }
.snp-wrap .snp-kind[data-note-cat]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cat); }
.snp-wrap .snp-kind:hover, .snp-wrap .snp-kind:focus-visible { border-color: var(--border); }
.snp-wrap .snp-kind.is-on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.snp-wrap .snp-kind.is-on b { color: var(--primary); }
.snp-wrap .snp-list { display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow-y: auto; }
.snp-wrap .snp-note { display: flex; overflow: hidden; border: 1px solid var(--border-light); border-radius: 10px; background: var(--surface);
animation: snpIn .22s cubic-bezier(.2, .8, .2, 1) backwards; }
.snp-wrap .snp-note.is-pinned { border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.snp-wrap .snp-note.is-readonly { background: color-mix(in srgb, var(--surface) 93%, var(--border-light)); }
.snp-wrap .snp-note-bar { flex-shrink: 0; width: 4px; background: var(--cat); }
.snp-wrap .snp-note-body { flex: 1; min-width: 0; padding: 10px 12px; }
.snp-wrap .snp-note-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 4px; }
.snp-wrap .snp-cat-badge { padding: 1px 7px; border-radius: 20px; background: color-mix(in srgb, var(--cat) 14%, var(--surface));
color: color-mix(in srgb, var(--cat) 55%, var(--text)); font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.snp-wrap .snp-note-author { font-size: 12px; font-weight: 600; color: var(--text); }
.snp-wrap .snp-note-date, .snp-wrap .snp-pinned-tag { font-size: 11px; color: var(--snp-label); }
.snp-wrap .snp-src-tag { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--snp-label); }
.snp-wrap .snp-note-text { font-size: 13px; line-height: 1.45; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.snp-wrap .snp-note-actions { display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.snp-wrap .snp-note-actions button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 8px;
background: none; color: var(--snp-label); font-size: 13px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.snp-wrap .snp-note-actions button:hover, .snp-wrap .snp-note-actions button:focus-visible { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.snp-wrap .snp-empty { padding: 28px; font-size: 13px; text-align: center; color: var(--snp-label); }
@keyframes snpIn { from { opacity: 0; transform: translateY(4px); } }
@keyframes snpPop { from { opacity: 0; transform: scale(.85); } }
@media (max-width: 640px) {
.snp-wrap .snp-input, .snp-wrap .snp-cat { font-size: 16px; }
.snp-wrap .snp-cat { height: 44px; }
.snp-wrap .snp-btn { min-height: 44px; }
.snp-wrap .snp-kinds { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.snp-wrap .snp-kinds::-webkit-scrollbar { display: none; }
.snp-wrap .snp-kind { flex: none; height: 44px; }
.snp-wrap .snp-starter { height: 44px; }
.snp-wrap .snp-note-actions button { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .snp-wrap .snp-note, .snp-wrap .snp-starter { animation: none; } }
.snp-wrap.is-loading .snp-add { height: 118px; }
.snp-wrap .snp-skel { height: 62px; border-radius: 10px; background: linear-gradient(90deg, var(--surface-active), var(--surface-hover), var(--surface-active)) 0 0 / 200% 100%;
animation: snpShimmer 1.1s ease-in-out infinite; }
@keyframes snpShimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .snp-wrap .snp-skel { animation: none; } }
.osm-overlay{
background:
radial-gradient(680px 380px at 84% -12%, color-mix(in srgb, var(--phase-color, var(--primary)) 30%, transparent), transparent 70%),
radial-gradient(560px 380px at -12% 112%, color-mix(in srgb, var(--phase-color, var(--primary)) 20%, transparent), transparent 70%),
rgba(16, 10, 22, .52);
transition:opacity .18s ease;
}
.osm-overlay.is-leaving{opacity:0;}
.osm-overlay.is-leaving .osm-modal{transform:translateY(10px) scale(.98);}
body:has(.osm-overlay){overflow:hidden;}
.osm-modal{--label:color-mix(in srgb, var(--text) 64%, var(--surface));--link:color-mix(in srgb, var(--primary) 70%, var(--text));}
.osm-modal{width:820px;max-width:96vw;max-height:88vh;padding:0;overflow:hidden;border-radius:20px;display:flex;flex-direction:column;position:relative;animation:osmSettle .42s cubic-bezier(.16, 1, .3, 1) backwards;transition:transform .18s ease;}
.osm-grid2{display:grid;grid-template-columns:260px minmax(0, 1fr);flex:1 1 auto;min-height:0;}
.osm-xbar{position:sticky;top:0;height:0;z-index:4;}
.osm-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;border-radius:var(--radius-full);background:color-mix(in srgb, var(--text) 6%, transparent);color:var(--text-secondary);font-size:14px;cursor:pointer;display:grid;place-items:center;transition:background .12s ease, color .12s ease, transform .12s ease;}
.osm-x:hover, .osm-x:focus-visible{color:var(--text);background:color-mix(in srgb, var(--text) 10%, transparent);}
.osm-x:active{transform:scale(.92);}
.osm-rail{
position:relative;display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto;
padding:16px 16px 14px;border-right:1px solid var(--border-light);
background:linear-gradient(180deg, color-mix(in srgb, var(--phase-color, var(--primary)) 10%, var(--surface)), color-mix(in srgb, var(--phase-color, var(--primary)) 3%, var(--surface)));
}
.osm-rail > *{flex-shrink:0;animation:osmSlide .42s cubic-bezier(.16, 1, .3, 1) backwards;}
.osm-rail > :nth-child(2){animation-delay:.03s;} .osm-rail > :nth-child(3){animation-delay:.06s;}
.osm-rail > :nth-child(4){animation-delay:.09s;} .osm-rail > :nth-child(5){animation-delay:.12s;}
.osm-rail > :nth-child(6){animation-delay:.15s;} .osm-rail > :nth-child(n+7){animation-delay:.18s;}
.osm-who{display:flex;align-items:center;gap:12px;}
.osm-idtxt{min-width:0;}
.osm-avatar{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--text-inverse);font-weight:800;font-size:16px;flex:none;box-shadow:0 8px 20px -8px rgba(0, 0, 0, .35);}
.osm-name{margin:0;font-size:18px;font-weight:700;letter-spacing:-.3px;line-height:1.15;color:var(--text);overflow-wrap:anywhere;}
.osm-sub{margin-top:2px;font-size:12px;font-weight:600;color:var(--label);overflow-wrap:anywhere;}
.osm-status{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:6px;}
.osm-phase{position:relative;display:inline-flex;min-width:0;}
.osm-status .osm-phase, .osm-status .osm-phase select{width:100%;max-width:none;}
.osm-phase select{appearance:none;-webkit-appearance:none;background:var(--phase-color, var(--primary));color:var(--text-inverse);border:0;height:32px;font-size:12px;font-weight:700;padding:0 24px 0 10px;border-radius:var(--radius-full);cursor:pointer;max-width:220px;text-overflow:ellipsis;transition:filter .12s ease, transform .12s ease;}
.osm-phase select:hover, .osm-phase select:focus-visible{filter:brightness(1.06);outline:none;}
.osm-phase select:active{transform:scale(.98);}
.osm-phase.osm-target select{background:var(--chip-color, var(--text-muted));}
.osm-phase::after{content:"▾";position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--text-inverse);font-size:11px;pointer-events:none;opacity:.9;}
.osm-phase option{background:var(--surface);color:var(--text);}
.osm-mentor{grid-column:1 / -1;display:flex;align-items:center;gap:8px;height:34px;padding:0 4px 0 12px;border:1px solid var(--border-light);border-radius:var(--radius-full);background:var(--surface);cursor:pointer;transition:border-color .12s ease, box-shadow .12s ease;}
.osm-mentor:hover{border-color:var(--border);}
.osm-mentor:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.osm-mentor > span{flex:none;font-size:11.5px;font-weight:700;color:var(--label);}
.osm-pick{flex:1;min-width:0;height:30px;padding:0 24px 0 4px;border:0;appearance:none;-webkit-appearance:none;background-color:transparent;
background-image:linear-gradient(45deg, transparent 50%, var(--label) 50%), linear-gradient(135deg, var(--label) 50%, transparent 50%);
background-position:calc(100% - 14px) 55%, calc(100% - 10px) 55%;background-size:4px 4px;background-repeat:no-repeat;
font:inherit;font-size:12.5px;font-weight:700;color:var(--text);cursor:pointer;text-overflow:ellipsis;}
.osm-pick:focus{outline:none;}
.osm-badges{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.osm-chip{display:inline-flex;align-items:center;gap:5px;height:26px;font-size:11.5px;font-weight:700;padding:0 10px;border-radius:var(--radius-full);white-space:nowrap;background:color-mix(in srgb, var(--text) 6%, transparent);color:var(--text);}
.osm-chip-host{background:var(--success-bg);color:var(--success-text);}
.osm-chip-off{background:var(--warning-bg);color:var(--warning-text);}
.osm-yrpill{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--radius-full);font-size:10.5px;font-weight:800;background:var(--info-bg);color:var(--info-text);}
.osm-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 12px;border-radius:10px;border:1px solid transparent;background:color-mix(in srgb, var(--text) 6%, transparent);color:var(--text);font-size:13px;font-weight:700;font-family:inherit;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .12s ease, transform .12s ease, filter .12s ease;}
.osm-btn:hover{background:color-mix(in srgb, var(--text) 10%, transparent);}
.osm-btn:active{transform:scale(.97);}
.osm-btn.wa{background:var(--wa);border-color:var(--wa);color:var(--wa-ink);}
.osm-btn.wa:hover{filter:brightness(.96);}
.osm-btn.quiet{background:transparent;border-color:var(--border-light);color:var(--text-secondary);}
.osm-btn.quiet:hover{color:var(--text);background:color-mix(in srgb, var(--text) 4%, transparent);}
.osm-btn.icon{width:34px;padding:0;font-size:15px;}
.osm-btn .car{font-size:10px;opacity:.7;}
.osm-reach{display:grid;gap:6px;}
.osm-reach-wa, .sc-msg.osm-reach-wa > .osm-btn{width:100%;}
.sc-msg.osm-reach-wa{display:flex;}
.osm-reach3{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0, 1fr);gap:6px;}
.osm-reach3 > .sc-msg{display:flex;min-width:0;}
.osm-reach3 .osm-btn{width:100%;min-width:0;height:50px;flex-direction:column;gap:1px;padding:0 4px;font-size:11.5px;}
.osm-pin{display:flex;gap:8px;align-items:flex-start;padding:9px 11px;border-radius:var(--radius-md);border:1px solid color-mix(in srgb, var(--warning) 35%, var(--surface));background:var(--warning-bg);}
.osm-pin-ic{font-size:13px;line-height:1.4;}
.osm-pin-txt{min-width:0;}
.osm-pin p{margin:0;font-size:12.5px;font-weight:600;line-height:1.4;color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.osm-pin small{display:block;margin-top:3px;font-size:11px;font-weight:600;color:var(--label);}
.osm-pin-more{padding:0;border:0;background:none;font:inherit;font-weight:800;color:var(--link);cursor:pointer;}
.osm-glance{display:grid;gap:10px;padding:12px;border:1px solid var(--border-light);border-radius:var(--radius-md);background:color-mix(in srgb, var(--surface) 72%, transparent);}
.osm-stats{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px 8px;}
.osm-stat{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;}
.osm-stat-num{font-size:18px;font-weight:800;letter-spacing:-.3px;line-height:1;color:var(--text);}
.osm-stat-lbl{font-size:11.5px;font-weight:600;color:var(--label);line-height:1.1;}
.osm-ring{--p:0;--c:var(--text-muted);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;background:conic-gradient(var(--c) calc(var(--p) * 1%), color-mix(in srgb, var(--text) 10%, transparent) 0);}
.osm-ring i{width:23px;height:23px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:10px;color:var(--text);}
.osm-when{display:grid;gap:5px;padding-top:9px;border-top:1px solid var(--border-light);}
.osm-when-row{display:flex;align-items:baseline;gap:6px;min-width:0;white-space:nowrap;}
.osm-when-row span{flex:none;font-size:11px;font-weight:700;color:var(--label);}
.osm-when-row b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;font-weight:700;color:var(--text);}
.osm-when-row i{flex:none;margin-left:auto;font-style:normal;font-size:11.5px;font-weight:600;color:var(--label);}
.osm-foot{display:flex;align-items:stretch;gap:4px;margin-top:auto;padding-top:10px;border-top:1px solid var(--border-light);}
.osm-tile{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:46px;border-radius:10px;font-size:11px;font-weight:600;color:var(--text);text-decoration:none;transition:background .12s ease, transform .12s ease;}
.osm-tile span{font-size:15px;line-height:1.2;}
.osm-tile:hover, .osm-tile:focus-visible{background:color-mix(in srgb, var(--text) 6%, transparent);}
.osm-tile:active{transform:scale(.95);}
.osm-more{position:relative;display:flex;}
.osm-more-btn{height:auto;min-height:46px;}
.osm-menu{display:none;position:absolute;right:0;bottom:calc(100% + 6px);z-index:50;min-width:220px;padding:6px;border:1px solid var(--border-light);border-radius:12px;background:var(--surface);box-shadow:0 14px 40px rgba(0, 0, 0, .18);}
.osm-menu.is-open{display:flex;flex-direction:column;animation:osmPop .14s cubic-bezier(.2, .8, .2, 1) backwards;}
.osm-menu button{display:flex;align-items:center;gap:8px;min-height:34px;padding:0 10px;border:0;border-radius:8px;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--text);text-align:left;cursor:pointer;}
.osm-menu button:hover, .osm-menu button:focus-visible{background:var(--surface-active);}
.osm-menu .danger{color:var(--danger-text);}
.osm-main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:auto;}
.osm-tabsrow{padding:12px 20px 0;animation:osmIn .42s cubic-bezier(.16, 1, .3, 1) .02s backwards;}
.osm-tabsrow .thrive-tabs{padding:4px;}
.osm-tabsrow .thrive-tab{padding:7px 14px;font-size:13px;}
.osm-body{padding:14px 20px 20px;display:flex;flex-direction:column;gap:12px;}
.osm-tabpane{display:flex;flex-direction:column;gap:12px;animation:osmPane .26s cubic-bezier(.16, 1, .3, 1) backwards;}
.osm-tabpane > *{animation:osmIn .46s cubic-bezier(.16, 1, .3, 1) .05s backwards;}
.osm-tabpane > :nth-child(2){animation-delay:.1s;} .osm-tabpane > :nth-child(3){animation-delay:.15s;} .osm-tabpane > :nth-child(n+4){animation-delay:.2s;}
.osm-modal.is-ready .osm-tabpane > *{animation-duration:.34s;animation-delay:0s;}
.osm-modal.is-ready .osm-tabpane > :nth-child(2){animation-delay:.04s;}
.osm-modal.is-ready .osm-tabpane > :nth-child(n+3){animation-delay:.08s;}
.osm-card{border:1px solid var(--border-light);border-radius:14px;padding:12px 14px;}
.osm-card h4{margin:0 0 10px;font-size:12.5px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px;}
.osm-card h4 .osm-h-note{margin-left:auto;font-weight:600;font-size:11.5px;color:var(--label);}
.osm-edit-toggle{margin-left:auto;height:32px;padding:0 12px;border:1px solid var(--border-light);background:var(--surface);color:var(--text-secondary);font-size:12px;font-weight:700;border-radius:9px;cursor:pointer;font-family:inherit;transition:color .12s ease, border-color .12s ease, transform .12s ease;}
.osm-h-note + .osm-edit-toggle{margin-left:0;}
.osm-edit-toggle:hover{color:var(--text);}
.osm-edit-toggle:active{transform:scale(.97);}
.osm-body.is-editing .osm-edit-toggle{color:var(--primary);border-color:var(--primary);}
.osm-goals{border-color:color-mix(in srgb, var(--primary) 16%, var(--border-light));background:color-mix(in srgb, var(--primary) 3%, var(--surface));}
.osm-goal{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:center;gap:4px 12px;padding:9px 0;border-top:1px solid var(--border-light);}
.osm-goal:first-of-type{border-top:0;padding-top:0;}
.osm-goal-cat{grid-column:1 / -1;justify-self:start;padding:2px 9px;border-radius:var(--radius-full);background:color-mix(in srgb, var(--primary) 10%, var(--surface));color:color-mix(in srgb, var(--primary) 62%, var(--text));font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;}
.osm-goal-txt{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--text);}
.osm-goal-by{font-size:11.5px;font-weight:600;color:var(--label);white-space:nowrap;}
.osm-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px 18px;}
.osm-field{min-width:0;}
.osm-field-wide{grid-column:1 / -1;}
.osm-field label{display:block;font-size:11.5px;font-weight:600;color:var(--label);margin-bottom:2px;}
.osm-field > span{display:block;font-size:13.5px;font-weight:600;color:var(--text);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.osm-field a{color:var(--link);text-decoration:none;font-weight:600;}
.osm-select{display:block;width:100%;height:34px;padding:0 10px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;}
.osm-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.osm-empty{text-align:center;color:var(--label);font-size:13px;padding:22px 0;}
.osm-lock{font-size:12.5px;color:var(--text-secondary);}
.osm-dgroup + .osm-dgroup{margin-top:12px;padding-top:10px;border-top:1px solid var(--border-light);}
.osm-dgroup h5{margin:0 0 8px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--label);}
.osm-missing{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;padding-top:10px;border-top:1px dashed var(--border-light);}
.osm-missing-lbl{margin-right:2px;font-size:11.5px;font-weight:700;color:var(--label);}
.osm-missing-chip{padding:2px 9px;border-radius:var(--radius-full);background:color-mix(in srgb, var(--text) 5%, var(--surface));font-size:11.5px;font-weight:600;color:var(--text);}
.osm-missing-fill{margin-left:auto;height:30px;padding:0 12px;border:1px solid var(--border-light);border-radius:9px;background:var(--surface);font:inherit;font-size:12px;font-weight:700;color:var(--link);cursor:pointer;transition:border-color .12s ease, transform .12s ease;}
.osm-missing-fill:hover, .osm-missing-fill:focus-visible{border-color:var(--primary);}
.osm-missing-fill:active{transform:scale(.97);}
.osm-npeek-all{margin-left:auto;padding:0;border:0;background:none;font:inherit;font-size:12px;font-weight:700;color:var(--link);cursor:pointer;}
.osm-npeek-all:hover, .osm-npeek-all:focus-visible{text-decoration:underline;}
.osm-npeek-list{display:flex;flex-direction:column;gap:6px;margin-top:10px;}
.osm-nrow{display:block;width:100%;padding:8px 10px 8px 12px;border:1px solid var(--border-light);border-left:3px solid var(--cat);border-radius:10px;background:var(--surface);font:inherit;text-align:left;cursor:pointer;transition:background .12s ease, transform .12s ease;}
.osm-nrow:hover, .osm-nrow:focus-visible{background:var(--surface-hover);}
.osm-nrow:active{transform:scale(.99);}
.osm-nrow-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--label);}
.osm-nrow-meta em{padding:0 7px;border-radius:20px;background:color-mix(in srgb, var(--cat) 14%, var(--surface));color:color-mix(in srgb, var(--cat) 55%, var(--text));font-style:normal;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;}
.osm-nrow-text{display:-webkit-box;margin-top:3px;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.4;color:var(--text);}
.osm-notes .snp-list{max-height:none;overflow:visible;}
.osm-tl{list-style:none;margin:0;padding:0;}
.osm-tl-item{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--border-light);}
.osm-tl-item:first-child{border-top:0;padding-top:0;}
.osm-tl-ic{width:30px;height:30px;border-radius:9px;background:color-mix(in srgb, var(--text) 5%, var(--surface));display:grid;place-items:center;font-size:14px;}
.osm-tl-ic.win{background:var(--success-bg);}
.osm-tl-txt{min-width:0;}
.osm-tl-t{display:block;font-size:13px;font-weight:700;color:var(--text);line-height:1.2;}
.osm-tl-m{display:block;font-size:11.5px;color:var(--label);}
.osm-tl-d{font-size:11.5px;color:var(--label);white-space:nowrap;font-weight:600;}
.osm-dupe{border-color:color-mix(in srgb, var(--warning) 45%, var(--border-light));background:color-mix(in srgb, var(--warning) 7%, transparent);}
.osm-dupe h4{color:var(--warning-text);}
.osm-dupe p{margin:0 0 8px;font-size:12px;color:var(--text-secondary);line-height:1.45;}
.osm-dupe-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid color-mix(in srgb, var(--warning) 25%, transparent);}
.osm-dupe-row .nm{font-size:13px;font-weight:700;color:var(--text);min-width:0;}
.osm-dupe-row .nm i{font-style:normal;font-weight:600;font-size:11px;color:var(--warning-text);margin-left:6px;}
.osm-dupe-row .nm small{display:block;font-weight:500;font-size:11.5px;color:var(--text-secondary);margin-top:1px;}
.osm-keep{margin-top:8px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb, var(--surface) 70%, transparent);border:1px solid color-mix(in srgb, var(--warning) 30%, transparent);}
.osm-keep .h{font-size:11px;font-weight:800;margin-bottom:6px;color:var(--text);}
.osm-keep .h small{font-weight:500;color:var(--text-secondary);}
.osm-keep .k{font-size:11px;font-weight:800;margin-top:8px;color:var(--text-secondary);}
.osm-keep label{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:3px 0;color:var(--text);}
.osm-keep label small{color:var(--text-muted);font-size:11px;}
.osm-keep .hint{font-size:11px;color:var(--text-secondary);margin-top:2px;}
.osm-keep .row{display:flex;gap:8px;margin-top:10px;}
.osm-keep .osm-btn.go{background:var(--warning);border-color:var(--warning);color:var(--text-inverse);}
.sc-msg{position:relative;display:inline-flex;}
.sc-msg-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:50;min-width:220px;max-height:300px;overflow-y:auto;background:var(--surface);border:1px solid var(--border-light);border-radius:12px;box-shadow:0 14px 40px rgba(0, 0, 0, .18);padding:6px;}
.sc-msg-item{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--text);text-decoration:none;white-space:nowrap;}
.sc-msg-item:hover{background:var(--surface-active);}
.sc-msg-emoji{font-size:16px;}
.sc-msg-head{padding:6px 11px 4px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);}
.sc-msg-nums{display:flex;flex-wrap:wrap;gap:6px;padding:0 8px 8px;border-bottom:1px solid var(--border-light);margin-bottom:6px;}
.sc-msg-num{padding:5px 9px;border-radius:8px;border:1px solid var(--border-light);background:transparent;font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;cursor:pointer;font-family:inherit;}
.sc-msg-num.on{border-color:var(--success);background:var(--success-bg);color:var(--success-text);}
.osm-dock-note, .osm-grab{display:none;}
.osm-toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));z-index:9;transform:translateX(-50%);padding:10px 18px;border-radius:var(--radius-full);background:var(--text);color:var(--surface);font-size:13.5px;font-weight:800;white-space:nowrap;box-shadow:var(--shadow-lg);animation:osmToast .36s cubic-bezier(.16, 1, .3, 1) backwards;}
.thrive-tab.is-bump .thrive-tab__n{animation:osmBump .5s cubic-bezier(.3, 1.6, .5, 1);}
.osm-qn-scrim{position:fixed;inset:0;z-index:7;background:rgba(16, 10, 22, .45);}
.osm-qn{position:fixed;left:0;right:0;bottom:0;z-index:8;padding:12px 14px calc(14px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:var(--surface);box-shadow:0 -20px 50px -20px rgba(0, 0, 0, .45);animation:osmQnUp .38s cubic-bezier(.16, 1, .3, 1) backwards;}
.osm-qn-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.osm-qn-head b{font-size:16px;font-weight:800;color:var(--text);}
.osm-qn-head span{font-size:13px;font-weight:600;color:var(--label);}
.osm-qn-x{margin-left:auto;width:44px;height:44px;border:0;border-radius:50%;background:color-mix(in srgb, var(--text) 6%, transparent);font-size:14px;color:var(--text-secondary);cursor:pointer;}
@media (min-width: 901px) {
body:not(.tw-atlas) .osm-details{max-height:300px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;margin:0 -14px;padding:2px 14px 16px;
-webkit-mask-image:linear-gradient(to bottom, black calc(100% - 14px), transparent);mask-image:linear-gradient(to bottom, black calc(100% - 14px), transparent);}
}
@media (max-width: 900px) {
.osm-modal{width:100%;max-width:96vw;}
.osm-grid2{display:block;}
.osm-main{overflow:visible;}
.osm-rail{overflow:visible;border-right:0;border-bottom:1px solid var(--border-light);padding:16px 20px 12px;}
.osm-stats{grid-template-columns:repeat(4, minmax(0, 1fr));}
.osm-foot{margin-top:0;}
.osm-grid{grid-template-columns:1fr 1fr;}
}
body.tw-atlas .osm-modal{width:100%;max-width:none;display:block;}
body.tw-atlas .osm-grid2{display:block;}
body.tw-atlas .osm-main{overflow:visible;}
body.tw-atlas .osm-rail{overflow:visible;border-right:0;border-bottom:1px solid var(--border-light);padding:16px 20px 12px;}
body.tw-atlas .osm-stats{grid-template-columns:repeat(4, minmax(0, 1fr));}
body.tw-atlas .osm-foot{margin-top:0;}
body.tw-atlas .osm-grid{grid-template-columns:1fr 1fr;}
@media (max-width: 640px) {
.osm-modal{display:block;max-height:92vh;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-radius:20px 20px 0 0;}
.osm-rail{padding:16px 16px 12px;}
.osm-tabsrow, .osm-body{padding-left:16px;padding-right:16px;}
.osm-tabsrow .thrive-tab{min-height:44px;padding:0 11px;gap:5px;}
.osm-tab-ic{display:none;}
.osm-x{top:8px;right:8px;width:44px;height:44px;}
.osm-grid{grid-template-columns:1fr;gap:9px;}
.osm-select{font-size:16px;height:44px;padding:0 12px;}
.osm-phase select{max-width:none;height:44px;font-size:13px;}
.osm-mentor{height:48px;}
.osm-pick{height:44px;font-size:16px;}
.osm-edit-toggle, .osm-missing-fill{height:44px;padding:0 14px;}
.osm-npeek-all{min-height:44px;margin:-10px 0;padding:0 0 0 16px;}
.osm-npeek .snp-wrap.is-composer .snp-input{min-height:44px;}
.osm-nrow{min-height:44px;}
.osm-rail{padding-top:26px;}
.osm-stats{grid-template-columns:repeat(4, minmax(0, 1fr));gap:6px;}
.osm-stat{align-items:center;text-align:center;}
.osm-pin p{-webkit-line-clamp:2;}
.osm-glance{padding:10px;gap:8px;}
.osm-tile, .osm-more-btn{min-height:48px;}
.osm-grab{display:grid;place-items:center;position:absolute;top:0;left:50%;z-index:3;width:120px;height:26px;transform:translateX(-50%);touch-action:none;}
.osm-grab i{width:40px;height:5px;border-radius:3px;background:color-mix(in srgb, var(--text) 22%, transparent);}
.osm-who{touch-action:pan-x;}
.osm-reach{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;gap:6px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
background:color-mix(in srgb, var(--surface) 88%, transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
border-top:1px solid var(--border-light);box-shadow:0 -10px 30px -18px rgba(0, 0, 0, .35);animation:osmDock .44s cubic-bezier(.16, 1, .3, 1) .12s backwards;}
.osm-reach .osm-btn{height:48px;border-radius:14px;}
.osm-reach > .osm-reach-wa{flex:1.5 1 0;min-width:0;padding:0 10px;}
.osm-reach > .osm-reach-wa .car{display:none;}
.osm-reach3{display:flex;gap:6px;flex:none;}
.osm-reach3 > .sc-msg{display:flex;}
.osm-reach3 .osm-btn{width:48px;height:48px;padding:0;flex-direction:row;font-size:18px;}
.osm-reach3 .osm-btn .lbl{display:none;}
.osm-dock-note{display:inline-flex;flex:1 1 0;min-width:0;padding:0 10px;background:var(--primary);color:var(--on-primary);font-size:14px;font-weight:800;box-shadow:0 8px 18px -10px color-mix(in srgb, var(--primary) 80%, transparent);}
.osm-dock-note:hover{background:var(--primary);filter:brightness(1.06);}
.osm-dock-note:active{transform:scale(.95);}
.osm-reach .sc-msg-menu{top:auto;bottom:calc(100% + 10px);}
.osm-reach3 .sc-msg-menu{left:auto;right:0;}
.osm-body{padding-bottom:calc(92px + env(safe-area-inset-bottom));}
}
@media (max-width: 380px) {
.osm-dock-note{flex:none;width:48px;padding:0;font-size:18px;}
.osm-dock-note .lbl{display:none;}
.osm-tabsrow .thrive-tab{padding:0 8px;font-size:12.5px;}
.osm-tabsrow .thrive-tab:nth-child(3) .thrive-tab__n{display:none;}
.osm-goal{grid-template-columns:minmax(0, 1fr);}
.osm-body.is-editing{padding-bottom:40vh;}
}
.osm-nzf{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:6px;}
.osm-nzf-year{font-size:11px;font-weight:800;color:var(--text-muted);}
.osm-nzf-chip{height:26px;padding:0 9px;border:1px solid var(--border-light);border-radius:var(--radius-full);background:var(--surface);font:inherit;font-size:11.5px;font-weight:700;color:var(--text-secondary);cursor:pointer;}
.osm-nzf-chip.is-on{border-color:color-mix(in srgb, var(--c) 45%, var(--surface));background:color-mix(in srgb, var(--c) 14%, var(--surface));color:var(--text);}
.osm-nzf-chip:hover,.osm-nzf-chip:focus-visible,.osm-nzf-chip:active{border-color:var(--border);}
.osm-nzf-out{padding:0 4px;border:0;background:none;font:inherit;font-size:11.5px;font-weight:700;color:var(--danger);cursor:pointer;}
.osm-nzf-drop{display:flex;flex-basis:100%;flex-wrap:wrap;align-items:center;gap:6px;}
.osm-nzf-drop input{flex:1 1 180px;height:32px;padding:0 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font:inherit;font-size:13px;color:var(--text);}
.osm-nzf-drop button{height:32px;padding:0 12px;border:0;border-radius:var(--radius);background:var(--danger);font:inherit;font-size:12.5px;font-weight:800;color:var(--surface);cursor:pointer;}
.osm-nzf-err{flex-basis:100%;font-size:11.5px;font-weight:700;color:var(--danger);}
@media (max-width: 640px) {
.osm-nzf-chip, .osm-nzf-out{min-height:44px;}
.osm-nzf-drop input, .osm-nzf-drop button{height:44px;font-size:16px;}
}
.osm-skel-overlay{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;background:rgba(16, 10, 22, .52);}
.osm-skel{display:grid;grid-template-columns:260px minmax(0, 1fr);width:820px;max-width:96vw;height:min(780px, 88vh);overflow:hidden;border-radius:20px;background:var(--surface);box-shadow:var(--shadow-xl);animation:osmRise .34s cubic-bezier(.16, 1, .3, 1) backwards;}
.osm-skel-rail{display:flex;flex-direction:column;gap:12px;padding:18px 16px;border-right:1px solid var(--border-light);background:color-mix(in srgb, var(--primary) 5%, var(--surface));}
.osm-skel-main{display:flex;flex-direction:column;gap:12px;padding:16px 20px;}
.osm-sk{display:block;border-radius:10px;background:linear-gradient(90deg, var(--surface-active), var(--surface-hover), var(--surface-active)) 0 0 / 200% 100%;animation:osmShimmer 1.1s ease-in-out infinite;}
.osm-sk.is-avatar{width:44px;height:44px;border-radius:14px;}
.osm-sk.is-name{width:70%;height:18px;}
.osm-sk.is-line{width:45%;height:12px;}
.osm-sk.is-pill{height:32px;border-radius:var(--radius-full);}
.osm-sk.is-btn{height:34px;}
.osm-sk.is-tiles{height:50px;}
.osm-sk.is-box{height:110px;}
.osm-sk.is-tabs{width:70%;height:40px;border-radius:14px;}
.osm-sk.is-card{height:120px;border-radius:14px;}
.osm-sk.is-tall{height:240px;}
@media (max-width: 900px) { .osm-skel{grid-template-columns:1fr;} .osm-skel-rail{border-right:0;border-bottom:1px solid var(--border-light);} }
@media (max-width: 640px) {
.osm-skel-overlay{align-items:flex-end;padding:0;}
.osm-skel{width:100%;max-width:none;height:92dvh;border-radius:20px 20px 0 0;animation-name:osmSheet;}
}
@keyframes osmRise { from { opacity:0; transform:translateY(18px) scale(.97); } }
@keyframes osmSettle { from { transform:scale(.985); } }
@keyframes osmSheet { from { transform:translateY(40px); opacity:.5; } }
@keyframes osmSlide { from { opacity:0; transform:translateX(-12px); } }
@keyframes osmIn { from { opacity:0; transform:translateY(12px); } }
@keyframes osmPane { from { opacity:0; transform:translateY(6px); } }
@keyframes osmDock { from { opacity:0; transform:translateY(100%); } }
@keyframes osmQnUp { from { transform:translateY(100%); } }
@keyframes osmToast { from { opacity:0; transform:translate(-50%, 14px) scale(.96); } }
@keyframes osmBump { 40% { transform:scale(1.4); } }
@keyframes osmPop { from { opacity:0; transform:translateY(4px) scale(.98); } }
@keyframes osmShimmer { to { background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce) {
.osm-overlay, .osm-modal, .osm-rail > *, .osm-tabsrow, .osm-tabpane, .osm-tabpane > *, .osm-menu.is-open, .osm-skel, .osm-sk,
.osm-reach, .osm-qn, .osm-toast, .thrive-tab.is-bump .thrive-tab__n { animation:none; transition:none; }
}
.olami-app .sgx-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 12px; align-items: start; }
.olami-app .sgx-shell.with-drawer { grid-template-columns: 250px minmax(0, 1fr) 330px; }
.olami-app .sgx-main { min-width: 0; position: relative; }
@media (max-width: 1500px) {
.olami-app .sgx-shell.with-drawer { grid-template-columns: 230px minmax(0, 1fr) 300px; }
}
.olami-app .sgx-rail { background: var(--surface); border: 1px solid var(--border-light); border-radius: 14px;
padding: 8px; display: flex; flex-direction: column; gap: 1px; position: sticky; top: 12px; max-height: calc(100vh - 40px); overflow-y: auto; }
.olami-app .sgx-rail::-webkit-scrollbar { width: 8px; }
.olami-app .sgx-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.olami-app .sgx-railhead { display: flex; align-items: center; gap: 6px; padding: 9px 9px 6px; }
.olami-app .sgx-railhead b { flex: 1; font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--text-muted); }
.olami-app .sgx-railhead .act { font-size: 11px; font-weight: 800; color: var(--primary); cursor: pointer; background: none; border: none; padding: 0; }
.olami-app .sgx-railhead .act:hover { text-decoration: underline; }
.olami-app .sgx-railsplit { height: 1px; background: var(--border-light); margin: 9px 4px; }
.olami-app .sgx-list { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px; width: 100%;
font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; background: none; border: none; }
.olami-app .sgx-list .ic { flex: none; font-size: 14px; width: 18px; text-align: center; }
.olami-app .sgx-list .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.olami-app .sgx-list .ct { font-size: 11px; font-weight: 800; color: var(--text-muted); }
.olami-app .sgx-list .who { font-size: 9px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
background: var(--surface-active); color: var(--text-muted); border-radius: 4px; padding: 1px 5px; }
.olami-app .sgx-list:hover { background: var(--surface-hover); }
.olami-app .sgx-list.on { background: var(--primary-soft); color: var(--primary); font-weight: 800; }
.olami-app .sgx-list.on .ct { color: var(--primary); }
.olami-app .sgx-listrow { display: flex; align-items: center; }
.olami-app .sgx-listrow .sgx-listmenu { opacity: 0; flex: none; display: flex; gap: 2px; padding-right: 6px; }
.olami-app .sgx-listrow:hover .sgx-listmenu, .olami-app .sgx-listrow:focus-within .sgx-listmenu { opacity: 1; }
.olami-app .sgx-listmenu button { background: none; border: none; cursor: pointer; font-size: 11px; padding: 3px 4px; border-radius: 5px; opacity: .7; }
.olami-app .sgx-listmenu button:hover { background: var(--surface-active); opacity: 1; }
.olami-app .sgx-list.add { border: 1px dashed var(--border); color: var(--text-secondary); justify-content: center; margin-top: 5px; font-weight: 700; }
.olami-app .sgx-list.add:hover { border-color: var(--primary); color: var(--primary); background: none; }
.olami-app .sgx-list.add[disabled] { opacity: .45; cursor: not-allowed; }
.olami-app .sgx-empty { font-size: 11.5px; line-height: 1.45; color: var(--text-muted); padding: 4px 9px 8px; font-style: italic; }
.olami-app .sgx-facet { padding: 1px 0 5px; }
.olami-app .sgx-facet > summary { display: flex; align-items: center; gap: 7px; padding: 7px 9px; list-style: none;
font-size: 10.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--text-muted); cursor: pointer; }
.olami-app .sgx-facet > summary::-webkit-details-marker { display: none; }
.olami-app .sgx-facet > summary::after { content: '▸'; margin-left: auto; font-size: 10px; opacity: .55; }
.olami-app .sgx-facet[open] > summary::after { content: '▾'; }
.olami-app .sgx-facet > summary:hover { color: var(--text); }
.olami-app .sgx-facet .n { font-size: 10px; font-weight: 800; color: var(--primary); background: var(--primary-soft); border-radius: 999px; padding: 1px 7px; }
.olami-app .sgx-fitem { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 8px; width: 100%;
font-size: 12.5px; color: var(--text); cursor: pointer; background: none; border: none; text-align: left; }
.olami-app .sgx-fitem:hover { background: var(--surface-hover); }
.olami-app .sgx-fbox { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--border); flex: none;
display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; color: #fff; background: var(--surface); }
.olami-app .sgx-fitem.on { background: var(--primary-soft); font-weight: 800; }
.olami-app .sgx-fitem.on .sgx-fbox { background: var(--primary); border-color: var(--primary); }
.olami-app .sgx-fitem .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.olami-app .sgx-fitem .ct { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.olami-app .sgx-fitem.on .ct { color: var(--primary); }
.olami-app .sgx-fnote { font-size: 10.5px; line-height: 1.4; color: var(--text-muted); padding: 2px 9px 6px; font-style: italic; }
.olami-app .sgx-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.olami-app .sgx-top { background: var(--surface); border: 1px solid var(--border-light); border-radius: 14px;
padding: 13px 15px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 11px; }
.olami-app .sgx-toprow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.olami-app .sgx-count { font-size: 25px; font-weight: 800; letter-spacing: -.7px; color: var(--text); line-height: 1; }
.olami-app .sgx-count small { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); letter-spacing: 0; margin-left: 7px; }
.olami-app .sgx-sentence { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 28px; font-size: 12.5px; color: var(--text-secondary); }
.olami-app .sgx-sentence .w { font-weight: 700; color: var(--text-muted); }
.olami-app .sgx-search { max-width: 230px; }
.olami-app .sgx-tagkey { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 4px; margin-left: auto; }
.olami-app .sgx-tagkey-i { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 3px; margin: 0;
border: 1px solid transparent; border-radius: 999px; background: none; font: inherit; font-size: 12px; font-weight: 600;
color: var(--text-secondary); cursor: pointer; transition: background-color .14s ease, border-color .14s ease, color .14s ease; }
.olami-app .sgx-tagkey-i:hover { background: var(--surface-hover); border-color: var(--border-light); color: var(--text); }
.olami-app .sgx-tagkey-i.on { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 32%, transparent); color: var(--primary); }
.olami-app .sgx-tagkey-i b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.olami-app .sgx-tagkey-i.on b { color: var(--primary); }
.olami-app .sgx-tagkey-i:active { transform: scale(.97); }
.olami-app .sgx-tagkey-i.is-zero { opacity: .5; }
.olami-app .sgx-tagkey-i:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 768px) {
.olami-app .sgx-tagkey { flex: 1 1 100%; margin: 4px 0 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
padding-right: 24px; -webkit-mask-image: linear-gradient(90deg, black calc(100% - 24px), transparent);
mask-image: linear-gradient(90deg, black calc(100% - 24px), transparent); }
.olami-app .sgx-tagkey::-webkit-scrollbar { display: none; }
.olami-app .sgx-tagkey-i { flex: none; padding: 4px 10px 4px 4px; background: var(--surface); border-color: var(--border-light); }
}
.olami-app .sgx-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-soft); color: var(--primary);
border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent); border-radius: 999px;
padding: 4px 11px; font-size: 12px; font-weight: 700; cursor: pointer; }
.olami-app .sgx-pill:hover { background: color-mix(in srgb, var(--primary) 18%, transparent); }
.olami-app .sgx-pill .x { opacity: .6; font-weight: 800; }
.olami-app .sgx-pill.or { background: var(--info-bg); color: var(--info-text); border-color: transparent;
font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; padding: 3px 8px; cursor: default; }
.olami-app .sgx-pill.plain { background: var(--surface-active); color: var(--text); border-color: var(--border-light); }
.olami-app .sgx-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border);
border-radius: 9px; padding: 8px 13px; font-size: 12.5px; font-weight: 700; color: var(--text); cursor: pointer; white-space: nowrap; }
.olami-app .sgx-btn:hover { border-color: var(--primary); color: var(--primary); }
.olami-app .sgx-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.olami-app .sgx-btn.primary:hover { background: var(--primary-hover); color: #fff; }
.olami-app .sgx-btn[disabled] { opacity: .5; cursor: not-allowed; }
.olami-app .sgx-cols { position: relative; }
.olami-app .sgx-colspop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; background: var(--surface);
border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 7px; width: 216px; max-height: 340px; overflow-y: auto; }
.olami-app .sgx-owner { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; max-width: 150px;
border-radius: 999px; padding: 2px 9px 2px 3px; font-size: 11.5px; font-weight: 700; color: #fff; cursor: pointer; }
.olami-app .sgx-owner .av { width: 19px; height: 19px; border-radius: 50%; flex: none; display: inline-flex; align-items: center;
justify-content: center; font-size: 9px; font-weight: 800; background: rgba(0, 0, 0, .22); }
.olami-app .sgx-owner .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.olami-app .sgx-owner.none { background: var(--warning-bg); color: var(--warning-text); border-color: #fcd34d; padding-left: 9px; }
.olami-app .sgx-owner:hover { filter: brightness(1.06); }
.olami-app .sgx-owner .caret { opacity: .6; font-size: 9px; flex: none; }
.olami-app .sgx-need { display: inline-flex; align-items: center; gap: 5px; background: var(--warning-bg);
border: 1px solid #fcd34d; color: var(--warning-text); border-radius: 8px; padding: 3px 9px; font-size: 11.5px; font-weight: 700;
cursor: pointer; text-decoration: none; white-space: nowrap; }
.olami-app .sgx-need:hover { background: #fde68a; }
.olami-app tr.sgx-open td { background: var(--primary-soft) !important; }
.olami-app .sgx-miss { color: #d97706; font-weight: 700; font-size: 12px; }
.olami-app .sgx-pop-h { font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); padding: 6px 9px 4px; }
.olami-app .sgx-split { background: var(--surface); border: 1px solid var(--border-light); border-radius: 14px; padding: 15px 17px; margin-bottom: 12px; }
.olami-app .sgx-split h4 { margin: 0 0 3px; font-size: 13.5px; font-weight: 800; color: var(--text); }
.olami-app .sgx-split p { margin: 0 0 13px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.olami-app .sgx-splitgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 10px; margin-bottom: 13px; }
.olami-app .sgx-splitcard { border: 1px solid var(--border-light); border-radius: 11px; padding: 10px 11px; display: flex; align-items: center; gap: 9px; }
.olami-app .sgx-splitcard .id { flex: 1; min-width: 0; }
.olami-app .sgx-splitcard .nm { font-size: 12px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.olami-app .sgx-splitcard .mv { font-size: 11px; color: var(--text-secondary); font-weight: 600; }
.olami-app .sgx-splitcard .mv b { color: var(--success-text); font-weight: 800; }
.olami-app .sgx-splitcard.out { opacity: .45; }
.olami-app .sgx-drawer { background: var(--surface); border: 1px solid var(--border-light); border-radius: 14px;
overflow: hidden; position: sticky; top: 12px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.olami-app .sgx-drawer-head { padding: 15px; border-bottom: 1px solid var(--border-light); display: flex; gap: 11px; align-items: center; }
.olami-app .sgx-drawer-body { padding: 14px 15px; overflow-y: auto; }
.olami-app .sgx-drawer-x { margin-left: auto; background: var(--surface-active); border: none; border-radius: 8px;
width: 26px; height: 26px; font-size: 13px; color: var(--text-secondary); cursor: pointer; flex: none; }
.olami-app .sgx-drawer-x:hover { color: var(--text); }
.olami-app .sgx-next { background: var(--warning-bg); border: 1px solid #fcd34d; border-radius: 11px; padding: 11px 12px; margin-bottom: 14px; }
.olami-app .sgx-next b { display: block; font-size: 10px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--warning-text); margin-bottom: 4px; }
.olami-app .sgx-next p { margin: 0 0 9px; font-size: 12.5px; line-height: 1.45; color: var(--text); }
.olami-app .sgx-kv { display: grid; grid-template-columns: 92px 1fr; gap: 6px 10px; font-size: 12.5px; margin: 0; }
.olami-app .sgx-kv dt { color: var(--text-muted); font-weight: 600; }
.olami-app .sgx-kv dd { margin: 0; color: var(--text); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.olami-app .sgx-kv dd.miss { color: #d97706; font-weight: 700; }
.olami-app .sgx-drawer-tl { list-style: none; margin: 12px 0 0; padding: 0; }
.olami-app .sgx-drawer-tl li { display: flex; gap: 9px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--border-light); font-size: 12.5px; }
.olami-app .sgx-drawer-tl li:last-child { border-bottom: none; }
.olami-app .sgx-drawer-tl .d { margin-left: auto; color: var(--text-muted); font-size: 11.5px; white-space: nowrap; }
.olami-app .sgx-filterbtn { display: none; }
.olami-app .sgx-sheet-x { display: none; }
.olami-app .sgx-scrim { display: none; }
@media (max-width: 900px) {
.olami-app .sgx-shell,
.olami-app .sgx-shell.with-drawer { grid-template-columns: 1fr; }
.olami-app .sgx-rail { position: fixed; inset: auto 0 0 0; z-index: 70; max-height: 82vh; top: auto;
border-radius: 18px 18px 0 0; box-shadow: var(--shadow-xl); padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); }
.olami-app .sgx-rail.is-sheet-closed { display: none; }
.olami-app .sgx-sheet-x { display: block; position: sticky; top: 0; z-index: 2; background: var(--surface);
border: none; border-bottom: 1px solid var(--border-light); width: 100%; padding: 12px 4px;
font-size: 14px; font-weight: 800; color: var(--text); cursor: pointer; }
.olami-app .sgx-scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 69; border: none; }
.olami-app .sgx-filterbtn { display: inline-flex; }
.olami-app .sgx-drawer { position: fixed; inset: 0; z-index: 75; border-radius: 0; max-height: none; }
.olami-app .sgx-top { padding: 12px; }
.olami-app .sgx-count { font-size: 22px; }
.olami-app .sgx-splitgrid { grid-template-columns: 1fr 1fr; }
}
.olami-app .olami-db-bulk-bar {
position: fixed; z-index: 68; left: 76px; right: 140px; bottom: calc(22px + env(safe-area-inset-bottom, 0px));
width: fit-content; max-width: calc(100vw - 216px); margin: 0 auto;
display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px;
padding: 7px 8px; border-radius: 16px; color: var(--text);
background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px);
border: 1px solid var(--border-light); box-shadow: var(--shadow-xl);
}
.olami-app .olami-db-bulk-bar .bb-count { display: inline-flex; align-items: center; gap: 7px; padding: 0 4px 0 2px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.olami-app .olami-db-bulk-bar .bb-count b { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center;
background: var(--primary); color: #fff; font-size: 12.5px; font-weight: 800; box-shadow: 0 2px 8px rgba(var(--primary-rgb), .3); }
.olami-app .olami-db-bulk-bar .bb-clear { height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: none; cursor: pointer;
font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); transition: var(--transition); }
.olami-app .olami-db-bulk-bar .bb-clear:hover, .olami-app .olami-db-bulk-bar .bb-clear:focus-visible { background: var(--surface-hover); color: var(--text); }
.olami-app .olami-db-bulk-bar .bb-sep { width: 1px; height: 22px; margin: 0 3px; background: var(--border-light); }
.olami-app .olami-db-bulk-bar .bb-grp { display: inline-flex; align-items: stretch; border: 1px solid var(--border-light); border-radius: 10px;
background: var(--surface); overflow: hidden; transition: var(--transition); }
.olami-app .olami-db-bulk-bar .bb-grp:hover, .olami-app .olami-db-bulk-bar .bb-grp:focus-within { border-color: var(--border-hover); }
.olami-app .olami-db-bulk-bar .bb-grp select { height: 30px; max-width: 150px; padding: 0 6px 0 10px; border: 0; border-radius: 0; background: transparent;
font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.olami-app .olami-db-bulk-bar .bb-grp select:focus { outline: none; }
.olami-app .olami-db-bulk-bar .bb-go { width: 30px; border: 0; border-left: 1px solid var(--border-light); background: var(--surface-hover);
color: var(--text-muted); font-size: 13px; font-weight: 800; cursor: pointer; transition: var(--transition); }
.olami-app .olami-db-bulk-bar .bb-go.is-ready { background: var(--primary); border-left-color: var(--primary); color: #fff; }
.olami-app .olami-db-bulk-bar .bb-go.is-ready:hover { background: var(--primary-hover); }
.olami-app .olami-db-bulk-bar .bb-btn { height: 32px; padding: 0 12px; border: 1px solid var(--border-light); border-radius: 10px; background: var(--surface);
font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text); cursor: pointer; white-space: nowrap; transition: var(--transition); }
.olami-app .olami-db-bulk-bar .bb-btn:hover, .olami-app .olami-db-bulk-bar .bb-btn:focus-visible { border-color: var(--primary); color: var(--primary); }
.olami-app .sgx-split { position: fixed; z-index: 69; left: 76px; right: 140px; bottom: calc(80px + env(safe-area-inset-bottom, 0px));
width: min(760px, calc(100vw - 216px)); max-height: min(60vh, 540px); overflow-y: auto; margin: 0 auto; box-shadow: var(--shadow-xl); }
.olami-app .sgx-split-foot { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 900px) {
.olami-app .olami-db-bulk-bar { left: 10px; right: 10px; width: auto; max-width: none; justify-content: flex-start; flex-wrap: nowrap;
overflow-x: auto; scrollbar-width: none; bottom: calc(max(10px, var(--omm-zone-ai, 0px)) + 4px); }
.olami-app .olami-db-bulk-bar::-webkit-scrollbar { display: none; }
.olami-app .olami-db-bulk-bar > * { flex: none; }
.olami-app .sgx-split { left: 10px; right: 10px; width: auto; bottom: calc(max(10px, var(--omm-zone-ai, 0px)) + 58px); }
}
.olami-app .sgx-progress { position: absolute; top: 0; left: 0; right: 0; height: 2px; margin: 0; overflow: hidden;
border-radius: 2px; z-index: 5; pointer-events: none; }
.olami-app .sgx-progress::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 2px;
background: linear-gradient(90deg, transparent, var(--primary), transparent); animation: sgx-sweep 1s ease-in-out infinite; }
@keyframes sgx-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
.olami-app .sgx-busy { opacity: .55; transition: opacity .12s ease; pointer-events: none; }
.olami-app .sgx-fitem { transition: background-color .13s ease, color .13s ease; }
.olami-app .sgx-fbox { transition: background-color .13s ease, border-color .13s ease, transform .13s cubic-bezier(.34, 1.56, .64, 1); }
.olami-app .sgx-fitem.on .sgx-fbox { transform: scale(1.08); }
.olami-app .sgx-fitem.pending { background: var(--surface-active); }
.olami-app .sgx-fitem.pending .sgx-fbox { animation: sgx-ring .9s ease-out infinite; }
@keyframes sgx-ring {
0% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), .45); }
100% { box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0); }
}
.olami-app .sgx-fitem .ct { transition: color .13s ease; }
.olami-app .sgx-list, .olami-app .sgx-btn, .olami-app .sgx-pill,
.olami-app .sgx-owner, .olami-app .sgx-need, .olami-app .sgx-splitcard {
transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .1s ease, filter .14s ease;
}
.olami-app .sgx-btn:active, .olami-app .sgx-list:active, .olami-app .sgx-pill:active { transform: scale(.97); }
.olami-app .sgx-splitcard:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
@keyframes sgx-count-in { from { opacity: 0; transform: translateY(-5px) scale(.96); } }
.olami-app .sgx-count { animation: sgx-count-in .28s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes sgx-pill-in { from { opacity: 0; transform: scale(.86); } }
.olami-app .sgx-pill { animation: sgx-pill-in .2s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes sgx-row-in { from { opacity: 0; transform: translateY(6px); } }
.olami-app .sgx-rows > tr { animation: sgx-row-in .3s cubic-bezier(.2, .8, .3, 1) both; }
.olami-app .sgx-rows > tr:nth-child(1) { animation-delay: 0ms } .olami-app .sgx-rows > tr:nth-child(2) { animation-delay: 14ms }
.olami-app .sgx-rows > tr:nth-child(3) { animation-delay: 28ms } .olami-app .sgx-rows > tr:nth-child(4) { animation-delay: 42ms }
.olami-app .sgx-rows > tr:nth-child(5) { animation-delay: 56ms } .olami-app .sgx-rows > tr:nth-child(6) { animation-delay: 70ms }
.olami-app .sgx-rows > tr:nth-child(7) { animation-delay: 84ms } .olami-app .sgx-rows > tr:nth-child(8) { animation-delay: 98ms }
.olami-app .sgx-rows > tr:nth-child(9) { animation-delay: 112ms } .olami-app .sgx-rows > tr:nth-child(10) { animation-delay: 126ms }
.olami-app .sgx-rows > tr:nth-child(11) { animation-delay: 140ms } .olami-app .sgx-rows > tr:nth-child(12) { animation-delay: 154ms }
.olami-app .sgx-rows > tr:nth-child(13) { animation-delay: 168ms } .olami-app .sgx-rows > tr:nth-child(n+14) { animation-delay: 180ms }
.olami-app .olami-db-table-card tbody td { transition: background-color .12s ease; }
@keyframes sgx-drawer-in { from { opacity: 0; transform: translateX(14px); } }
.olami-app .sgx-drawer { animation: sgx-drawer-in .26s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes sgx-panel-in { from { opacity: 0; transform: translateY(-8px); } }
.olami-app .sgx-split { animation: sgx-panel-in .24s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes sgx-bar-in { from { opacity: 0; transform: translateY(14px); } }
.olami-app .olami-db-bulk-bar { animation: sgx-bar-in .22s cubic-bezier(.2, .8, .3, 1) both; }
.olami-app .sgx-meter-fill, .olami-app .olami-att-fill { transition: width .45s cubic-bezier(.2, .8, .3, 1); }
@media (max-width: 900px) {
@keyframes sgx-sheet-in { from { transform: translateY(100%); } }
.olami-app .sgx-rail:not(.is-sheet-closed) { animation: sgx-sheet-in .26s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes sgx-fade-in { from { opacity: 0; } }
.olami-app .sgx-scrim { animation: sgx-fade-in .2s ease both; }
.olami-app .sgx-drawer { animation: sgx-sheet-in .26s cubic-bezier(.2, .8, .3, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
.olami-app .sgx-count, .olami-app .sgx-pill, .olami-app .sgx-rows > tr,
.olami-app .sgx-drawer, .olami-app .sgx-split, .olami-app .olami-db-bulk-bar,
.olami-app .sgx-rail:not(.is-sheet-closed), .olami-app .sgx-scrim { animation: none; }
.olami-app .sgx-progress::after { animation: none; opacity: .5; }
.olami-app .sgx-fitem.pending .sgx-fbox { animation: none; }
.olami-app * { transition-duration: .01ms !important; }
}
.olami-app .sgx-everyone { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin-top: 12px; padding: 11px 15px; border-radius: 12px; background: var(--surface);
border: 1px dashed var(--border); font-size: 12.5px; color: var(--text-secondary); }
.olami-app .sgx-everyone strong { color: var(--text); font-weight: 800; }
.olami-app .sgx-everyone .sgx-btn { margin-left: auto; }
@media (max-width: 900px) {
.olami-app .sgx-everyone { margin-bottom: 72px; }
.olami-app .sgx-everyone .sgx-btn { margin-left: 0; width: 100%; justify-content: center; }
}
@media (max-width: 768px) {
.olami-app .sgx-lbl { display: none; }
.olami-app .sgx-top { padding: 10px 11px; gap: 8px; }
.olami-app .sgx-toprow { gap: 6px; margin-bottom: 0; }
.olami-app .sgx-toprow .sgx-btn { padding: 6px 10px; font-size: 12px; }
.olami-app .sgx-toprow .sgx-count { order: 1; }
.olami-app .sgx-toprow .sgx-spacer { order: 2; }
.olami-app .sgx-toprow .sgx-filterbtn { order: 3; }
.olami-app .sgx-toprow .sgx-cols { order: 4; display: none; }
.olami-app .sgx-toprow .sgx-btn.primary { order: 5; }
.olami-app .sgx-toprow .olami-db-search-box { order: 9; flex: 1 0 100%; max-width: none; }
.olami-app .sgx-toprow .olami-db-search-box input { box-sizing: border-box; padding-top: 7px; padding-bottom: 7px; }
.olami-app .sgx-sentence { margin: 0; font-size: 12px; }
.olami-app .sgx-everyone { display: none; }
.olami-app .sgx-escape { color: var(--text-secondary); white-space: nowrap; }
.olami-app .sgx-escape button { border: none; background: none; color: var(--primary);
font: inherit; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }
}
.olami-app .sgx-escape { display: none; }
@media (max-width: 768px) { .olami-app .sgx-escape { display: inline; } }
.sgx-rules { border: 1px solid var(--border-light); border-radius: 10px; background: var(--surface); }
.sgx-rules > summary {
display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
padding: 9px 12px; font-size: 12.5px; color: var(--text);
}
.sgx-rules > summary::-webkit-details-marker { display: none; }
.sgx-rules > summary::before { content: '▸'; color: var(--text-muted); font-size: 11px; transition: transform .18s ease; }
.sgx-rules[open] > summary::before { transform: rotate(90deg); }
.sgx-rules > summary:hover { background: var(--surface-hover); border-radius: 10px; }
.sgx-rules-n {
margin-left: auto; font-size: 10.5px; font-weight: 800; color: #fff;
background: var(--primary); border-radius: 999px; padding: 1px 7px;
}
.sgx-rules-body { padding: 4px 10px 12px; border-top: 1px solid var(--border-light); }
.sgx-rules-body .ab-rule { flex-wrap: wrap; }
.sgx-rules-body .ab-field,
.sgx-rules-body .ab-operator,
.sgx-rules-body .ab-value { min-width: 0; width: 100%; }
.olami-app .sgx-shell.tw-full {
position: fixed;
inset: 0;
z-index: var(--z-overlay);
background: var(--bg);
grid-template-columns: minmax(0, 1fr);
gap: 0;
padding: 0;
margin: 0;
}
.olami-app .sgx-shell.tw-full .sgx-rail {
position: absolute;
top: 64px;
left: 12px;
bottom: auto;
width: 264px;
max-width: calc(100vw - 24px);
max-height: calc(100% - 128px);
z-index: 3;
overflow-y: auto;
overscroll-behavior: contain;
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
padding: 10px;
background: var(--surface);
animation: tw-panel-in .22s cubic-bezier(.22, 1, .36, 1) both;
}
@supports (backdrop-filter: blur(10px)) {
.olami-app .sgx-shell.tw-full .sgx-rail {
background: rgba(var(--surface-rgb, 255, 255, 255), .88);
backdrop-filter: blur(16px) saturate(1.3);
-webkit-backdrop-filter: blur(16px) saturate(1.3);
}
}
@keyframes tw-panel-in {
from { transform: translateX(-10px) scale(.99); opacity: 0; }
to { transform: none; opacity: 1; }
}
.olami-app .sgx-shell.tw-full .sgx-rail::-webkit-scrollbar { width: 5px; }
.olami-app .sgx-shell.tw-full .sgx-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.olami-app .sgx-shell.tw-full .sgx-rail .sgx-railhead { padding-top: 4px; padding-bottom: 4px; }
.olami-app .sgx-shell.tw-full .sgx-rail .sgx-railsplit { margin: 6px 0; }
.olami-app .sgx-shell.tw-full .sgx-rail.is-sheet-closed { display: none; }
.olami-app .sgx-shell.tw-full .sgx-sheet-x {
display: block;
position: sticky;
top: 0;
z-index: 2;
background: var(--surface);
border-radius: var(--radius);
}
.olami-app .sgx-shell.tw-full .tw-board {
height: 100%;
border: 0;
border-radius: 0;
box-shadow: none;
display: flex;
flex-direction: column;
}
.olami-app .sgx-shell.tw-full .tw-stage { flex: 1 1 auto; min-height: 0; }
.olami-app .sgx-shell.tw-full .tw-scroll { height: 100%; display: flex; }
.olami-app .sgx-shell.tw-full .tw-map { height: 100%; width: auto; flex: none; margin: 0; }
.olami-app .sgx-shell.tw-full .tw-note { flex: none; }
.olami-app .sgx-shell.tw-full .olami-db-table-card,
.olami-app .sgx-shell.tw-full .sgx-everyone,
.olami-app .sgx-shell.tw-full .sgx-top,
.olami-app .sgx-shell.tw-full .tw-modes { display: none; }
.olami-app .sgx-shell.tw-full .sgx-main { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.tw-ctl {
pointer-events: auto;
flex: none;
display: flex;
gap: 2px;
border-radius: var(--radius-full);
padding: 3px;
}
.tw-ctl-b {
font-size: 11.5px;
font-weight: 700;
color: var(--text-secondary);
background: none;
border: 0;
border-radius: var(--radius-full);
padding: 6px 11px;
cursor: pointer;
white-space: nowrap;
}
.tw-ctl-b:hover, .tw-ctl-b:active { color: var(--text); }
.tw-ctl-b.is-on {
background: var(--primary);
color: var(--text-inverse);
box-shadow: 0 2px 8px rgba(var(--primary-rgb), .3);
}
.tw-ctl-icon {
pointer-events: auto;
flex: none;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: var(--radius-full);
font-size: 15px;
color: var(--text);
cursor: pointer;
padding: 0;
}
.tw-ctl-icon:hover, .tw-ctl-icon:active { color: var(--primary); }
.tw-zoomctl { gap: 0; }
.tw-z { min-width: 30px; font-size: 15px; line-height: 1; padding: 5px 8px; }
.tw-z[disabled] { opacity: .35; cursor: default; }
.tw-zlevel { min-width: 52px; font-variant-numeric: tabular-nums; }
.tw-legend { gap: 9px; }
.tw-legend i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--c);
display: inline-block;
margin-right: 3px;
}
[x-cloak] { display: none !important; }
.tw-dot.is-hit {
width: 11px;
height: 11px;
margin: -5.5px 0 0 -5.5px;
z-index: 14;
animation: tw-ping 1.9s ease-out infinite;
}
@keyframes tw-ping {
0% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgba(var(--primary-rgb), .85); }
70%, 100% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 16px rgba(var(--primary-rgb), 0); }
}
.tw-dot.is-hit::after { opacity: 1; translate: -50% -9px; }
body.tw-atlas .olami-db-modal-overlay.osm-overlay {
background: none;
backdrop-filter: none;
justify-content: flex-end;
align-items: stretch;
padding: 0;
pointer-events: none;
z-index: var(--z-modal);
}
body.tw-atlas .olami-db-modal-overlay.osm-overlay > * {
pointer-events: auto;
width: min(420px, 100vw);
max-width: none;
max-height: 100vh;
height: 100vh;
margin: 0;
border-radius: 0;
border-left: 1px solid var(--border-light);
box-shadow: -18px 0 48px rgba(0, 0, 0, .18);
animation: tw-slide-in .28s cubic-bezier(.22, 1, .36, 1) both;
overflow-y: auto;
}
@keyframes tw-slide-in {
from { transform: translateX(28px); opacity: 0; }
to { transform: none; opacity: 1; }
}
@media (max-width: 759px) {
body.tw-atlas .olami-db-modal-overlay.osm-overlay { align-items: flex-end; justify-content: center; }
body.tw-atlas .olami-db-modal-overlay.osm-overlay > * {
width: 100vw;
height: 82vh;
border-left: 0;
border-top-left-radius: var(--radius-lg);
border-top-right-radius: var(--radius-lg);
animation-name: tw-slide-up;
}
@keyframes tw-slide-up {
from { transform: translateY(32px); opacity: 0; }
to { transform: none; opacity: 1; }
}
}
.tw-hq-bar {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 12px;
}
.tw-hq-select {
font-size: 13px;
font-weight: 600;
color: var(--text);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-full);
padding: 8px 14px;
cursor: pointer;
}
.tw-hq-cov { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tw-hq-covitem {
display: flex;
align-items: baseline;
gap: 6px;
font-size: 11.5px;
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
padding: 5px 11px;
}
.tw-hq-covitem b { font-weight: 700; color: var(--text); }
.tw-hq-covitem i { font-style: normal; font-weight: 800; color: var(--success); }
.tw-hq-covitem.is-thin i { color: var(--warning); }
.tw-hq-covitem.is-thin { border-color: var(--warning); }
.tw-hq.tw-full {
position: fixed;
inset: 0;
z-index: var(--z-overlay);
background: var(--bg);
display: flex;
flex-direction: column;
padding: 12px 12px 0;
}
.tw-hq.tw-full .tw-hq-bar { flex: none; }
.tw-hq.tw-full .tw-board {
flex: 1 1 auto;
min-height: 0;
border: 0;
border-radius: 0;
box-shadow: none;
display: flex;
flex-direction: column;
}
.tw-hq.tw-full .tw-stage { flex: 1 1 auto; min-height: 0; }
.tw-hq.tw-full .tw-scroll { height: 100%; display: flex; }
.tw-hq.tw-full .tw-map { height: 100%; width: auto; flex: none; margin: 0; }
.tw-hq.tw-full .tw-note { flex: none; }
.tw-modes {
display: flex;
gap: 4px;
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
padding: 4px;
box-shadow: var(--shadow-sm);
width: fit-content;
margin: 0 0 10px;
}
.tw-mode {
font-size: 12.5px;
font-weight: 700;
color: var(--text-secondary);
background: none;
border: 0;
border-radius: var(--radius-full);
padding: 7px 16px;
cursor: pointer;
white-space: nowrap;
}
.tw-mode:hover, .tw-mode:active { background: var(--surface-hover); color: var(--text); }
.tw-mode.is-on {
background: var(--primary);
color: var(--text-inverse);
box-shadow: 0 2px 8px rgba(var(--primary-rgb), .32);
}
.tw-board {
position: relative;
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
}
.tw-stage { position: relative; }
.tw-scroll {
overflow: hidden;
position: relative;
background: linear-gradient(180deg, var(--world-sea-top), var(--world-sea));
touch-action: none;
cursor: grab;
}
.tw-scroll.is-grabbing { cursor: grabbing; }
.tw-map { position: relative; width: 215%; aspect-ratio: var(--tw-aspect, 2.09); margin: 0; will-change: transform; transform-origin: 0 0; }
.tw-cl { transform: scale(var(--tw-inv, 1)); transform-origin: center; }
.tw-map > svg { display: block; width: 100%; height: 100%; }
.tw-land { fill: var(--world-land); stroke: var(--world-land-edge); stroke-width: .6; }
.tw-arc {
fill: none;
stroke: rgba(var(--primary-rgb), .34);
opacity: var(--tw-arc, 1);
stroke-linecap: round;
stroke-dasharray: 5 9;
vector-effect: non-scaling-stroke;
animation: tw-flow 3.2s linear infinite;
animation-delay: calc(var(--i) * -110ms);
}
@keyframes tw-flow { to { stroke-dashoffset: -28; } }
.tw-cl {
position: absolute;
left: var(--x);
top: var(--y);
width: var(--b);
height: var(--b);
margin: calc(var(--b) / -2) 0 0 calc(var(--b) / -2);
z-index: calc(200 - var(--i, 0));
transition: left .4s cubic-bezier(.22, 1, .36, 1), top .4s cubic-bezier(.22, 1, .36, 1),
width .4s cubic-bezier(.22, 1, .36, 1), height .4s cubic-bezier(.22, 1, .36, 1),
margin .4s cubic-bezier(.22, 1, .36, 1);
animation: tw-pop .55s cubic-bezier(.34, 1.5, .64, 1) both;
animation-delay: calc(var(--i) * 26ms);
}
.tw-cl:has(.tw-dot:hover), .tw-cl:has(.tw-dot:focus-visible), .tw-cl:has(.tw-n:hover) { z-index: 300; }
@keyframes tw-pop {
from { opacity: 0; transform: scale(calc(var(--tw-inv, 1) * .35)); }
to { opacity: 1; transform: scale(var(--tw-inv, 1)); }
}
.tw-hit { position: absolute; inset: 0; border-radius: 50%; cursor: pointer; border: 0; background: none; padding: 0; }
.tw-dot {
position: absolute;
left: 50%;
top: 50%;
width: 3.6px;
height: 3.6px;
margin: -1.8px 0 0 -1.8px;
translate: var(--dx) var(--dy);
border-radius: 50%;
background: var(--primary);
box-shadow: 0 0 0 .6px var(--surface);
cursor: pointer;
border: 0;
padding: 0;
transition: translate .4s cubic-bezier(.22, 1, .36, 1);
}
.tw-dot::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; }
.tw-dot:hover, .tw-dot:focus, .tw-dot:active {
z-index: 12;
outline: 0;
box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary), var(--shadow);
}
.tw-by-phase .tw-dot { background: var(--pc, var(--primary)); }
.tw-dot[data-id]::after {
content: attr(aria-label);
position: absolute;
left: 50%;
bottom: 100%;
translate: -50% -2px;
scale: var(--tw-lbl, 1);
transform-origin: 50% 100%;
opacity: 0;
pointer-events: none;
white-space: nowrap;
font-size: 10.5px;
font-weight: 700;
font-style: normal;
line-height: 1.2;
color: var(--text-inverse);
background: var(--text);
padding: 3px 7px;
border-radius: var(--radius-full);
box-shadow: var(--shadow-lg);
transition: opacity .13s, translate .13s;
z-index: 13;
}
.tw-dot:hover::after,
.tw-dot:focus::after,
.tw-dot:active::after { opacity: 1; translate: -50% -7px; }
.tw-n {
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
scale: var(--tw-lbl, 1);
display: none;
place-items: center;
min-width: 23px;
height: 23px;
padding: 0 5px;
border-radius: var(--radius-full);
background: var(--surface);
color: var(--primary);
font-size: 11px;
font-weight: 800;
box-shadow: var(--shadow);
cursor: pointer;
border: 0;
z-index: 11;
}
.tw-cl.has-n .tw-n { display: grid; }
.tw-n:hover, .tw-n:active, .tw-n:focus-visible { box-shadow: 0 0 0 2px var(--primary), var(--shadow-md); }
.tw-l {
position: absolute;
left: 50%;
top: 100%;
translate: -50% 2px;
scale: var(--tw-lbl, 1);
transform-origin: 50% 0;
display: none;
font-size: 9.5px;
font-weight: 700;
color: var(--world-ink);
background: var(--surface);
padding: 1px 6px;
border-radius: var(--radius-full);
white-space: nowrap;
opacity: .88;
pointer-events: none;
}
.tw-cl.is-labelled .tw-l { display: block; }
.tw-cl.is-selected { z-index: 250; }
.tw-cl.is-selected .tw-n { box-shadow: 0 0 0 3px var(--primary), var(--shadow-md); }
.tw-cl.is-selected .tw-l { display: block; opacity: 1; font-weight: 800; }
.tw-cl.is-merged::after {
content: "";
position: absolute;
inset: -5px;
border-radius: 50%;
border: 1px dashed rgba(var(--primary-rgb), .45);
pointer-events: none;
}
.tw-cl.is-hub .tw-dot { background: var(--world-hub); }
.tw-by-phase .tw-cl.is-hub .tw-dot { background: var(--pc, var(--world-hub)); }
.tw-cl.is-hub .tw-n { color: var(--world-hub-ink); box-shadow: 0 0 0 2px var(--world-hub), var(--shadow); }
.tw-cl.is-hub .tw-l { color: var(--world-hub-ink); }
.tw-cl.is-hub::after {
content: "";
position: absolute;
inset: -7px;
border-radius: 50%;
border: 1.5px dashed rgba(var(--world-hub-rgb), .5);
animation: tw-orbit 30s linear infinite;
pointer-events: none;
}
@keyframes tw-orbit { to { transform: rotate(360deg); } }
.tw-hud {
position: absolute;
inset: 0;
z-index: 20;
pointer-events: none;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px;
}
.tw-hud-top { display: flex; gap: 8px; align-items: flex-start; }
.tw-hud-top > * { pointer-events: auto; }
.tw-glass {
background: var(--surface);
border: 1px solid var(--border-light);
box-shadow: var(--shadow-lg);
}
@supports (backdrop-filter: blur(10px)) {
.tw-glass {
background: rgba(var(--surface-rgb, 255, 255, 255), .85);
backdrop-filter: blur(12px) saturate(1.3);
-webkit-backdrop-filter: blur(12px) saturate(1.3);
}
}
.tw-search {
flex: 1 1 auto;
min-width: 0;
max-width: 420px;
display: flex;
align-items: center;
gap: 8px;
border-radius: var(--radius-full);
padding: 9px 13px;
}
.tw-search input {
flex: 1;
min-width: 0;
border: 0;
background: transparent;
font: inherit;
font-size: 13.5px;
color: var(--text);
outline: 0;
}
.tw-search input::placeholder { color: var(--text-muted); }
.tw-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.tw-foot { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tw-foot > * { pointer-events: auto; }
.tw-chip {
font-size: 10.5px;
font-weight: 700;
color: var(--text-secondary);
border-radius: var(--radius-full);
padding: 4px 9px;
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
.tw-chip b { color: var(--text); font-weight: 800; }
.tw-chip.is-hub { color: var(--world-hub-ink); }
.tw-chip.is-hub i { width: 7px; height: 7px; border-radius: 50%; background: var(--world-hub); }
.tw-chip.is-hint { opacity: .75; animation: tw-nudge 3.4s ease-in-out infinite; }
@keyframes tw-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.tw-none {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
padding: 14px 22px;
border-radius: var(--radius-lg);
pointer-events: auto;
}
.tw-none-h { font-size: 14px; font-weight: 700; color: var(--text); }
.tw-none-p { font-size: 12.5px; color: var(--text-muted); margin: 0; }
.tw-none-act, .tw-note-act {
font: inherit;
font-size: 12.5px;
font-weight: 700;
color: var(--primary);
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.tw-none-act:hover, .tw-note-act:hover { color: var(--primary-hover); }
.tw-dot.is-assumed { opacity: .55; }
.tw-dot.is-assumed:hover, .tw-dot.is-assumed:focus, .tw-dot.is-assumed:active { opacity: 1; }
.tw-note {
display: flex;
align-items: center;
gap: 8px;
padding: 12px;
border-top: 1px solid var(--border-light);
font-size: 12.5px;
color: var(--text-secondary);
}
.tw-note b { color: var(--text); }
.tw-note .tw-pulse {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--primary);
flex: none;
animation: tw-blink 1.8s ease-in-out infinite;
}
@keyframes tw-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (min-width: 760px) {
.tw-map { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.tw-arc, .tw-cl, .tw-cl.is-hub::after, .tw-chip.is-hint, .tw-note .tw-pulse, .tw-dot.is-hit {
animation-duration: .01ms;
animation-iteration-count: 1;
}
.tw-cl, .tw-dot { transition: none; }
}
.msh { color: var(--text); }
.msh-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.msh-title { font-size: 22px; font-weight: 800; letter-spacing: -.4px; }
.msh-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.msh-total { margin-left: auto; font-size: 13px; color: var(--text-secondary); }
.msh-total b { color: var(--text); font-size: 15px; }
.msh-rail { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 18px; }
.msh-stage { flex: 1; min-width: 118px; border: 1px solid var(--border-light); border-top: 3px solid var(--sc, #6b7280);
border-radius: 12px; background: var(--surface); padding: 12px 10px; cursor: pointer; text-align: left;
transition: transform .12s, box-shadow .12s, border-color .12s; }
.msh-stage:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.msh-stage.on { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sc) 55%, transparent); }
.msh-stage-ic { font-size: 15px; line-height: 1; }
.msh-stage-n { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: var(--sc, var(--text)); margin-top: 3px; }
.msh-stage-l { font-size: 11.5px; color: var(--text-secondary); font-weight: 600; margin-top: 1px; }
.msh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.msh-card { background: var(--surface); border: 1px solid var(--border-light); border-left: 3px solid var(--sc, #6b7280);
border-radius: 12px; padding: 13px 14px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; }
.msh-card-top { display: flex; align-items: center; gap: 11px; }
.msh-ava { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800;
font-size: 13px; background: color-mix(in srgb, var(--sc) 14%, var(--surface)); color: var(--sc, var(--text)); }
.msh-card-meta { min-width: 0; flex: 1; }
.msh-name { display: block; font-weight: 700; font-size: 14.5px; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msh-name:hover { color: var(--primary); }
.msh-sub2 { display: flex; align-items: center; gap: 8px; margin-top: 3px; min-width: 0; }
.msh-chip { font-size: 10px; font-weight: 800; letter-spacing: .2px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex: none; color: var(--sc, #6b7280); background: color-mix(in srgb, var(--sc) 13%, transparent); }
.msh-status { font-size: 11.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msh-status.attn { color: var(--danger); font-weight: 600; }
.msh-health { display: flex; gap: 3px; align-items: flex-end; margin-left: auto; flex: none; }
.msh-health i { width: 5px; height: 15px; border-radius: 2px; background: var(--border-light); }
.msh-health.h4 i.on, .msh-health.h3 i.on { background: var(--success); }
.msh-health.h2 i.on { background: var(--warning); }
.msh-health.h1 i.on { background: var(--danger); }
.msh-card.is-attn { border-color: color-mix(in srgb, var(--danger) 30%, var(--border-light)); }
.msh-card-actions { display: flex; gap: 7px; }
.msh-btn { border: 1px solid var(--border-light); background: var(--surface); border-radius: 9px; padding: 8px 12px; font-weight: 700;
font-size: 13px; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.msh-btn:hover { border-color: var(--border-hover); }
.msh-btn--primary { flex: 1; background: var(--primary); border-color: var(--primary); color: #fff; }
.msh-head .msh-btn--primary { flex: 0 0 auto; }
.msh-btn--primary:hover { background: var(--primary-hover); color: #fff; }
.msh-empty { text-align: center; padding: 40px 20px; background: var(--surface-hover); border-radius: 12px; color: var(--text-muted); font-size: 14px; }
.msh-empty strong { display: block; color: var(--text); margin-bottom: 6px; font-size: 16px; }
@media (max-width: 640px) {
.msh-title { font-size: 20px; }
.msh-stage { min-width: 96px; }
.msh-grid { grid-template-columns: 1fr; }
}
.omm-dash {
color: var(--text);
max-width: var(--shell-max-width, 1800px);
position: relative;
--mode: #b41f51;
--dash-grid-reserve: 170px;
}
.omm-dash.is-recruiting { --mode: #e21b4d; }
.omm-dash.is-growth { --mode: #16a34a; }
.omm-dash::before {
content: '';
position: absolute;
inset: -60px -80px auto -80px;
height: 380px;
z-index: 0;
pointer-events: none;
background:
radial-gradient(1200px 360px at 12% -10%, color-mix(in srgb, var(--mode) 24%, transparent), transparent 70%),
radial-gradient(1000px 320px at 88% -20%, color-mix(in srgb, var(--mode) 15%, transparent), transparent 72%);
-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
transform-origin: 50% 0;
animation: ommAuraBreath 10s ease-in-out infinite;
will-change: opacity, transform;
}
.omm-dash::after {
content: '';
position: absolute;
inset: -60px -80px auto -80px;
height: 380px;
z-index: 0;
pointer-events: none;
background: radial-gradient(720px 280px at 32% -18%, color-mix(in srgb, var(--mode) 16%, transparent), transparent 66%);
-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
animation: ommAuraShine 15s ease-in-out infinite;
will-change: transform, opacity;
}
.omm-dash > * { position: relative; z-index: 1; }
@keyframes ommAuraBreath {
0%, 100% { opacity: .45; transform: scale(1); }
50% { opacity: 1; transform: scale(1.07); }
}
@keyframes ommAuraShine {
0% { transform: translateX(-18%); opacity: .15; }
50% { transform: translateX(18%); opacity: .9; }
100% { transform: translateX(-18%); opacity: .15; }
}
@media (prefers-reduced-motion: reduce) {
.omm-dash::before, .omm-dash::after { animation: none; }
}
.omm-welcome {
margin-bottom: 24px;
}
.omm-welcome h1 {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.6px;
color: var(--text);
}
.omm-welcome p {
font-size: 13px;
color: var(--text-secondary);
margin-top: 3px;
}
.omm-topbar {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.omm-topbar-greet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.omm-topbar-greet h1 { font-size: 25px; font-weight: 800; letter-spacing: -0.6px; color: var(--text); }
.omm-mode-pill {
font-weight: 800;
font-size: 12.5px;
color: #fff;
background: linear-gradient(135deg, var(--mode), color-mix(in srgb, var(--mode) 62%, #000));
padding: 5px 13px;
border-radius: 999px;
box-shadow: 0 6px 18px color-mix(in srgb, var(--mode) 45%, transparent);
}
.omm-mode-sem { font-weight: 700; color: var(--text-secondary); font-size: 13.5px; }
.omm-topbar-lead p { font-size: 13px; color: var(--text-secondary); margin-top: 8px; }
.omm-topbar-stats { display: flex; gap: 28px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 14px; }
.omm-hero--goal .omm-hero-lbl { max-width: 160px; margin-left: auto; }
.omm-stats {
display: flex;
gap: 10px;
margin-bottom: 18px;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 4px;
scrollbar-width: thin;
scroll-snap-type: x proximity;
overscroll-behavior-x: contain;
}
.omm-stats::-webkit-scrollbar { height: 6px; }
.omm-stats::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 999px; }
.omm-stat {
flex: 0 0 auto;
min-width: 144px;
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "icon val" "icon lbl";
column-gap: 12px;
align-items: center;
background: var(--surface);
border-radius: var(--radius, 12px);
padding: 13px 18px;
border: 1px solid var(--border-light);
transition: var(--transition);
position: relative;
overflow: hidden;
scroll-snap-align: start;
}
.omm-stat:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.omm-stat-sep {
flex: 0 0 auto;
align-self: stretch;
width: 1px;
margin: 4px 3px;
background: var(--border-light);
}
.omm-stat-icon {
grid-area: icon;
font-size: 24px;
align-self: center;
line-height: 1;
}
.omm-stat-val {
grid-area: val;
font-size: 24px;
font-weight: 800;
letter-spacing: -0.5px;
line-height: 1.1;
}
.omm-stat-lbl {
grid-area: lbl;
font-size: 11px;
font-weight: 500;
color: var(--text-muted);
white-space: nowrap;
margin-top: 2px;
}
.omm-stat.s-students .omm-stat-val { color: var(--primary); }
.omm-stat.s-events .omm-stat-val { color: var(--success); }
.omm-stat.s-checkin .omm-stat-val { color: var(--warning); }
.omm-stat.s-coins .omm-stat-val { color: #af52de; }
.omm-stat.s-engage .omm-stat-val { color: var(--info); }
.omm-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr);
gap: 18px;
align-items: stretch;
}
.omm-right-rail {
display: flex;
flex-direction: column;
gap: 18px;
}
.omm-right-rail > .omm-card { flex-shrink: 0; }
.omm-grid.has-my-tasks .omm-my-tasks-card { grid-column: 1; grid-row: 1; min-width: 0; }
.omm-grid.has-my-tasks .omm-cal-card { grid-column: 2; grid-row: 1; min-width: 0; }
.omm-grid.has-my-tasks .omm-right-rail { grid-column: 3; grid-row: 1; min-width: 0; }
.omm-card {
background: var(--surface);
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
overflow: hidden;
display: flex;
flex-direction: column;
}
.omm-card-head {
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--border-light);
flex-shrink: 0;
}
.omm-card-title {
font-size: 13px;
font-weight: 700;
color: var(--text);
display: flex;
align-items: center;
gap: 6px;
}
.omm-card-title .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--success);
animation: ommpulse 2s infinite;
}
@keyframes ommpulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.omm-card-action {
font-size: 11px;
color: var(--primary);
text-decoration: none;
font-weight: 600;
cursor: pointer;
}
.omm-card-action:hover { text-decoration: underline; }
.omm-card-body {
flex: 1;
overflow-y: auto;
max-height: 420px;
}
.omm-card-body.feed { max-height: 220px; }
.omm-cal-card .omm-card-body { max-height: none; overflow: visible; }
.omm-cal-card .cal-wall.is-month { height: clamp(340px, 96vw, 470px); }
.omm-cal-card .cal-wall.is-list { max-height: 520px; }
@media (min-width: 1101px) {
.omm-grid.has-my-tasks { max-height: calc(100vh - var(--dash-grid-reserve, 170px)); grid-template-rows: auto minmax(0, 1fr); }
.omm-grid.has-my-tasks > .omm-my-tasks-card,
.omm-grid.has-my-tasks > .omm-cal-card,
.omm-grid.has-my-tasks > .omm-right-rail { min-height: 0; }
.omm-my-tasks-card { overflow-y: auto; }
.omm-right-rail { overflow-y: visible; }
.omm-grid.has-my-tasks .omm-feed-card { grid-column: 3; grid-row: 1; min-width: 0; }
.omm-grid.has-my-tasks .omm-cal-card { grid-row: 1 / 3; }
.omm-cal-card { display: flex; flex-direction: column; }
.omm-cal-card .omm-card-body {
max-height: none;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
flex: 1;
}
.omm-cal-card .cal-wall.is-month { flex: 1.3 1 0; height: auto; min-height: 340px; }
.omm-cal-card .cal-wall.is-list { flex: 1 1 0; min-height: 160px; max-height: none; }
.omm-grid.has-my-tasks > .omm-cal-card { min-height: calc(100vh - var(--dash-grid-reserve, 170px)); }
}
.omm-bday-strip {
display: flex;
gap: 14px;
padding: 14px 18px;
overflow-x: auto;
border-bottom: 1px solid var(--border-light);
}
.omm-bday {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex-shrink: 0;
width: 56px;
}
.omm-bday-av {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--primary);
background: var(--primary-soft);
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
}
.omm-bday-name {
font-size: 9.5px;
font-weight: 600;
color: var(--text);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 56px;
}
.omm-bday-date { font-size: 9px; color: var(--text-muted); }
.omm-bday-head {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
padding: 12px 18px 0;
}
.omm-feed-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 11px 18px;
border-bottom: 1px solid var(--border-light);
transition: background 0.15s;
}
.omm-feed-item:last-child { border-bottom: none; }
.omm-feed-item:hover { background: var(--surface-hover); }
.omm-fi {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
}
.omm-fi.checkin { background: var(--success-bg); }
.omm-fi.user { background: var(--primary-soft); }
.omm-fi.event { background: var(--info-bg); }
.omm-fi.alert { background: var(--danger-bg); }
.omm-fi.meeting { background: rgba(175, 82, 222, 0.1); }
.omm-feed-body { flex: 1; min-width: 0; }
.omm-feed-text { font-size: 12.5px; color: var(--text); line-height: 1.45; }
.omm-feed-text b { font-weight: 600; }
.omm-feed-time { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.omm-cal-card .omm-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.omm-cal-month { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.omm-cal-head { color: inherit; text-decoration: none; cursor: pointer; transition: background-color .14s ease; }
.omm-cal-head:hover { background: var(--surface-hover); }
.omm-cal-head:hover .omm-card-title, .omm-cal-head:focus-visible .omm-card-title { color: var(--primary); }
.omm-cal-head:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.omm-cal-go { display: inline-block; margin-left: 2px; color: var(--primary); transition: transform .14s ease; }
.omm-cal-head:hover .omm-cal-go { transform: translateX(3px); }
.omm-tasks-count {
background: var(--primary);
color: #fff;
font-size: 11px;
font-weight: 700;
min-width: 20px;
height: 20px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 6px;
margin-left: 6px;
}
.omm-task-row {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-bottom: 1px solid var(--border-light);
}
.omm-task-row:last-child { border-bottom: none; }
.omm-task-info { flex: 1; min-width: 0; }
.omm-task-name {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
}
.omm-task-campaign {
display: block;
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.omm-task-btn {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1.5px solid var(--primary);
background: transparent;
color: var(--primary);
font-size: 14px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s, color 0.15s;
}
.omm-task-btn:hover { background: var(--primary); color: #fff; }
.omm-tasks-scroll {
max-height: 400px;
overflow-y: auto;
scrollbar-width: thin;
}
.omm-actions-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
padding: 14px;
}
.omm-action-card {
background: var(--surface-hover);
border-radius: var(--radius);
padding: 9px 6px;
text-align: center;
cursor: pointer;
transition: var(--transition);
text-decoration: none;
border: 1px solid transparent;
}
.omm-action-card:hover {
background: var(--primary-soft);
border-color: var(--primary);
transform: translateY(-1px);
}
.omm-action-card .ac-icon { font-size: 16px; display: block; margin-bottom: 3px; }
.omm-action-card .ac-text { font-size: 11px; font-weight: 600; color: var(--text); }
.omm-alert-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
border-bottom: 1px solid var(--border-light);
}
.omm-alert-row:last-child { border-bottom: none; }
.omm-alert-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.omm-alert-dot.warn { background: var(--warning); }
.omm-alert-dot.err { background: var(--danger); }
.omm-alert-dot.info { background: var(--info); }
.omm-alert-text { font-size: 12px; color: var(--text); flex: 1; }
.omm-alert-action {
font-size: 11px;
color: var(--primary);
font-weight: 600;
text-decoration: none;
flex-shrink: 0;
}
.omm-alert-action:hover { text-decoration: underline; }
.omm-top-student {
display: flex;
align-items: center;
gap: 10px;
padding: 5px 18px;
}
.omm-top-rank { font-size: 12px; font-weight: 700; width: 18px; color: var(--text-muted); }
.omm-top-student:first-child .omm-top-rank { color: var(--warning); }
.omm-top-name { font-size: 12.5px; font-weight: 600; color: var(--text); flex: 1; }
.omm-top-meta { font-size: 11px; color: var(--text-secondary); font-weight: 600; }
.omm-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: 12px; }
@media (max-width: 1100px) {
.omm-grid,
.omm-grid.has-my-tasks { grid-template-columns: 1fr; }
.omm-grid.has-my-tasks .omm-my-tasks-card,
.omm-grid.has-my-tasks .omm-feed-card,
.omm-grid.has-my-tasks .omm-cal-card,
.omm-grid.has-my-tasks .omm-right-rail { grid-column: 1; grid-row: auto; }
}
.omm-bday-mobile { display: none; }
@media (max-width: 768px) {
.omm-stats { gap: 8px; }
.omm-actions-grid { grid-template-columns: repeat(2, 1fr); }
.omm-welcome h1 { font-size: 20px; }
.omm-grid.has-my-tasks { display: flex; flex-direction: column; }
.omm-grid.has-my-tasks .omm-my-tasks-card { order: 1; }
.omm-grid.has-my-tasks .omm-feed-card { order: 2; }
.omm-grid.has-my-tasks .omm-bday-mobile { order: 3; display: block; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg, 16px); padding: 12px 6px 8px; }
.omm-grid.has-my-tasks .omm-cal-card { order: 4; }
.omm-grid.has-my-tasks .omm-right-rail { order: 5; }
.omm-bday-feed { display: none; }
}
.omm-funnel { border: 0; background: transparent; padding: 0; margin-bottom: 22px; position: relative; overflow: visible; animation: omm-funnel-in .4s ease; will-change: opacity, transform; }
.omm-funnel::before { display: none; }
.omm-funnel.mode-recruiting { --mode: #e21b4d; }
.omm-funnel.mode-growth { --mode: #16a34a; }
@keyframes omm-funnel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.omm-funnel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.omm-funnel-title { display: flex; align-items: center; gap: 10px; }
.omm-funnel-badge { font-weight: 800; font-size: 13px; color: #fff; background: var(--mode); padding: 5px 12px; border-radius: 999px; }
.omm-funnel-sem { font-weight: 700; color: var(--text-secondary, #5b6472); font-size: 13px; }
.omm-funnel-heroes { display: flex; gap: 22px; }
.omm-hero { text-align: right; }
.omm-hero-val { font-size: 26px; font-weight: 800; line-height: 1; color: var(--mode); }
.omm-hero-lbl { font-size: 11px; color: var(--text-secondary, #5b6472); margin-top: 4px; line-height: 1.25; }
.omm-pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.omm-phase {
border: 1px solid color-mix(in srgb, var(--ph) 20%, var(--border-light, #e5e7eb));
border-top: 3px solid var(--ph, #888);
border-radius: 16px;
padding: 14px;
background: color-mix(in srgb, var(--surface, #fff) 72%, transparent);
-webkit-backdrop-filter: blur(12px) saturate(1.15);
backdrop-filter: blur(12px) saturate(1.15);
box-shadow: 0 10px 30px color-mix(in srgb, var(--ph) 12%, transparent), 0 2px 8px rgba(0,0,0,.05);
display: flex;
flex-direction: column;
gap: 10px;
opacity: .9;
transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, opacity .2s ease;
}
.omm-phase.is-active { opacity: 1; box-shadow: 0 18px 44px color-mix(in srgb, var(--ph) 24%, transparent), 0 3px 10px rgba(0,0,0,.06); }
.omm-phase:hover { transform: translateY(-4px); box-shadow: 0 22px 50px color-mix(in srgb, var(--ph) 28%, transparent), 0 4px 12px rgba(0,0,0,.07); }
.omm-bloom { display: flex; flex-direction: column; gap: 10px; }
.fi-topbar { position: relative; }
.omm-toprail {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
display: flex; align-items: center; gap: 6px;
z-index: 5; --mode: #b41f51;
will-change: opacity, transform;
}
.omm-toprail.is-recruiting { --mode: #e21b4d; }
.omm-toprail.is-growth { --mode: #16a34a; }
.omm-toprail-mode { font-size: 15px; }
.omm-toprail-phase {
position: relative;
display: flex; align-items: center; gap: 5px;
padding: 4px 9px; border-radius: 9px;
background: color-mix(in srgb, var(--ph) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--ph) 24%, transparent);
cursor: default; white-space: nowrap; transition: background .15s ease;
}
.omm-toprail-phase:hover, .omm-toprail-phase:focus-visible { background: color-mix(in srgb, var(--ph) 18%, transparent); outline: none; }
.omm-toprail-phase.is-active { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ph) 34%, transparent) inset; }
.omm-toprail-ico { font-size: 13px; }
.omm-toprail-p { font-weight: 800; font-size: 11.5px; color: var(--text, #1f2937); }
.omm-toprail-num { font-weight: 800; font-size: 13px; color: var(--ph); }
.omm-toprail-bloom {
position: absolute; top: calc(100% + 9px); left: 50%;
transform: translate(-50%, -6px);
min-width: 210px; z-index: 70;
background: var(--surface, #fff);
border: 1px solid var(--border-light, #e5e7eb);
border-top: 3px solid var(--ph);
border-radius: 12px; padding: 11px 13px;
box-shadow: 0 22px 54px rgba(0,0,0,.2);
opacity: 0; pointer-events: none;
transition: opacity .16s ease, transform .16s ease;
}
.omm-toprail-phase:hover .omm-toprail-bloom, .omm-toprail-phase:focus-within .omm-toprail-bloom { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.omm-toprail-bloom-head { font-weight: 800; font-size: 12px; color: var(--text, #1f2937); margin-bottom: 7px; }
.omm-toprail-bloom-head .band { font-size: 9.5px; font-weight: 700; color: var(--ph); letter-spacing: .5px; }
.omm-toprail-bloom-row { display: flex; align-items: baseline; gap: 5px; font-size: 11.5px; color: var(--text-secondary, #5b6472); margin-bottom: 2px; }
.omm-toprail-bloom-row strong { font-size: 13px; color: var(--text, #1f2937); }
.omm-toprail-bloom-row .tgt { color: var(--text-muted, #9ca3af); }
.omm-toprail-bloom-ev { font-size: 11px; color: var(--text, #1f2937); margin-top: 4px; display: flex; justify-content: space-between; gap: 8px; }
.omm-toprail-bloom-ev span { color: var(--text-muted, #9ca3af); }
.omm-toprail-bloom-empty { font-size: 10.5px; color: var(--text-muted, #9ca3af); font-style: italic; margin-top: 3px; }
@media (max-width: 1200px) { .omm-toprail { display: none; } }
.omm-phase-head { display: flex; align-items: center; gap: 9px; }
.omm-phase-ico { font-size: 20px; }
.omm-phase-name { font-weight: 800; font-size: 12.5px; color: var(--text, #1f2937); }
.omm-phase-band { font-size: 10px; font-weight: 700; letter-spacing: .5px; color: var(--ph); text-transform: uppercase; }
.omm-phase-now { margin-left: auto; display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; padding: 0; border: 0; background: none; cursor: pointer; line-height: 1; }
.omm-phase-now strong { font-size: 26px; font-weight: 800; color: var(--ph); font-variant-numeric: tabular-nums; }
.omm-phase-now span { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.omm-phase-now:hover strong, .omm-phase-now:focus-visible strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.omm-goal { display: flex; flex-direction: column; gap: 4px; }
.omm-goal-row { display: flex; align-items: center; justify-content: space-between; }
.omm-goal-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted, #9ca3af); }
.omm-goal-set { border: 0; background: none; cursor: pointer; font-size: 13px; color: var(--text, #1f2937); padding: 0; display: inline-flex; align-items: baseline; gap: 3px; }
.omm-goal-set strong { font-size: 15px; }
.omm-goal-tgt { color: var(--text-muted, #9ca3af); font-size: 12px; }
.omm-goal-pen { opacity: 0; font-size: 10px; transition: var(--transition, .15s); }
.omm-goal-set:hover .omm-goal-pen { opacity: .6; }
.omm-goal-bar { height: 6px; border-radius: 999px; background: var(--border-light, #eef0f2); overflow: hidden; }
.omm-goal-bar > span { display: block; height: 100%; background: var(--ph, #888); border-radius: 999px; transition: width .4s ease; }
.omm-goal-bar.is-mine > span { background: var(--text-secondary, #5b6472); }
.omm-phase-events { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; max-height: 92px; overflow-y: auto; scrollbar-width: thin; }
.omm-phase-events::-webkit-scrollbar { width: 5px; }
.omm-phase-events::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ph) 30%, transparent); border-radius: 999px; }
.omm-phase-pshort, .omm-phase-pillnum, .omm-bloom-close, .omm-phase-backdrop { display: none; }
.omm-phase-ev { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--ph) 8%, transparent); text-decoration: none; }
.omm-phase-ev:hover { background: color-mix(in srgb, var(--ph) 16%, transparent); }
.omm-phase-ev-name { font-size: 12px; font-weight: 600; color: var(--text, #1f2937); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omm-phase-ev-meta { font-size: 10.5px; color: var(--text-secondary, #5b6472); }
.omm-phase-ev--past { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ph) 16%, transparent); }
.omm-phase-ev--past:hover { background: color-mix(in srgb, var(--ph) 8%, transparent); }
.omm-phase-ev--past .omm-phase-ev-name { font-weight: 500; opacity: .78; }
.omm-ev-stat { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.omm-ev-stat i { font-style: normal; font-weight: 600; opacity: .55; }
.omm-ev-stat--r { color: #e21b4d; }
.omm-ev-stat--g { color: #0f766e; }
.omm-phase-empty { font-size: 11px; color: var(--text-muted, #9ca3af); font-style: italic; padding: 4px 0; }
@media (max-width: 980px) {
.omm-pipeline { grid-template-columns: repeat(2, 1fr); }
.omm-funnel-heroes { gap: 16px; }
}
@media (max-width: 560px) {
.omm-funnel-head { flex-direction: column; align-items: flex-start; }
.omm-hero { text-align: left; }
}
@media (max-width: 700px) {
.omm-pipeline {
display: flex;
flex-wrap: nowrap;
gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.omm-pipeline::-webkit-scrollbar { height: 5px; }
.omm-pipeline::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 999px; }
.omm-phase {
flex: 0 0 auto;
min-width: 0;
padding: 8px 13px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--ph) 32%, var(--border-light, #e5e7eb));
background: color-mix(in srgb, var(--ph) 10%, var(--surface, #fff));
box-shadow: none;
opacity: 1;
cursor: pointer;
gap: 0;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.omm-phase.is-active { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ph) 34%, transparent) inset; }
.omm-phase:hover { transform: none; box-shadow: none; }
.omm-phase-head { gap: 6px; cursor: pointer; }
.omm-phase-htext { display: none; }
.omm-phase-ico { font-size: 15px; }
.omm-phase-pshort { display: inline; font-weight: 800; font-size: 12px; color: var(--text, #1f2937); }
.omm-phase-pillnum { display: inline; font-weight: 800; font-size: 14px; color: var(--ph); }
.omm-phase-now { display: none; }
.omm-funnel { z-index: auto; will-change: auto; animation: none; }
.omm-funnel:has(.omm-phase.is-open) { z-index: 300; }
.omm-pipeline.has-open { position: relative; z-index: 300; }
.omm-phase .omm-bloom { display: none; }
.omm-phase.is-open .omm-bloom {
display: flex;
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: min(92vw, 400px);
max-height: 80vh;
overflow-y: auto;
z-index: 210;
background: var(--surface, #fff);
border: 1px solid var(--border-light, #e5e7eb);
border-top: 3px solid var(--ph);
border-radius: 16px;
padding: 20px 16px 16px;
box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.omm-phase.is-open .omm-phase-events { max-height: none; }
.omm-bloom-close {
display: block;
position: absolute; top: 8px; right: 10px;
border: 0; background: none; padding: 4px;
font-size: 16px; line-height: 1; color: var(--text-muted, #9ca3af); cursor: pointer;
}
.omm-phase-backdrop {
display: block;
position: fixed; inset: 0; z-index: 200;
background: rgba(0, 0, 0, .45);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
}
@media (max-width: 900px) { .omm-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 640px) { .omm-pipeline { grid-template-columns: repeat(2, 1fr) !important; } }
.omm-phase-link { color: inherit; text-decoration: none; }
.omm-phase-link:hover { text-decoration: underline; }
.omm-phase-go { opacity: .5; }
a.omm-toprail-phase { text-decoration: none; cursor: pointer; }
@media (min-width: 1101px) {
.omm-grid.has-my-tasks .omm-my-tasks-card { grid-column: 1; grid-row: 1 / 3; }
.omm-grid.has-my-tasks .omm-right-rail { grid-row: 2 / 3; }
}
.omm-goal-n, .omm-goal-g {
border: 0; background: none; padding: 0; cursor: pointer; color: inherit;
font: inherit; display: inline-flex; align-items: baseline; gap: 3px;
}
.omm-goal-n strong { font-size: 15px; }
.omm-goal-n:hover strong { text-decoration: underline; text-underline-offset: 2px; }
.rg { --rg-head: 238px; --rg-pad: 18px; display: flex; flex-direction: column; gap: 18px; color: var(--text); }
.rg-card { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.rg-empty, .rg-quiet { color: var(--text-secondary); font-size: 13px; }
.rg-empty { padding: 28px; text-align: center; }
.rg-top { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.rg-top h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
.rg-top p { margin: 4px 0 0; color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.rg-top__side { margin-left: auto; display: flex; gap: 8px; }
.rg-pill { font-size: 12px; font-weight: 700; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-full); padding: 6px 12px; white-space: nowrap; text-decoration: none; }
a.rg-pill:hover, a.rg-pill:focus-visible { color: var(--primary); border-color: var(--primary); }
.rg-scroll { overflow-x: auto; border-radius: inherit; }
.rg-frame { min-width: calc(var(--rg-head) + 2 * var(--rg-pad) + var(--rg-track-min, 860px)); }
.rg-axisrow, .rg-lanes { display: grid; grid-template-columns: var(--rg-head) minmax(0, 1fr); }
.rg-axisrow { border-bottom: 1px solid var(--border-light); }
.rg-legend { padding: 12px var(--rg-pad) 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; font-size: 10.5px; font-weight: 700; color: var(--text-muted); }
.rg-legend span { display: inline-flex; align-items: center; gap: 4px; }
.rg-lg { display: inline-block; width: 15px; height: 0; border-top: 2px solid var(--text-secondary); }
.rg-lg.is-goal { border-top-style: dashed; }
.rg-lg.is-actual { border-top-color: var(--text-muted); border-top-width: 3px; }
.rg-lg.is-stair { border-top-style: dotted; border-top-width: 3px; }
.rg-lg.is-short { width: 5px; height: 11px; border: 0; border-radius: 2px; background: color-mix(in srgb, var(--danger) 45%, transparent); }
.rg-legend .rg-evdot { position: static; transform: none; --pc: var(--text-secondary); }
.rg-axis { position: relative; height: 34px; margin: 12px var(--rg-pad) 6px; }
.rg-tick { position: absolute; bottom: 0; width: 1px; height: 7px; background: var(--border); }
.rg-month { position: absolute; top: 2px; padding-left: 4px; border-left: 1px solid var(--border); font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-secondary); }
.rg-lanes { position: relative; }
.rg-lane { display: contents; }
.rg-today { position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none;
left: calc(var(--rg-head) + var(--rg-pad) + (100% - var(--rg-head) - 2 * var(--rg-pad)) * var(--x));
border-left: 1.5px solid color-mix(in srgb, var(--text) 45%, transparent); }
.rg-today span { position: absolute; top: -24px; left: 0; transform: translateX(-50%); font-size: 10px; font-weight: 800; color: var(--surface); background: var(--text); border-radius: var(--radius-full); padding: 2px 8px; white-space: nowrap; }
.rg-head, .rg-track { border-bottom: 1px solid var(--border-light); animation: rg-in .45s ease-out backwards var(--dl, 0s); }
.rg-lane:last-child .rg-head, .rg-lane:last-child .rg-track { border-bottom: 0; }
.rg-head { padding: 16px var(--rg-pad); border-left: 4px solid var(--pc); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.rg-name { font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 7px; }
.rg-name__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pc); }
.rg-rule { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); padding-left: 15px; }
.rg-big { margin-top: 6px; display: flex; align-items: baseline; gap: 6px; }
.rg-big b { font-size: 32px; font-weight: 800; letter-spacing: -1px; line-height: 1; color: var(--pc); }
.rg-big span { font-size: 15px; font-weight: 700; color: var(--text-muted); }
.rg-pen { border: 0; background: none; padding: 0 2px; cursor: pointer; font-size: 12px; color: var(--text-muted); }
.rg-pen:hover, .rg-pen:focus-visible, .rg-pen:active { color: var(--primary); }
.rg-sub { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.rg-due input { border: 1px solid var(--border-light); border-radius: var(--radius); background: var(--surface); color: inherit; font: inherit; font-size: 11.5px; padding: 1px 4px; }
.rg-due input:disabled { opacity: .5; }
.rg-bar { position: relative; align-self: stretch; height: 6px; margin: 8px 0 8px; border-radius: 3px; background: var(--surface-active); overflow: hidden; }
.rg-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; transform-origin: left; animation: rg-grow .9s cubic-bezier(.2, .8, .2, 1) backwards .25s; }
.rg-bar .pl { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--pc) 40%, transparent) 0 3px, color-mix(in srgb, var(--pc) 15%, transparent) 3px 6px); }
.rg-bar .nw { background: var(--pc); }
.rg-pills { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.rg-status { font-size: 11px; font-weight: 800; border-radius: var(--radius-full); padding: 4px 9px; }
.rg-status.is-bad { color: var(--danger-text); background: var(--danger-bg); }
.rg-status.is-warn { color: var(--warning-text); background: var(--warning-bg); }
.rg-status.is-ok { color: var(--success-text); background: var(--success-bg); }
.rg-status.is-info { color: var(--text-secondary); background: var(--surface-active); }
.rg-link { margin-top: 8px; border: 0; background: none; padding: 0; cursor: pointer; font-size: 11.5px; font-weight: 700; color: var(--primary); }
.rg-link:hover, .rg-link:focus-visible, .rg-link:active { text-decoration: underline; }
.rg-track { position: relative; padding: 16px var(--rg-pad) 8px; min-width: 0; }
.rg-plot { position: relative; height: 112px; margin-bottom: 6px; }
.rg-chart { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rg-goal { stroke: var(--pc); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; opacity: .75; }
.rg-dueline { stroke: var(--pc); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .3; }
.rg-gap { fill: color-mix(in srgb, var(--danger) 40%, transparent); }
.rg-plan { fill: none; stroke: var(--pc); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke;
stroke-dasharray: 1600; stroke-dashoffset: 0; animation: rg-draw 1.4s ease-out backwards .35s; }
.rg-actual { fill: none; stroke: color-mix(in srgb, var(--pc) 45%, var(--text-muted)); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rg-stair { fill: none; stroke: var(--pc); stroke-width: 2; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; opacity: .8; }
.rg-duelab { position: absolute; z-index: 3; transform: translate(8px, -8px); padding: 0 6px; border-radius: var(--radius); background: var(--surface); font-size: 10.5px; font-weight: 700; line-height: 1.4; color: var(--text-secondary); white-space: nowrap; }
.rg-duelab.is-left { transform: translate(calc(-100% - 8px), -8px); text-align: right; }
.rg-duelab b { color: var(--pc); font-weight: 800; }
.rg-duelab .bad { color: var(--danger-text); font-weight: 800; }
.rg-duelab .ok { color: var(--success-text); font-weight: 800; }
.rg-now { position: absolute; z-index: 4; transform: translate(-50%, -50%); }
.rg-now b { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; box-sizing: border-box; border-radius: 12px; font-size: 11px; font-weight: 800; color: var(--on-primary); background: var(--pc); box-shadow: 0 0 0 3px var(--surface); }
.rg-chk { position: absolute; transform: translate(4px, calc(-100% - 1px)); font-size: 10px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.rg-chk b { color: var(--pc); font-weight: 800; }
.rg-cross { position: absolute; z-index: 3; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--surface); box-shadow: 0 0 0 2.5px var(--danger); }
.rg-strip { position: relative; height: 88px; }
.rg-leads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rg-base { stroke: var(--border-light); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rg-lead { stroke: color-mix(in srgb, var(--pc) 45%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rg-evdot { position: absolute; top: 44px; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--pc); box-shadow: 0 0 0 2px var(--surface); display: inline-block; }
.rg-evdot.is-conv { width: 8px; height: 8px; border-radius: 1px; transform: translate(-50%, -50%) rotate(45deg); }
.rg-evdot.is-nogoal { width: 8px; height: 8px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--warning), 0 0 0 2px var(--surface); }
.rg-evdot.is-late { background: var(--danger); }
.rg-evdot.is-room { background: var(--surface); box-shadow: inset 0 0 0 2.5px var(--pc), 0 0 0 2px var(--surface); }
.rg-evdot.is-past { background: color-mix(in srgb, var(--pc) 35%, var(--surface-active)); }
.rg-evl { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 10.5px; line-height: 13px; white-space: nowrap; overflow: hidden; color: inherit; text-decoration: none; cursor: pointer; }
button.rg-evl { border: 0; background: none; padding: 0; font-family: inherit; }
.rg-evl:hover b, .rg-evl:focus-visible b, .rg-evl:active b { color: var(--primary); text-decoration: underline; }
.rg-evl b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.rg-evl em { font-style: normal; font-weight: 800; color: var(--pc); }
.rg-evl.is-nogoal em { color: var(--warning-text); }
.rg-evl.is-late em { color: var(--danger-text); }
.rg-evl.is-room em { color: var(--text-secondary); }
.rg-evl.is-past { color: var(--text-secondary); }
.rg-evl.is-past em { color: var(--text-secondary); }
.rg-enote { position: absolute; top: 34px; left: 0; font-size: 11px; font-style: italic; color: var(--text-muted); }
.rg-hold, .rg-plans { padding: 16px var(--rg-pad); }
.rg-hold h2, .rg-plans h2 { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
.rg-hold ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.rg-hold li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius); border-left: 3px solid var(--border); background: var(--surface-hover); font-size: 12.5px; line-height: 1.45; }
.rg-hold li.is-bad { border-left-color: var(--danger); background: var(--danger-bg); }
.rg-hold li.is-warn { border-left-color: var(--warning); background: var(--warning-bg); }
.rg-hold li > span { flex: 1; }
.rg-hold li a { font-size: 12px; font-weight: 800; color: var(--primary); white-space: nowrap; text-decoration: none; }
.rg-hold li a:hover, .rg-hold li a:focus-visible, .rg-hold li a:active { text-decoration: underline; }
.rg-plans h2 span { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.rg-tablewrap { overflow-x: auto; }
.rg-plans table { width: 100%; min-width: 1060px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.rg-plans col.c-when { width: 84px; } .rg-plans col.c-event { width: 190px; } .rg-plans col.c-goal { width: 220px; }
.rg-plans col.c-who { width: 190px; } .rg-plans col.c-steps { width: 220px; }
.rg-plans th { padding: 6px 10px; border-bottom: 1px solid var(--border-light); text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); }
.rg-plans td { padding: 9px 10px; border-bottom: 1px solid var(--border-light); vertical-align: top; line-height: 1.5; }
.rg-plans tr.is-past td { opacity: .7; }
.ep-when { white-space: nowrap; font-weight: 700; color: var(--text-secondary); }
.ep-ev { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-ev a, .ep-start { color: inherit; text-decoration: none; }
.ep-start { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
.ep-ev a:hover, .ep-ev a:focus-visible, .ep-ev a:active, .ep-start:hover, .ep-start:focus-visible, .ep-start:active { color: var(--primary); text-decoration: underline; }
.ep-ev a.ep-edit { margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.ep-kv { margin: 0; display: grid; gap: 3px; }
.ep-kv > div { display: flex; align-items: baseline; gap: 6px; }
.ep-kv dt { flex: 0 0 66px; font-size: 10px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--text-muted); }
.ep-kv dd { flex: 1; min-width: 0; margin: 0; }
.ep-ph { display: inline-block; margin-right: 7px; padding: 1px 7px; border-radius: var(--radius-full); font-size: 10px; font-weight: 800; color: var(--on-primary); background: var(--pc); }
.ep-next, .ep-soft { display: block; font-size: 11.5px; color: var(--text-secondary); }
.ep-soft { font-size: 11px; color: var(--text-muted); }
.ep-miss, .ep-bad { display: inline-block; padding: 1px 8px; border-radius: var(--radius-full); font-size: 10.5px; font-weight: 800; }
.ep-miss { color: var(--warning-text); background: var(--warning-bg); }
.ep-bad { color: var(--danger-text); background: var(--danger-bg); }
.ep-who { display: inline-block; margin: 0 3px 2px 0; padding: 1px 7px; border-radius: var(--radius-full); background: var(--surface-active); font-size: 10.5px; font-weight: 700; }
.ep-aim, .ep-add { border: 0; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 800; border-radius: var(--radius-full); padding: 1px 8px; }
.ep-aim { color: var(--pc); background: color-mix(in srgb, var(--pc) 12%, var(--surface)); }
.ep-aim.is-miss { color: var(--warning-text); background: var(--warning-bg); }
.ep-add { color: var(--text-muted); background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.ep-aim:hover, .ep-aim:focus-visible, .ep-aim:active, .ep-add:hover, .ep-add:focus-visible, .ep-add:active { box-shadow: inset 0 0 0 1.5px currentColor; }
.ep-conv { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.ep-has { display: flex; flex-wrap: wrap; gap: 4px; }
.ep-has i { font-style: normal; font-size: 10.5px; font-weight: 700; border-radius: var(--radius-full); padding: 1px 8px; }
.ep-has i.y { color: var(--success-text); background: var(--success-bg); }
.ep-has i.y::before { content: "✓ "; }
.ep-has i.n { color: var(--text-muted); background: var(--surface-active); }
.ep-has i.n::before { content: "✗ "; }
.rg-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; }
.rg-modal__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--text) 35%, transparent); }
.rg-modal__box { position: relative; width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow-y: auto; padding: 18px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg, var(--shadow-sm)); }
.rg-modal__box h3 { margin: 0 0 4px; font-size: 15px; font-weight: 800; }
.rg-modal__box p { margin: 0 0 12px; font-size: 12px; color: var(--text-secondary); }
.rg-cprow { display: grid; grid-template-columns: 1fr 110px; gap: 8px; margin-bottom: 6px; }
.rg-cprow input { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: inherit; font: inherit; font-size: 13px; padding: 6px 8px; }
.rg-modal__bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.rg-modal__fill { flex: 1; }
.rg-btn { border: 1px solid var(--primary); border-radius: var(--radius); padding: 6px 14px; background: var(--primary); color: var(--on-primary); font-size: 12.5px; font-weight: 800; cursor: pointer; }
.rg-btn.is-ghost { background: transparent; color: var(--primary); }
.rg-dash { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--surface); font-size: 12.5px; font-weight: 700; }
.rg-dash a { text-decoration: none; }
.rg-dash__h { font-weight: 800; white-space: nowrap; color: var(--text); }
.rg-dash__s { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--text-secondary); }
.rg-dash__s i { width: 8px; height: 8px; border-radius: 50%; background: var(--pc); }
.rg-dash__s b { color: var(--text); }
.rg-dash__s em { font-style: normal; font-weight: 800; }
.rg-dash__s em.is-bad { color: var(--danger-text); }
.rg-dash__s em.is-ok { color: var(--success-text); }
.rg-dash__go { margin-left: auto; font-weight: 800; white-space: nowrap; color: var(--primary); }
.rg-dash a:hover, .rg-dash a:focus-visible, .rg-dash a:active { text-decoration: underline; }
@keyframes rg-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes rg-grow { from { transform: scaleX(0); } }
@keyframes rg-draw { from { stroke-dashoffset: 1600; } }
@media (prefers-reduced-motion: reduce) { .rg-head, .rg-track, .rg-bar span, .rg-plan { animation: none; } }
.lv-tabn { display: inline-grid; place-items: center; min-width: 20px; height: 18px; margin-left: 5px; padding: 0 6px; border-radius: 999px;
font-size: 11px; font-weight: 800; background: color-mix(in srgb, var(--pc) 14%, var(--surface)); color: var(--pc); }
.lv-attn .who.lv-go { color: var(--pc); background: color-mix(in srgb, var(--pc) 10%, var(--surface)); }
.lv-attn .who.lv-go:hover, .lv-attn .who.lv-go:active, .lv-attn .who.lv-go:focus-visible { background: color-mix(in srgb, var(--pc) 18%, var(--surface)); color: var(--pc); }
.lv .sec-t .lv-sub { font-weight: 600; font-size: 12px; color: var(--text-muted); }
.lv .lv-lead { margin: -2px 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.lv .lv-lead b { color: var(--text); }
.lv .lv-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.lv .lv-rule span { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--surface-active); color: var(--text-secondary); }
.lv .lv-rule a { font-size: 11.5px; font-weight: 700; color: var(--primary); text-decoration: none; }
.lv .gtbl-wrap { container: lv / inline-size; }
.lv .lv-list { display: flex; flex-direction: column; }
.lv .lv-tally { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-bottom: 1px solid var(--border-light);
font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.lv .lv-tally b { font-size: 15px; font-weight: 800; color: var(--text); }
.lv .lv-tally .lv-tdone { margin-left: auto; font-weight: 600; color: var(--text-muted); }
.lv .lv-grid { display: grid; grid-template-columns: minmax(140px, 1.25fr) minmax(125px, 1.1fr) minmax(130px, 1.3fr) minmax(70px, .6fr) var(--lv-staff, 0) auto;
align-items: center; column-gap: 12px; }
.lv .lv-list.has-staff { --lv-staff: minmax(90px, .8fr); }
.lv .lv-head { padding: 11px 13px; border-bottom: 2px solid var(--border-light); font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
text-transform: uppercase; color: var(--text-muted); }
.lv .lv-list:not(.has-staff) .lv-staff { display: none; }
.lv .lv-p { display: grid; animation: lvIn .35s ease backwards; animation-delay: calc(var(--k, 0) * 22ms); }
.lv .lv-p + .lv-p { border-top: 1px solid var(--border-light); }
.lv .lv-row, .lv .lv-done { grid-area: 1 / 1; transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s; }
.lv .lv-row { padding: 9px 13px; font-size: 13px; color: var(--text); }
.lv .lv-row .nm { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit;
text-align: left; cursor: pointer; }
.lv .lv-row .nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv .lv-row .nm:hover b, .lv .lv-row .nm:active b, .lv .lv-row .nm:focus-visible b { color: var(--primary); }
.lv .lv-why b, .lv .lv-last b { font-weight: 800; }
.lv .lv-why small, .lv .lv-last small { display: block; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv .lv-why .lv-flag { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800;
background: var(--warning-bg); color: var(--warning-text); }
.lv .lv-last { min-width: 0; }
.lv .lv-act { display: flex; gap: 6px; justify-content: flex-end; }
.lv .lv-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 9px; border: 1px solid var(--border-light);
background: var(--surface); font-size: 12px; font-weight: 800; color: var(--text-secondary); cursor: pointer; white-space: nowrap;
transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease; }
.lv .lv-btn:hover, .lv .lv-btn:active, .lv .lv-btn:focus-visible { background: var(--surface-active); color: var(--text); }
.lv .lv-btn:active { transform: scale(.97); }
.lv .lv-btn.is-move { border-color: color-mix(in srgb, var(--pc) 30%, transparent); background: color-mix(in srgb, var(--pc) 8%, var(--surface)); color: var(--pc); }
.lv .lv-btn.is-move:hover, .lv .lv-btn.is-move:active, .lv .lv-btn.is-move:focus-visible { background: color-mix(in srgb, var(--pc) 16%, var(--surface)); color: var(--pc); }
.lv .lv-done { display: flex; align-items: center; gap: 8px; padding: 0 13px; font-size: 12.5px; color: var(--text-secondary);
opacity: 0; visibility: hidden; transform: translateY(4px); }
.lv .lv-done b { color: var(--text); }
.lv .lv-done .lv-ok { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none;
background: var(--success-bg); color: var(--success); }
.lv .lv-done.is-moved .lv-ok { background: color-mix(in srgb, var(--pc) 14%, var(--surface)); color: var(--pc); }
.lv .lv-done button { margin-left: auto; padding: 4px 6px; border: 0; background: none; font: inherit; font-weight: 800; color: var(--primary); cursor: pointer; }
.lv .lv-p.is-moved .lv-row, .lv .lv-p.is-kept .lv-row { opacity: 0; visibility: hidden; transform: translateX(-8px); }
.lv .lv-p.is-moved .lv-done.is-moved, .lv .lv-p.is-kept .lv-done.is-kept { opacity: 1; visibility: visible; transform: none; transition-delay: .08s, .08s, 0s; }
.lv .lv-p.is-moved, .lv .lv-p.is-kept { background: color-mix(in srgb, var(--surface-active) 55%, var(--surface)); }
@keyframes lvIn { from { opacity: 0; transform: translateY(6px); } }
@container lv (max-width: 820px) {
.lv .lv-head { display: none; }
.lv .lv-grid { grid-template-columns: 1fr 1fr; row-gap: 3px; column-gap: 10px; }
.lv .lv-row { padding: 11px 12px; }
.lv .lv-row .nm { grid-column: 1 / -1; }
.lv .lv-list.has-staff .lv-row .nm { grid-column: 1; }
.lv .lv-list.has-staff .lv-staff { grid-column: 2; grid-row: 1; justify-self: end; font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.lv .lv-why { grid-column: 1 / -1; padding-left: 40px; font-size: 12.5px; }
.lv .lv-why small { display: inline; margin-left: 4px; }
.lv .lv-last { padding-left: 40px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv .lv-last + .lv-last { padding-left: 0; }
.lv .lv-last::before { content: attr(data-l) " "; font-weight: 700; color: var(--text-muted); }
.lv .lv-last small { display: inline; margin-left: 3px; }
.lv .lv-act { grid-column: 1 / -1; padding: 6px 0 0 40px; justify-content: stretch; }
.lv .lv-btn { flex: 1; justify-content: center; padding: 8px 12px; }
.lv .lv-done { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
.lv .lv-p { animation: none; }
.lv .lv-row, .lv .lv-done { transition: none; }
}
.us { max-width: 1100px; }
.us-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 4px; }
.us-head h1 { margin: 0; font-size: 20px; font-weight: 800; color: var(--text); }
.us-head p { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); }
.us-sec { margin: 22px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.us-sec small { margin-left: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.us-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.us-tile { position: relative; padding: 14px 16px; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--surface);
animation: usIn .35s ease backwards; }
.us-tile b { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--text); }
.us-tile b small { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.us-tile span { display: block; margin-top: 5px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.us-tile.is-app { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 20%, var(--border-light)); }
.us-tile.is-app b { color: var(--primary); }
.us-tile.is-site { background: color-mix(in srgb, var(--info) 6%, var(--surface)); border-color: color-mix(in srgb, var(--info) 22%, var(--border-light)); }
.us-tile.is-site b { color: var(--info); }
.us-note { margin: 8px 2px 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.us-note b { color: var(--text); }
.us-empty { margin: 0; font-size: 13px; color: var(--text-muted); }
.us-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-top: 14px; }
.us-card { margin-top: 14px; padding: 16px 18px; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--surface);
animation: usIn .35s ease backwards; }
.us-grid .us-card { margin-top: 0; }
.us-card h3 { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--text); }
.us-card h3 small { margin-left: 4px; font-weight: 600; color: var(--text-muted); }
.us-nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.us-nums b { display: block; font-size: 20px; font-weight: 800; color: var(--text); }
.us-nums span { font-size: 12px; color: var(--text-muted); }
.us-days { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.us-day { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.us-day-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.us-day-bars i { width: 42%; height: calc(var(--h, 0) * 100%); min-height: 0; border-radius: 3px 3px 0 0; transform-origin: bottom;
animation: usGrow .5s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--k, 0) * 25ms); }
.us-day-bars i.is-app { background: var(--primary); }
.us-day-bars i.is-site { background: var(--info); }
.us-day span { font-size: 9px; color: var(--text-muted); white-space: nowrap; }
.us-legend { display: flex; gap: 12px; margin-top: 10px; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.us-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }
.us-legend .is-app::before { background: var(--primary); }
.us-legend .is-site::before { background: var(--info); }
.us-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.us-table th { padding: 8px 10px; text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
color: var(--text-muted); border-bottom: 2px solid var(--border-light); }
.us-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-light); color: var(--text); vertical-align: top; }
.us-table tr:last-child td { border-bottom: 0; }
.us-table td small { display: block; font-size: 11.5px; color: var(--text-muted); }
.us-chan { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; column-gap: 12px; margin-bottom: 10px; font-size: 13px;
animation: usIn .35s ease backwards; animation-delay: calc(var(--k, 0) * 40ms); }
.us-chan-l { font-weight: 700; color: var(--text); }
.us-chan-bar { height: 10px; border-radius: var(--radius-full); background: var(--surface-active); overflow: hidden; }
.us-chan-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); border-radius: inherit; transform-origin: left;
animation: usGrowX .6s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--k, 0) * 40ms + 80ms); }
.us-chan.is-website .us-chan-bar i { background: var(--info); }
.us-chan.is-app .us-chan-bar i { background: var(--primary); }
.us-chan.is-staff .us-chan-bar i, .us-chan.is-other .us-chan-bar i { background: var(--text-muted); }
.us-chan-n { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.us-chan-n b { font-size: 14px; color: var(--text); }
.us-chan-parts { grid-column: 2 / -1; margin-top: 3px; font-size: 11.5px; color: var(--text-muted); }
@keyframes usIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes usGrow { from { transform: scaleY(0); } }
@keyframes usGrowX { from { transform: scaleX(0); } }
@media (max-width: 560px) {
.us-chan { grid-template-columns: 1fr auto; row-gap: 4px; }
.us-chan-bar { grid-column: 1 / -1; grid-row: 2; }
.us-chan-parts { grid-column: 1 / -1; }
.us-table th:nth-child(3), .us-table td:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.us-tile, .us-card, .us-chan, .us-day-bars i, .us-chan-bar i { animation: none; }
}
.pp { position: relative; }
.pp-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; padding: 5px 7px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.pp-box:focus-within { border-color: var(--primary); }
.pp-av { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; font-size: 9.5px; font-weight: 800; letter-spacing: .2px;
color: hsl(var(--h) 55% 30%); background: hsl(var(--h) 70% 92%); box-shadow: inset 0 0 0 1px hsl(var(--h) 45% 80%); }
.pp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 5px 3px 4px; border-radius: var(--radius-full); background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border-light); font-size: 12.5px; font-weight: 700; color: var(--text); }
.pp-chip.is-lead { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--primary); }
.pp-star, .pp-x { border: 0; background: none; padding: 0 2px; font: inherit; font-size: 12px; line-height: 1; cursor: pointer; color: var(--text-muted); }
.pp-star.is-on { color: var(--primary); cursor: default; }
.pp-star:hover, .pp-star:focus-visible, .pp-star:active { color: var(--primary); }
.pp-x:hover, .pp-x:focus-visible, .pp-x:active { color: var(--danger-text); }
.pp-add { border: 0; border-radius: var(--radius-full); padding: 4px 10px; background: var(--surface-active); color: var(--text-secondary); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.pp-add:hover, .pp-add:focus-visible, .pp-add:active { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); }
.pp-empty { font-size: 12.5px; color: var(--text-muted); }
.pp-note { margin: 6px 0 0; font-size: 11.5px; color: var(--text-muted); }
.pp-note b { color: var(--text-secondary); }
.pp-menu { position: absolute; z-index: var(--z-dropdown); top: calc(100% + 6px); left: 0; width: min(380px, 100%); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 16px 40px rgba(0, 0, 0, .16); overflow: hidden; animation: pp-drop .16s ease-out; }
.pp-search { width: calc(100% - 20px); margin: 10px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font: inherit; font-size: 13px; color: var(--text); }
.pp-search:focus { outline: none; border-color: var(--primary); }
.pp-list { max-height: 240px; overflow-y: auto; padding: 0 6px 6px; }
.pp-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: 0; border-radius: var(--radius); background: none; font: inherit; font-size: 13px; color: var(--text); text-align: left; cursor: pointer; }
.pp-opt:hover, .pp-opt:focus-visible { background: var(--surface-hover); }
.pp-opt.is-on b { color: var(--primary); }
.pp-on { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--primary); }
.pp-none { margin: 4px 8px 10px; font-size: 12.5px; color: var(--text-muted); }
.pp-foot { display: flex; justify-content: flex-end; padding: 8px 10px; border-top: 1px solid var(--border-light); }
.pp-done { border: 0; border-radius: var(--radius); padding: 6px 14px; background: var(--primary); color: var(--on-primary); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
@keyframes pp-drop { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .pp-menu { animation: none; } }
.sg-chip { padding-right: 6px; }
.sg .pp-menu { position: static; width: auto; margin-top: 6px; box-shadow: none; animation: none; }
.sg-num { width: 52px; height: 26px; padding: 0 4px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.sg-num:focus { outline: none; border-color: var(--primary); }
.sg-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sg-sum { color: var(--warning-text); }
.sg-sum.is-even { color: var(--success-text); }
.sg-split { border: 0; border-radius: var(--radius-full); padding: 3px 10px; background: var(--surface-active); color: var(--text-secondary); font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; }
.sg-split:hover, .sg-split:focus-visible, .sg-split:active { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); }
.pl, .pl-mt, .pl-slide, .pl-ecc, .pl-need {
--pl-ink: color-mix(in srgb, var(--plan) 78%, var(--text));
--pl-soft: color-mix(in srgb, var(--plan) 9%, var(--surface));
--pl-line: color-mix(in srgb, var(--plan) 22%, var(--border-light));
--pl-mut: color-mix(in srgb, var(--text) 72%, var(--surface));
--pl-faint: color-mix(in srgb, var(--text) 62%, var(--surface));
--pl-card: var(--surface);
--pl-bg: color-mix(in srgb, var(--text) 3%, var(--surface));
--pl-r: 16px;
--pl-ease: cubic-bezier(.2, .8, .2, 1);
--pl-spring: cubic-bezier(.34, 1.4, .64, 1);
--st-grey: color-mix(in srgb, var(--text) 70%, var(--surface));
--st-amber: color-mix(in srgb, var(--warning) 46%, var(--text));
--st-red: color-mix(in srgb, var(--danger) 64%, var(--text));
--st-green: color-mix(in srgb, var(--success) 55%, var(--text));
--st-blue: color-mix(in srgb, var(--info) 75%, var(--text));
--st-violet: var(--pl-ink);
}
.pl {
container: pl / inline-size;
color: var(--text);
font-size: 14px;
}
.pl *, .pl *::before, .pl *::after { box-sizing: border-box; }
.fi-page-content:has(.pm-page), .fi-page-content:has(.pl) { row-gap: 0; }
@property --pl-n { syntax: '<integer>'; initial-value: 0; inherits: false; }
@keyframes plIn { from { opacity: 0; transform: translateY(12px); } }
@keyframes plFade { from { opacity: 0; } }
@keyframes plPop { from { opacity: 0; transform: scale(.94); } }
@keyframes plSlide { from { opacity: 0; transform: translateX(28px); } }
@keyframes plSheet { from { transform: translateY(100%); } }
@keyframes plFill { from { transform: scaleX(0); } }
@keyframes plRing { from { stroke-dashoffset: var(--len); } }
@keyframes plCount { from { --pl-n: 0; } }
@keyframes plPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 35%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }
@keyframes plTick { 0% { transform: scale(.6) rotate(-8deg); } 60% { transform: scale(1.18); } 100% { transform: none; } }
@keyframes plFlash { from { background: color-mix(in srgb, var(--success) 16%, var(--surface)); } }
@keyframes plShine { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(220%) skewX(-18deg); } }
@keyframes plBreathe { 50% { opacity: .55; } }
.pl-count { --pl-n: var(--to); counter-reset: n var(--pl-n); animation: plCount 1.1s var(--pl-ease) .25s backwards; }
.pl-count::after { content: counter(n); }
.pl-loading { display: grid; gap: 14px; }
.pl-skel { border-radius: var(--pl-r); background: var(--pl-bg); box-shadow: inset 0 0 0 1px var(--border-light); animation: plBreathe 1.4s ease-in-out infinite; }
.pl-skel.is-head { height: 66px; } .pl-skel.is-team { height: 40px; animation-delay: .15s; } .pl-skel.is-board { height: 420px; animation-delay: .3s; }
.pl-skel.is-title { height: 30px; width: 70%; margin: 18px 0 14px; border-radius: 9px; } .pl-skel.is-bar { height: 40px; border-radius: 12px; animation-delay: .1s; }
.pl-skel.is-body { height: 190px; margin-top: 12px; animation-delay: .2s; }
.pl-vsw { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-active); flex: none; }
.pl-vsw-o { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 13px; font-weight: 800;
white-space: nowrap; cursor: pointer; color: color-mix(in srgb, var(--text) 72%, var(--surface)); text-decoration: none; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.pl-vsw-o:hover, .pl-vsw-o:active, .pl-vsw-o:focus-visible { color: var(--text); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.pl-vsw-o.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); animation: plPop .3s cubic-bezier(.34, 1.4, .64, 1) backwards; }
.pl-vsw[data-on="plan"] .pl-vsw-o.is-on { color: color-mix(in srgb, var(--plan) 80%, var(--text)); }
.pl-vsw-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 800;
background: color-mix(in srgb, var(--danger) 72%, var(--text)); color: var(--on-primary); }
.pmn-strip .pl-vsw { order: 9; margin-left: 2px; }
.pm2-cardhead .pl-vsw { margin-left: 8px; }
.pm2-cardhead:has(.pl-vsw) { gap: 8px; }
@media (max-width: 700px) {
.pmn-strip > .pmn-strip__when { flex: 1 1 auto; flex-basis: auto; align-self: center; }
.pmn-strip .pl-vsw { order: 0; margin-left: auto; }
.pl-vsw-o { padding: 7px 8px; font-size: 12.5px; gap: 4px; }
}
.pl-head { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 10px 14px 10px 18px;
background: var(--pl-card); border: 1px solid var(--border-light); border-radius: var(--pl-r); box-shadow: var(--shadow-sm); animation: plIn .5s var(--pl-ease) backwards; }
.pl-head::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: var(--pl-r) 0 0 var(--pl-r); background: var(--plan); }
.pl-ring { position: relative; width: 44px; height: 44px; flex: none; }
.pl-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pl-ring circle { fill: none; stroke-width: 6; }
.pl-ring .bg { stroke: var(--pl-soft); }
.pl-ring .fg { stroke: var(--plan); stroke-linecap: round; stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--off); animation: plRing 1.2s var(--pl-ease) .2s backwards;
transition: stroke-dashoffset .6s var(--pl-ease); }
.pl-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.pl-title { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; min-width: 0; }
.pl-title h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-days { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--pl-ink); background: var(--pl-soft); border-radius: 999px; padding: 3px 10px; }
.pl-health { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-hc { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 4px 10px; background: var(--pl-bg); color: var(--text);
box-shadow: inset 0 0 0 1px var(--border-light); border: 0; font-family: inherit; cursor: pointer; animation: plPop .4s var(--pl-spring) backwards; transition: transform .15s ease; }
.pl-hc:hover, .pl-hc:active, .pl-hc:focus-visible { transform: translateY(-1px); }
.pl-hc:nth-child(2) { animation-delay: .06s; } .pl-hc:nth-child(3) { animation-delay: .12s; }
.pl-hc.is-late, .pl-hc.is-stuck { color: var(--st-red); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 25%, transparent); }
.pl-hc.is-nobody { color: var(--st-amber); background: color-mix(in srgb, var(--warning) 10%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 30%, transparent); }
.pl-acts { display: flex; gap: 8px; align-items: center; }
.pl-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 11px; padding: 9px 14px; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer;
white-space: nowrap; background: var(--pl-bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-light); text-decoration: none;
transition: transform .15s ease, box-shadow .2s ease, background .2s ease; }
.pl-btn:hover, .pl-btn:active, .pl-btn:focus-visible { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm); }
.pl-btn.is-main { position: relative; overflow: hidden; background: var(--plan); color: var(--on-primary); box-shadow: 0 6px 16px color-mix(in srgb, var(--plan) 30%, transparent); }
.pl-btn.is-main::after { content: ''; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: plShine 1.4s ease 1s 1 backwards; }
.pl-btn.is-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 9px; }
.pl-btn.is-danger { color: var(--st-red); }
.pl-menu { position: relative; }
.pl-menu > summary { list-style: none; }
.pl-menu > summary::-webkit-details-marker { display: none; }
.pl-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: var(--z-dropdown); width: 270px; padding: 6px; background: var(--pl-card); border: 1px solid var(--border-light);
border-radius: 14px; box-shadow: var(--shadow-lg); animation: plPop .22s var(--pl-spring) backwards; transform-origin: top right; }
.pl-pop.is-left { right: auto; left: 0; transform-origin: top left; }
.pl-pop button, .pl-pop .pl-pop-i { display: flex; width: 100%; gap: 10px; align-items: center; padding: 9px 10px; border: 0; border-radius: 9px; background: none; font: inherit;
font-weight: 700; font-size: 13.5px; color: var(--text); text-align: left; cursor: pointer; }
.pl-pop button small, .pl-pop .pl-pop-i small { display: block; font-weight: 500; color: var(--pl-mut); font-size: 12px; }
.pl-pop button:hover, .pl-pop button:active, .pl-pop button:focus-visible { background: var(--pl-soft); }
.pl-pop hr { border: 0; border-top: 1px solid var(--border-light); margin: 5px 4px; }
.pl-pop h5 { margin: 6px 10px 2px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--pl-mut); }
.pl-pop input { width: 100%; margin: 4px 0; padding: 8px 10px; border: 1px solid var(--border-light); border-radius: 9px; font: inherit; font-size: 13.5px; background: var(--surface); color: var(--text); }
.pl-links { grid-column: 1 / -1; display: none; gap: 6px; flex-wrap: wrap; padding-top: 8px; border-top: 1px dashed var(--border-light); align-items: center; }
.pl-links.has-links, .pl-links.is-adding { display: flex; }
.pl-link { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: var(--text); text-decoration: none;
background: var(--pl-bg); transition: background .2s ease, transform .15s ease; }
.pl-link:hover, .pl-link:active, .pl-link:focus-visible { background: var(--pl-soft); transform: translateY(-1px); }
.pl-link button { border: 0; background: none; color: var(--pl-mut); cursor: pointer; padding: 0 0 0 2px; font: inherit; }
.pl-link.is-add { background: none; border: 1px dashed var(--border); color: var(--pl-mut); cursor: pointer; font-family: inherit; }
.pl-who { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 10px 2px 2px; scrollbar-width: none; }
.pl:not([data-view="board"]):not([data-view="people"]) .pl-who { display: none; }
.pl-fc { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border: 1px solid var(--border-light); border-radius: 999px; background: var(--pl-card);
font: inherit; font-size: 12.5px; font-weight: 800; color: var(--text); cursor: pointer; animation: plIn .4s var(--pl-ease) backwards;
transition: transform .15s ease, border-color .2s ease, background .2s ease; }
.pl-fc:nth-child(2) { animation-delay: .04s; } .pl-fc:nth-child(3) { animation-delay: .08s; } .pl-fc:nth-child(4) { animation-delay: .12s; } .pl-fc:nth-child(n+5) { animation-delay: .16s; }
.pl-fc:hover, .pl-fc:active, .pl-fc:focus-visible { transform: translateY(-1px); border-color: var(--plan); }
.pl-fc .pp-av { width: 24px; height: 24px; flex-basis: 24px; font-size: 9.5px; }
.pl-fc.is-all, .pl-fc.is-nobody { padding: 6px 11px; }
.pl-fc.is-on { background: var(--pl-soft); border-color: var(--plan); color: var(--pl-ink); }
.pl-fc i { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center; font-size: 11.5px; color: var(--pl-mut); background: var(--pl-bg); }
.pl-fc i.is-late { color: var(--on-primary); background: color-mix(in srgb, var(--danger) 72%, var(--text)); }
.pl-fc i.is-done { color: var(--st-green); }
.pl-fc.is-nobody { border-style: dashed; border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); }
.pl-roles { display: grid; gap: 8px; margin-top: 10px; padding: 12px; border-radius: 14px; background: var(--pl-bg); box-shadow: inset 0 0 0 1px var(--border-light); animation: plIn .3s var(--pl-ease) backwards; }
.pl-role { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: center; }
.pl-role > b { font-size: 13.5px; }
.pl-role .pp { margin: 0; } .pl-role .pp-note { display: none; }
.pl-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1.5; white-space: nowrap;
color: var(--c, var(--st-grey)); background: color-mix(in srgb, var(--c, var(--st-grey)) 11%, var(--surface)); }
.pl-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pl-pill.no-dot::before { display: none; }
.is-grey { --c: var(--st-grey); } .is-amber { --c: var(--st-amber); } .is-red { --c: var(--st-red); } .is-green { --c: var(--st-green); }
.is-blue { --c: var(--st-blue); } .is-violet { --c: var(--st-violet); }
.pl-due { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--pl-mut); white-space: nowrap; }
.pl-due.is-late { color: var(--st-red); }
.pl-due.is-today { color: var(--st-amber); }
.pl-tag { padding: 1px 6px; border-radius: 6px; font-size: 11.5px; font-weight: 800; color: var(--pl-ink); background: var(--pl-soft); white-space: nowrap; }
.pl-faces { display: inline-flex; align-items: center; }
.pl-faces .pp-av { width: 22px; height: 22px; flex-basis: 22px; font-size: 9px; box-shadow: 0 0 0 2px var(--surface); }
.pl-faces .pp-av + .pp-av { margin-left: -6px; }
.pl-faces .pp-av.is-lead { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--plan); }
.pl-nobody { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: var(--st-amber); }
.pl-red { color: color-mix(in srgb, var(--danger) 64%, var(--text)); font-weight: 800; }
.pl-tools { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 10px 0 12px; }
.pl-add { flex: 1 1 320px; min-width: 0; max-width: 560px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px; border: 1.5px solid var(--pl-line); border-radius: 13px; background: var(--pl-card);
color: var(--pl-ink); font-weight: 800; box-shadow: var(--shadow-xs); transition: border-color .2s ease, box-shadow .2s ease; }
.pl-add:focus-within { border-color: var(--plan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--plan) 14%, transparent); }
.pl-add input, .pl-add input:focus { flex: 1; min-width: 0; padding: 11px 0; border: 0; outline: 0; box-shadow: none; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); }
.pl-into { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 0 2px 0 9px; border-radius: 9px; font-size: 12px; font-weight: 800; color: var(--pl-mut); background: var(--pl-bg); white-space: nowrap; }
.pl-into select, .pl-into select:focus { max-width: 190px; padding: 5px 2px 5px 4px; border: 0; outline: 0; box-shadow: none; background-color: transparent; font: inherit; font-weight: 800; color: var(--text);
cursor: pointer; text-overflow: ellipsis; }
.pl-tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.pl-tab { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border: 0; border-radius: 10px; background: var(--surface-active); font: inherit; font-weight: 800; font-size: 12.5px;
color: var(--pl-mut); cursor: pointer; white-space: nowrap; list-style: none; transition: color .2s ease, background .2s ease, box-shadow .2s ease; }
.pl-tab::-webkit-details-marker { display: none; }
.pl-tab em { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--pl-mut); }
.pl-tab:hover, .pl-tab:active, .pl-tab:focus-visible { color: var(--text); }
.pl-tab.is-on { color: var(--pl-ink); background: var(--pl-soft); box-shadow: inset 0 0 0 1.5px var(--plan); animation: plPop .25s var(--pl-spring); }
.pl-tab.is-on em { color: var(--pl-ink); }
.pl-tab.is-hot em { min-width: 18px; padding: 0 5px; border-radius: 9px; text-align: center; line-height: 18px; color: var(--on-primary); background: color-mix(in srgb, var(--danger) 72%, var(--text)); }
.pl-tab.is-bare:not(.is-on) { display: none; }
.pl-tab.is-ghost { background: none; box-shadow: inset 0 0 0 1px var(--border); }
.pl-tab-more { margin-left: -6px; }
.pl-tab-more .pl-pop { right: auto; left: 0; transform-origin: top left; }
.pl-search { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; width: 38px; padding: 7px 10px; overflow: hidden; border: 1px solid transparent; border-radius: 11px; color: var(--pl-mut); font-size: 13px;
cursor: text; transition: width .25s var(--pl-ease), border-color .2s ease, background .2s ease; }
.pl-search:hover, .pl-search:focus-within, .pl-search.is-on { width: 200px; border-color: var(--border-light); background: var(--surface); }
.pl-search input, .pl-search input:focus { flex: 1; min-width: 0; width: 0; padding: 0; border: 0; outline: 0; box-shadow: none; background: none; font: inherit; color: var(--text); }
.pl-view { display: none; transition: opacity .15s ease; }
.pl.is-waiting .pl-view { opacity: .55; }
.pl[data-view="board"] .pl-view[data-view="board"], .pl[data-view="sessions"] .pl-view[data-view="sessions"], .pl[data-view="need"] .pl-view[data-view="need"], .pl[data-view="day"] .pl-view[data-view="day"],
.pl[data-view="people"] .pl-view[data-view="people"], .pl[data-view="budget"] .pl-view[data-view="budget"], .pl[data-view="activity"] .pl-view[data-view="activity"] { display: block; animation: plIn .35s var(--pl-ease) backwards; }
.pl-work { position: relative; display: flex; align-items: flex-start; }
.pl-main { flex: 1 1 auto; min-width: 0; }
.pl-side { position: sticky; top: 76px; z-index: 4; flex: none; width: 0; transition: width .38s var(--pl-ease), margin .38s var(--pl-ease); }
.pl.is-open .pl-work { min-height: calc(100vh - 96px); }
.pl-cols { columns: 3 300px; column-gap: 14px; }
.pl[data-view="need"] .pl-main { max-width: 860px; }
@container pl (min-width: 1000px) {
.pl[data-view="need"].is-open .pl-side { width: 410px; margin-left: 16px; }
.pl[data-view="need"] .pl-panel { position: static; }
}
.pl-sec { display: block; break-inside: avoid; margin: 0 0 14px; overflow: hidden; background: var(--pl-card); border: 1px solid var(--border-light); border-radius: var(--pl-r);
box-shadow: var(--shadow-xs); animation: plIn .45s var(--pl-ease) backwards; }
.pl-sec:nth-child(2) { animation-delay: .06s; } .pl-sec:nth-child(3) { animation-delay: .12s; } .pl-sec:nth-child(4) { animation-delay: .18s; }
.pl-sec:nth-child(5) { animation-delay: .24s; } .pl-sec:nth-child(n+6) { animation-delay: .3s; }
.pl-sec > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 12px 14px 10px;
border-bottom: 1px solid var(--border-light); background: linear-gradient(var(--pl-bg), var(--pl-card)); }
.pl-sec > summary::-webkit-details-marker { display: none; }
.pl-sec:not([open]) > summary { border-bottom: 0; }
.pl-sec.is-gone { display: none; }
.pl-sec-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-light); }
.pl-sec-t b { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
.pl-sec-t span { display: flex; align-items: center; gap: 6px; margin-top: 1px; font-size: 12px; color: var(--pl-mut); }
.pl-sec-n { display: grid; justify-items: end; gap: 4px; font-size: 12px; font-weight: 800; color: var(--pl-mut); }
.pl-mini { width: 64px; height: 5px; border-radius: 99px; background: var(--pl-soft); overflow: hidden; }
.pl-mini i { display: block; height: 100%; width: calc(var(--p) * 1%); border-radius: inherit; background: var(--plan); transform-origin: left; animation: plFill .9s var(--pl-ease) .35s backwards; transition: width .5s var(--pl-ease); }
.pl-sec-who .pp-av { width: 18px; height: 18px; flex-basis: 18px; font-size: 8px; }
.pl-sec-add { width: 28px; height: 28px; margin-right: -4px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 15px; font-weight: 800; color: var(--pl-mut); cursor: pointer;
transition: background .2s ease, color .2s ease; }
.pl-sec-add:hover, .pl-sec-add:active, .pl-sec-add:focus-visible { background: var(--pl-soft); color: var(--pl-ink); }
.pl-sec-edit { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border-light); background: var(--pl-soft);
animation: plIn .25s var(--pl-ease) backwards; }
.pl-sec-edit input, .pl-sec-new input { min-width: 0; width: 100%; padding: 6px 9px; border: 1px solid var(--pl-line); border-radius: 9px; background: var(--surface); font: inherit; font-size: 13.5px; font-weight: 700; color: var(--text); }
.pl-sec-edit input.is-icon, .pl-sec-new input.is-icon { width: 46px; flex: none; padding: 6px 4px; text-align: center; }
.pl-sec-edit input:focus, .pl-sec-new input:focus { outline: 0; border-color: var(--plan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--plan) 14%, transparent); }
.pl-sec-new { break-inside: avoid; margin: 0 0 14px; }
.pl-sec-new-form { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--pl-line); border-radius: var(--pl-r); background: var(--pl-soft); animation: plIn .25s var(--pl-ease) backwards; }
.pl-sec-new-form b { font-size: 13.5px; }
.pl-sec-new-form span { display: flex; gap: 6px; align-items: center; }
.pl-sec-new-form span:last-child { justify-content: flex-end; }
.pl-row { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-light); transition: background .2s ease; }
.pl-row:last-child { border-bottom: 0; }
.pl-row:hover, .pl-row:focus-within { background: var(--pl-bg); }
.pl-row.is-open { background: var(--pl-soft); box-shadow: inset 3px 0 0 var(--plan); }
.pl-chk { appearance: none; -webkit-appearance: none; display: grid; place-items: center; width: 20px; height: 20px; margin: 1px 0 0; border: 2px solid color-mix(in srgb, var(--text) 28%, var(--surface));
border-radius: 7px; background: var(--surface); cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.pl-chk::after { content: ''; width: 9px; height: 5px; margin-top: -2px; border: solid var(--on-primary); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) scale(0); transition: transform .25s var(--pl-spring); }
.pl-chk:checked { background: var(--success); border-color: var(--success); animation: plTick .35s var(--pl-spring); }
.pl-chk:checked::after { transform: rotate(-45deg) scale(1); }
.pl-chk:hover, .pl-chk:focus-visible, .pl-chk:active { border-color: var(--success); }
.pl-chk:disabled { cursor: default; opacity: .55; }
.pl-chk.is-stuck { border-color: color-mix(in srgb, var(--danger) 60%, var(--surface)); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.pl-row:has(> .pl-chk:checked) { animation: plFlash .9s ease; }
.pl-row:has(> .pl-chk:checked) .pl-row-t { color: var(--pl-faint); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.pl-row-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; font-size: 12.5px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-light); }
.pl-row-body { display: grid; gap: 4px; min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.pl-row-t { font-size: 14px; font-weight: 700; line-height: 1.35; transition: color .3s ease; }
.pl-row-m { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: 12px; color: var(--pl-mut); }
.pl-row-m > span { display: inline-flex; align-items: center; gap: 4px; }
.pl-why { padding: 5px 8px; border-radius: 8px; font-size: 12.5px; line-height: 1.4; color: var(--st-red); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.pl-auto { font-size: 11.5px; font-weight: 800; color: var(--pl-mut); }
.pl-lines { grid-column: 2; display: grid; gap: 1px; margin-top: 6px; overflow: hidden; border-radius: 10px; background: var(--border-light); box-shadow: 0 0 0 1px var(--border-light); }
.pl-line { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; padding: 6px 9px; font-size: 13px; background: var(--surface); }
.pl-line .pl-chk { width: 18px; height: 18px; margin: 0; border-radius: 6px; }
.pl-line.is-done .pl-line-t { color: var(--pl-faint); text-decoration: line-through; }
.pl-line-q { font-size: 12px; font-weight: 800; color: var(--pl-mut); font-variant-numeric: tabular-nums; }
.pl-line-p { font-size: 12px; color: var(--pl-mut); font-variant-numeric: tabular-nums; }
.pl-line .pp-av { width: 20px; height: 20px; flex-basis: 20px; font-size: 8.5px; }
.pl-line-take { padding: 2px 8px; border: 0; border-radius: 7px; font: inherit; font-size: 11.5px; font-weight: 800; color: var(--st-amber); background: color-mix(in srgb, var(--warning) 12%, var(--surface)); cursor: pointer; }
.pl-goal { grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.pl-goal-bar { height: 7px; border-radius: 99px; background: var(--pl-soft); overflow: hidden; }
.pl-goal-bar i { display: block; height: 100%; width: calc(var(--p) * 1%); border-radius: inherit; background: linear-gradient(90deg, var(--plan), color-mix(in srgb, var(--plan) 60%, var(--info))); transform-origin: left; animation: plFill 1.1s var(--pl-ease) .5s backwards; }
.pl-goal b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pl-rest { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 0; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 13px; font-size: 12.5px; color: var(--pl-mut); }
.pl-rest button { padding: 4px 9px; border: 0; border-radius: 8px; background: var(--pl-bg); font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text); cursor: pointer; transition: background .2s ease, color .2s ease; }
.pl-rest button:hover, .pl-rest button:active, .pl-rest button:focus-visible { background: var(--pl-soft); color: var(--pl-ink); }
.pl-rest button.is-edit { margin-left: auto; color: var(--pl-ink); background: var(--pl-soft); }
.pl-calm { padding: 14px; font-size: 13.5px; font-weight: 700; color: var(--st-green); }
.pl-calm.is-quiet { font-weight: 600; color: var(--pl-mut); }
.pl-view > .pl-calm { margin-bottom: 10px; border: 1px dashed var(--border); border-radius: var(--pl-r); font-weight: 600; color: var(--pl-mut); }
.pl-rows { display: grid; gap: 8px; padding: 10px; }
.pl-rows .pl-row { border: 1px solid var(--border-light); border-radius: 12px; background: var(--surface); }
.pl-rows .pl-row:hover, .pl-rows .pl-row:focus-within { box-shadow: var(--shadow-sm); }
.pl-ncard { margin: 0 0 14px; overflow: hidden; border: 1px solid var(--border-light); border-radius: var(--pl-r); background: var(--pl-card); box-shadow: var(--shadow-xs); animation: plIn .45s var(--pl-ease) backwards; }
.pl-ncard > h3 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 11px 14px 9px; border-bottom: 1px solid var(--border-light); font-size: 14px; font-weight: 800; }
.pl-ncard > h3 small { margin-left: auto; font-size: 12px; color: var(--pl-mut); }
.pl-ncard.is-need { border-color: color-mix(in srgb, var(--danger) 22%, var(--border-light)); }
.pl-ncard.is-need > h3 { color: var(--st-red); background: color-mix(in srgb, var(--danger) 5%, var(--surface)); }
.pl-h { margin: 16px 2px 8px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--pl-mut); }
.pl-person { margin: 0 0 8px; overflow: hidden; border: 1px solid var(--border-light); border-radius: 14px; background: var(--pl-card); animation: plIn .45s var(--pl-ease) backwards; }
.pl-person:nth-of-type(2) { animation-delay: .05s; } .pl-person:nth-of-type(3) { animation-delay: .1s; } .pl-person:nth-of-type(n+4) { animation-delay: .15s; }
.pl-person > summary { list-style: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; cursor: pointer; font-weight: 800; font-size: 14px; }
.pl-person > summary::-webkit-details-marker { display: none; }
.pl-person > summary::after { content: '▸'; margin-left: 4px; color: var(--pl-mut); transition: transform .2s ease; }
.pl-person[open] > summary::after { transform: rotate(90deg); }
.pl-person > summary small { margin-left: auto; font-size: 12px; color: var(--pl-mut); }
.pl-person > summary .pp-av { width: 26px; height: 26px; flex-basis: 26px; font-size: 10px; }
.pl-person[open] > summary { border-bottom: 1px solid var(--border-light); background: var(--pl-bg); }
.pl-panel { display: none; position: absolute; right: 0; top: 0; width: 410px; max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; background: var(--pl-card); border: 1px solid var(--border-light);
border-radius: 18px; box-shadow: var(--shadow-lg), 0 0 0 1px var(--pl-line); animation: plSlide .38s var(--pl-ease) backwards; }
.pl.is-open .pl-panel { display: block; }
.pl-panel-in { padding: 0 18px 18px; }
.pl-pg { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--border-light);
background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); font-size: 12.5px; font-weight: 700; color: var(--pl-mut); }
.pl-x { margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; font-size: 17px; color: var(--pl-mut); cursor: pointer;
transition: background .2s ease, transform .2s ease; }
.pl-x:hover, .pl-x:active, .pl-x:focus-visible { background: var(--pl-bg); transform: rotate(90deg); }
.pl-grab { display: none; }
.pl-ptitle { display: block; overflow: hidden; field-sizing: content; width: 100%; margin: 16px 0 12px; padding: 4px 6px; border: 1px solid transparent; border-radius: 9px; background: none; font: inherit; font-size: 19px; font-weight: 800;
letter-spacing: -.02em; line-height: 1.3; color: var(--text); resize: none; }
.pl-ptitle:hover:not(:read-only), .pl-ptitle:focus { border-color: var(--border-light); background: var(--pl-bg); outline: 0; }
.pl-ss { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 2px; margin-bottom: 12px; padding: 3px; border-radius: 12px; background: var(--surface-active); }
.pl-ss button { padding: 8px 4px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--pl-mut); white-space: nowrap; cursor: pointer;
transition: color .2s ease, background .25s var(--pl-ease), box-shadow .25s ease; }
.pl-ss button:hover, .pl-ss button:active, .pl-ss button:focus-visible { color: var(--text); }
.pl-ss button.is-on { background: var(--surface); box-shadow: var(--shadow-sm); color: var(--c); }
.pl-ss button:disabled { cursor: default; }
.pl-stuckbox { display: none; margin: -2px 0 12px; animation: plIn .25s var(--pl-ease) backwards; }
.pl-stuckbox.is-on, .pl-stuckbox.is-asking { display: block; }
.pl-stuckbox textarea { width: 100%; min-height: 60px; padding: 9px 11px; border: 1.5px solid color-mix(in srgb, var(--danger) 35%, var(--border-light)); border-radius: 11px; resize: none;
font: inherit; font-size: 13.5px; color: var(--text); background: color-mix(in srgb, var(--danger) 4%, var(--surface)); }
.pl-stuckbox div { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.pl-stuckbox small { color: var(--pl-mut); font-size: 12px; }
.pl-stuckbox .pl-btn { margin-left: auto; }
.pl-facts { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 9px 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); font-size: 13.5px; margin: 0; }
.pl-facts dt { color: var(--pl-mut); font-weight: 700; font-size: 12.5px; }
.pl-facts dd { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.pl-facts .pp { margin: 0; } .pl-facts .pp-note { display: none; }
.pl-facts input, .pl-facts select, .pl-field { padding: 6px 9px; border: 1px solid var(--border-light); border-radius: 9px; background: var(--surface); font: inherit; font-size: 13px; color: var(--text); }
.pl-facts input:focus, .pl-facts select:focus, .pl-field:focus { outline: 0; border-color: var(--plan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--plan) 14%, transparent); }
.pl-chipbtn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 0; border-radius: 8px; font: inherit; font-weight: 700; font-size: 12.5px; color: var(--text);
background: var(--pl-bg); box-shadow: inset 0 0 0 1px var(--border-light); cursor: pointer; }
.pl-chipbtn.is-on { color: var(--pl-ink); background: var(--pl-soft); box-shadow: inset 0 0 0 1px var(--pl-line); }
.pl-h4 { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--pl-mut); }
.pl-h4 small { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 12px; }
.pl-panel .pl-lines { margin: 0; }
.pl-panel .pl-line { grid-template-columns: 20px minmax(0, 1fr) 64px 22px 22px; }
.pl-panel .pl-lines.has-prices .pl-line { grid-template-columns: 20px minmax(0, 1fr) 64px 70px 22px 22px; }
.pl-line-who { position: relative; display: grid; place-items: center; width: 22px; height: 22px; cursor: pointer; }
.pl-line-who select { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.pl-line-who .pl-nobody { font-size: 13px; opacity: .6; }
.pl-panel .pl-line input { width: 100%; min-width: 0; padding: 3px 6px; border: 1px solid transparent; border-radius: 6px; background: none; font: inherit; font-size: 13px; color: var(--text); }
.pl-panel .pl-line input:hover, .pl-panel .pl-line input:focus { border-color: var(--border-light); background: var(--surface); outline: 0; }
.pl-line-x { border: 0; background: none; color: var(--pl-mut); cursor: pointer; font-size: 14px; }
.pl-addlines { display: grid; gap: 6px; padding: 8px; background: var(--surface); }
.pl-addlines textarea { width: 100%; min-height: 38px; padding: 7px 9px; border: 1px dashed var(--border); border-radius: 9px; resize: vertical; font: inherit; font-size: 13px; color: var(--text); background: none; }
.pl-addlines textarea:focus { outline: 0; border-style: solid; border-color: var(--plan); }
.pl-note-area { width: 100%; min-height: 58px; padding: 8px 10px; border: 1px solid var(--border-light); border-radius: 10px; resize: vertical; font: inherit; font-size: 13.5px; color: var(--text); background: var(--surface); }
.pl-thread { display: grid; gap: 12px; }
.pl-cmt { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; animation: plIn .35s var(--pl-ease) backwards; }
.pl-cmt .pp-av { width: 30px; height: 30px; flex-basis: 30px; font-size: 10.5px; }
.pl-cmt-h { display: flex; align-items: baseline; gap: 7px; font-size: 13px; }
.pl-cmt-h b { font-weight: 800; }
.pl-cmt-h small { color: var(--pl-mut); font-size: 12px; }
.pl-cmt-b { margin-top: 3px; padding: 8px 11px; border-radius: 4px 14px 14px 14px; font-size: 13.5px; line-height: 1.5; background: var(--pl-bg); white-space: pre-line; overflow-wrap: anywhere; }
.pl-at { padding: 0 3px; border-radius: 5px; font-weight: 800; color: var(--pl-ink); background: var(--pl-soft); }
.pl-cmt-sys { display: flex; gap: 8px; align-items: center; padding-left: 6px; font-size: 12.5px; color: var(--pl-mut); }
.pl-compose { position: relative; margin-top: 12px; border: 1.5px solid var(--border-light); border-radius: 14px; background: var(--surface); transition: border-color .2s ease, box-shadow .2s ease; }
.pl-compose:focus-within { border-color: var(--plan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--plan) 14%, transparent); }
.pl-compose textarea { display: block; width: 100%; min-height: 44px; padding: 10px 12px 4px; border: 0; background: transparent; resize: none; font: inherit; font-size: 13.5px; color: var(--text); }
.pl-compose textarea:focus { outline: 0; }
.pl-compose-f { display: flex; align-items: center; gap: 6px; padding: 6px 8px 8px 12px; font-size: 12px; color: var(--pl-mut); }
.pl-compose-f .pl-btn { margin-left: auto; padding: 6px 12px; font-size: 12.5px; }
.pl-sugg { position: absolute; left: 10px; bottom: calc(100% + 6px); z-index: 4; width: 240px; max-height: 240px; overflow-y: auto; padding: 5px; background: var(--surface); border: 1px solid var(--border-light);
border-radius: 12px; box-shadow: var(--shadow-lg); animation: plPop .2s var(--pl-spring) backwards; transform-origin: bottom left; }
.pl-sugg button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 7px 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; text-align: left; }
.pl-sugg button.is-on, .pl-sugg button:hover { background: var(--pl-soft); }
.pl-sugg p { margin: 2px 8px 4px; font-size: 11.5px; font-weight: 700; color: var(--pl-mut); }
.pl-dayhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pl-dayhead h3 { margin: 0; font-size: 17px; font-weight: 800; }
.pl-dayhead .pl-btn:first-of-type { margin-left: auto; }
.pl-dayblk + .pl-dayblk { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--border-light); }
.pl-tl { position: relative; display: grid; gap: 10px; padding-left: 4px; }
.pl-tl::before { content: ''; position: absolute; left: 78px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(var(--pl-line), var(--border-light)); }
.pl-slot { display: grid; grid-template-columns: 62px 20px minmax(0, 1fr); gap: 10px; align-items: center; animation: plIn .4s var(--pl-ease) backwards; }
.pl-slot:nth-child(2) { animation-delay: .05s; } .pl-slot:nth-child(3) { animation-delay: .1s; } .pl-slot:nth-child(4) { animation-delay: .15s; } .pl-slot:nth-child(n+5) { animation-delay: .2s; }
.pl-slot time, .pl-slot input.pl-slot-time { font-weight: 800; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.pl-slot input.pl-slot-time { width: 62px; padding: 2px 4px; border: 1px solid transparent; border-radius: 6px; background: none; font-family: inherit; color: var(--text); }
.pl-slot-dot { position: relative; z-index: 1; justify-self: center; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 3px var(--plan); }
.pl-slot-c { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 13px; border: 1px solid var(--border-light); border-radius: 13px; background: var(--pl-card);
transition: transform .2s var(--pl-ease), box-shadow .2s ease; }
.pl-slot-c:hover, .pl-slot-c:active, .pl-slot-c:focus-within { transform: translateX(3px); box-shadow: var(--shadow-sm); }
.pl-slot-c input.pl-slot-title { flex: 1 1 180px; min-width: 0; padding: 2px 4px; border: 1px solid transparent; border-radius: 6px; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--text); }
.pl-slot input:hover:not(:read-only), .pl-slot input:focus { border-color: var(--border-light); background: var(--surface); outline: 0; }
.pl-slot-who { display: flex; gap: 3px; flex-wrap: wrap; }
.pl-slot-who button { padding: 0; border: 0; background: none; cursor: pointer; opacity: .35; transition: opacity .2s ease, transform .15s ease; }
.pl-slot-who button.is-on { opacity: 1; }
.pl-slot-who button:hover { transform: translateY(-1px); opacity: 1; }
.pl-slot-who .pp-av { width: 22px; height: 22px; flex-basis: 22px; font-size: 9px; }
.pl-slot-add { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 8px; margin-top: 12px; }
.pl-slot-add input { padding: 8px 10px; border: 1px dashed var(--border); border-radius: 10px; background: none; font: inherit; font-size: 13.5px; color: var(--text); }
.pl-slot-add input:focus { outline: 0; border-style: solid; border-color: var(--plan); }
.pl-pipeh { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 10px; }
.pl-pipeh h3 { margin: 0; font-size: 16px; font-weight: 800; }
.pl-pipeh small { color: var(--pl-mut); font-size: 12.5px; }
.pl-pipe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; }
.pl-col { min-height: 120px; padding: 9px; border: 1px solid var(--border-light); border-radius: 14px; background: var(--pl-bg); transition: background .2s ease, border-color .2s ease; }
.pl-col.is-over { border-color: var(--plan); background: var(--pl-soft); }
.pl-col-h { display: flex; align-items: center; gap: 6px; padding: 2px 3px 8px; font-size: 12.5px; font-weight: 800; }
.pl-col-h em { margin-left: auto; font-style: normal; color: var(--pl-mut); }
.pl-card { display: grid; gap: 4px; width: 100%; margin-bottom: 8px; padding: 9px 10px; border: 1px solid var(--border-light); border-radius: 12px; background: var(--surface); text-align: left;
font: inherit; color: inherit; cursor: grab; animation: plPop .35s var(--pl-spring) backwards; transition: transform .2s var(--pl-ease), box-shadow .2s ease, opacity .2s ease; }
.pl-card:hover, .pl-card:active, .pl-card:focus-visible { transform: translateY(-2px) rotate(-.4deg); box-shadow: var(--shadow-md); }
.pl-card.is-dragging { opacity: .45; }
.pl-card b { font-size: 13.5px; }
.pl-card small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--pl-mut); }
.pl-card .pl-amt { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.pl-col-add { width: 100%; padding: 6px; border: 1px dashed var(--border); border-radius: 10px; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--pl-ink); cursor: pointer; }
.pl-bud { padding: 16px 18px; border: 1px solid var(--border-light); border-radius: var(--pl-r); background: var(--pl-card); }
.pl-bud.is-off { padding: 34px 18px; text-align: center; }
.pl-bud-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pl-bud-top b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pl-bud-top span { font-size: 13.5px; color: var(--pl-mut); }
.pl-bud-top .pl-pill, .pl-bud-top label { margin-left: auto; }
.pl-bud-bar { display: flex; height: 12px; margin: 12px 0 8px; overflow: hidden; border-radius: 99px; background: var(--pl-soft); }
.pl-bud-bar i { display: block; height: 100%; transform-origin: left; animation: plFill 1s var(--pl-ease) .3s backwards; }
.pl-bud-bar .b1 { background: var(--plan); }
.pl-bud-bar .b2 { background: color-mix(in srgb, var(--plan) 45%, var(--surface)); animation-delay: .5s; }
.pl-bud-bar .b3 { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--warning) 45%, var(--surface)) 0 6px, color-mix(in srgb, var(--warning) 25%, var(--surface)) 6px 12px); animation-delay: .7s; }
.pl-bud-key { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--pl-mut); }
.pl-bud-key i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; }
.pl-tbl { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 13.5px; }
.pl-tbl th { padding: 6px 8px; border-bottom: 1px solid var(--border-light); text-align: left; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--pl-mut); }
.pl-tbl td { padding: 9px 8px; border-bottom: 1px solid var(--border-light); }
.pl-tbl td.n { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.pl-tbl tr.is-out td { color: var(--pl-faint); text-decoration: line-through; }
.pl-tbl tr { cursor: pointer; }
.pl-tbl tr:hover td { background: var(--pl-bg); }
.pl-note { margin-top: 10px; font-size: 12.5px; color: var(--pl-mut); }
.pl-feed { display: grid; gap: 2px; padding: 8px; border: 1px solid var(--border-light); border-radius: var(--pl-r); background: var(--pl-card); }
.pl-ev { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; font-size: 13.5px; animation: plIn .35s var(--pl-ease) backwards; }
.pl-ev:hover { background: var(--pl-bg); }
.pl-ev .pp-av { width: 28px; height: 28px; flex-basis: 28px; font-size: 10px; }
.pl-ev small { color: var(--pl-mut); font-size: 12px; white-space: nowrap; }
.pl-start { position: relative; padding: 26px; border: 1px solid var(--border-light); border-radius: 20px; background: var(--pl-card); box-shadow: var(--shadow-sm); animation: plIn .5s var(--pl-ease) backwards; }
.pl-start > .pl-vsw { position: absolute; top: 22px; right: 22px; }
.pl-start h2 { margin: 0; padding-right: 200px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.pl-start > p { margin: 4px 0 18px; color: var(--pl-mut); }
.pl-step { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; font-weight: 800; font-size: 15px; }
.pl-step i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 13px; background: var(--plan); color: var(--on-primary); }
.pl-step small { font-weight: 600; color: var(--pl-mut); }
.pl-inherit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; padding: 12px 14px; border-radius: 14px; font-size: 14px; background: var(--pl-soft); box-shadow: inset 0 0 0 1px var(--pl-line); }
.pl-inherit > span:nth-child(2) { flex: 1 1 360px; }
.pl-inherit small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--pl-mut); }
.pl-inherit-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; font-size: 16px; background: var(--surface); }
.pl-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-tog { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 0; border-radius: 999px; font: inherit; font-weight: 800; font-size: 13.5px; color: var(--pl-mut);
background: var(--pl-bg); box-shadow: inset 0 0 0 1px var(--border-light); cursor: pointer; transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease; }
.pl-tog:hover, .pl-tog:active, .pl-tog:focus-visible { transform: translateY(-1px); }
.pl-tog.is-on { color: var(--pl-ink); background: var(--pl-soft); box-shadow: inset 0 0 0 1.5px var(--plan); }
.pl-tog::before { content: '＋'; }
.pl-tog.is-on::before { content: '✓'; }
.pl-tog.is-radio::before { content: '○'; }
.pl-tog.is-radio.is-on::before { content: '●'; }
.pl-tog small { font-size: 12px; font-weight: 600; }
.pl-sum { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; padding: 14px 16px; border-radius: 15px; background: var(--pl-soft); }
.pl-sum p { margin: 0; font-size: 14px; }
.pl-sum .pl-btn { margin-left: auto; padding: 11px 20px; font-size: 15px; }
.pl-readonly { margin: 0 0 10px; padding: 8px 12px; border-radius: 11px; font-size: 13px; color: var(--pl-mut); background: var(--pl-bg); }
.pl-scrim { display: none; position: fixed; inset: 0; z-index: calc(var(--z-modal) - 1); border: 0; background: rgba(0, 0, 0, .28); animation: plFade .25s ease backwards; }
body:has(.pl.is-open) .aic-fab { visibility: hidden; }
.pl-dots { display: inline-flex; align-items: center; gap: 3px; }
.pl-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-active); box-shadow: inset 0 0 0 1px var(--border); }
.pl-dots i.is-done { background: var(--success); box-shadow: none; }
.pl-dots i.is-doing { background: var(--warning); box-shadow: none; }
.pl-dots i.is-stuck { background: var(--danger); box-shadow: none; }
.pl-every { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 12px; border: 1px dashed var(--pl-line); border-radius: 14px; font-size: 13px; background: var(--pl-soft); }
.pl-every b { color: var(--pl-ink); }
@container pl (max-width: 700px) {
.pl-head { grid-template-columns: auto minmax(0, 1fr) auto auto; padding: 10px 12px 10px 16px; gap: 8px; }
.pl-title { display: contents; }
.pl-title h2 { grid-column: 2; grid-row: 1; align-self: center; gap: 4px 8px; font-size: 17px; margin-right: 4px; }
.pl-title h2 .pl-days { padding: 2px 8px; font-size: 11.5px; }
.pl-acts { display: contents; }
.pl-acts > .pl-vsw { grid-column: 3 / -1; grid-row: 1; align-self: center; justify-self: end; }
.pl-health { grid-column: 1 / 3; grid-row: 2; min-width: 0; }
.pl-acts > .pl-menu { grid-row: 2; align-self: center; }
.pl-acts > .pl-menu:first-child { grid-column: 3; }
.pl-acts > .pl-menu + .pl-menu { grid-column: 4; }
.pl-acts .pl-btn { padding: 7px 11px; font-size: 13px; }
.pl-links { grid-row: 3; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.pl-links > * { flex: none; }
.pl-who { padding-top: 8px; }
.pl-tools { margin: 8px 0 10px; gap: 8px; }
.pl-add { flex-basis: 100%; max-width: none; }
.pl-add input, .pl-add input:focus { font-size: 16px; }
.pl-into select, .pl-into select:focus { max-width: 112px; }
.pl-tabs { flex: 1 1 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.pl-tab { flex: none; padding: 8px 11px; font-size: 13px; }
.pl-tab-more { margin-left: 0; }
.pl-tab-more .pl-pop { left: auto; right: 0; transform-origin: top right; }
.pl-search { display: none; }
.pl-cols { columns: 1; }
.pl-row { padding: 12px; }
.pl-row-t { font-size: 15px; }
.pl-chk { width: 24px; height: 24px; }
.pl-line { padding: 8px 9px; font-size: 14px; }
.pl-rest button.is-edit { margin-left: 0; }
.pl-side { position: static; z-index: auto; }
.pl.is-open .pl-work { min-height: 0; }
.pl-panel { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 88%; z-index: var(--z-modal); border-radius: 22px 22px 0 0; box-shadow: 0 -18px 50px rgba(0, 0, 0, .18);
animation-name: plSheet; animation-duration: .42s; }
.pl.is-open .pl-scrim { display: block; }
.pl-grab { display: block; width: 44px; height: 5px; margin: 8px auto 0; border-radius: 9px; background: var(--border); }
.pl-pg { padding-top: 6px; }
.pl-ss button { padding: 11px 2px; }
.pl-panel .pl-line { grid-template-columns: 20px minmax(0, 1fr) 54px 24px 24px; }
.pl-panel .pl-lines.has-prices .pl-line { grid-template-columns: 20px minmax(0, 1fr) 44px 54px 24px 24px; }
.pl-tl::before { left: 66px; }
.pl-slot { grid-template-columns: 50px 20px minmax(0, 1fr); }
.pl-start { padding: 18px; }
.pl-start > .pl-vsw { position: static; float: right; margin: -6px -6px 8px 10px; }
.pl-start h2 { padding-right: 0; font-size: 20px; }
.pl-role { grid-template-columns: 1fr; gap: 4px; }
}
.pl-mt .mt-theme-head { display: flex; align-items: center; gap: 10px; }
.pl-mt .mt-theme-head .pl-link { margin-left: auto; font-size: 12px; white-space: nowrap; }
.pl-mt .mt-trow-why { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pl-mt .mt-trow { animation: plIn .4s var(--pl-ease) backwards; }
.pl-mt .mt-trow:nth-child(2) { animation-delay: .05s; } .pl-mt .mt-trow:nth-child(3) { animation-delay: .1s; } .pl-mt .mt-trow:nth-child(n+4) { animation-delay: .15s; }
.pl-mt-open { color: inherit; text-decoration: none; display: block; }
.pl-mt-open:hover, .pl-mt-open:active, .pl-mt-open:focus-visible { color: var(--pl-ink); text-decoration: underline; text-underline-offset: 3px; }
.pl-kind { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; font-size: 15px; flex: none; background: var(--pl-soft); }
.pl-kind .pp-av { width: 28px; height: 28px; flex-basis: 28px; font-size: 10.5px; }
.pl-mt .pl-take { border: 0; border-radius: 9px; padding: 6px 11px; font: inherit; font-weight: 800; font-size: 12.5px; background: var(--plan); color: var(--on-primary); cursor: pointer;
transition: transform .15s ease; }
.pl-mt .pl-take:hover, .pl-mt .pl-take:active, .pl-mt .pl-take:focus-visible { transform: translateY(-1px); }
.pl-mention .mt-trow-name { font-weight: 600; }
.pl-mention .mt-trow-name b { font-weight: 800; }
.pl-late-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); margin-right: 6px; vertical-align: 1px; animation: plPulse 2s ease-in-out infinite; }
.omm-brief-slide.pl-slide .omm-brief-slide-head span:first-child { color: var(--pl-ink); font-weight: 800; }
.omm-brief-slide.pl-slide .omm-brief-item-why .is-late { color: var(--st-red); font-weight: 800; }
.pl-ecc { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 1px 9px 1px 5px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1.6;
text-decoration: none; vertical-align: 1px; white-space: nowrap; color: var(--pl-ink); background: var(--pl-soft);
animation: plPop .35s var(--pl-spring) .3s backwards; transition: transform .15s ease, box-shadow .2s ease; }
.pl-ecc:hover, .pl-ecc:active, .pl-ecc:focus-visible { transform: translateY(-1px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--plan) 40%, transparent); }
.pl-ecc i { width: 12px; height: 12px; border-radius: 50%; flex: none;
background: radial-gradient(var(--surface) 38%, transparent 42%), conic-gradient(currentColor calc(var(--p, 0) * 1%), color-mix(in srgb, currentColor 22%, var(--surface)) 0); }
.pl-ecc.is-late { color: var(--st-red); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.pl-ecc.is-warn { color: var(--st-amber); background: color-mix(in srgb, var(--warning) 10%, var(--surface)); }
.pl-ecc.is-done { color: var(--st-green); background: color-mix(in srgb, var(--success) 9%, var(--surface)); }
.pl-ecc.is-none { color: var(--pl-mut); background: none; box-shadow: inset 0 0 0 1px var(--border); padding-left: 8px; }
.pl-need { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 14px; border-radius: 14px; background: color-mix(in srgb, var(--plan) 7%, var(--surface));
box-shadow: inset 0 0 0 1px var(--pl-line); font-size: 13.5px; animation: plIn .45s var(--pl-ease) backwards; }
.pl-need b { color: var(--pl-ink); }
.pl-need a { display: inline-flex; gap: 6px; align-items: center; text-decoration: none; color: var(--text); font-weight: 700; background: var(--surface); border-radius: 999px; padding: 4px 10px;
box-shadow: var(--shadow-xs); transition: transform .15s ease; }
.pl-need a:hover, .pl-need a:active, .pl-need a:focus-visible { transform: translateY(-1px); }
.pl-need > span { color: var(--pl-mut); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
.pl, .pl *, .pl *::before, .pl *::after, .pl-vsw-o { animation: none; transition: none; }
.pl-mt .mt-trow, .pl-late-dot, .pl-ecc, .pl-need { animation: none; transition: none; }
}
.pl-ses { margin: 0 0 14px; border: 1px solid var(--pl-line); border-radius: var(--pl-r); background: var(--pl-card); box-shadow: var(--shadow-xs); animation: plIn .45s var(--pl-ease) backwards; }
.pl-ses-h { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding: 10px 14px; }
.pl-ses-h h3 { margin: 0; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
.pl-ses-h h3 em { padding: 1px 7px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--pl-ink); background: var(--pl-soft); }
.pl-ses-hint { font-size: 12.5px; color: var(--pl-mut); }
.pl-ses-fold, .pl-ses-later { border: 0; border-radius: 9px; padding: 5px 10px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--pl-mut); background: var(--pl-bg); cursor: pointer;
transition: background .2s ease, color .2s ease; }
.pl-ses-fold:hover, .pl-ses-fold:active, .pl-ses-fold:focus-visible,
.pl-ses-later:hover, .pl-ses-later:active, .pl-ses-later:focus-visible { color: var(--pl-ink); background: var(--pl-soft); }
.pl-ses-fold { margin-left: auto; }
.pl-ses-later { display: block; width: 100%; padding: 9px; border-top: 1px solid var(--border-light); border-radius: 0 0 var(--pl-r) var(--pl-r); background: none; }
.pl-ses-t { border-top: 1px solid var(--border-light); }
.pl-ses-r { display: grid; grid-template-columns: 116px minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) 78px 122px 124px 30px; gap: 0 6px; align-items: center; padding: 4px 8px 4px 14px;
border-bottom: 1px solid var(--border-light); transition: background .2s ease, box-shadow .2s ease; }
.pl-ses-r:last-child { border-bottom: 0; border-radius: 0 0 var(--pl-r) var(--pl-r); }
.pl-ses-r.is-head { padding-top: 6px; padding-bottom: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--pl-mut); background: var(--pl-bg); }
.pl-ses-r.is-head span:not(:first-child) { padding-left: 8px; }
.pl-ses-r:not(.is-head):hover, .pl-ses-r:not(.is-head):focus-within { background: var(--pl-bg); }
.pl-ses-r.is-on, .pl-ses-r.is-on:hover { background: var(--pl-soft); box-shadow: inset 3px 0 0 var(--plan); }
.pl-ses-r.is-past, .pl-ses-r.is-later { display: none; }
.pl-ses-t.shows-past .pl-ses-r.is-past, .pl-ses-t.shows-later .pl-ses-r.is-later { display: grid; animation: plIn .3s var(--pl-ease) backwards; }
.pl-ses-r.is-past .pl-ses-when b { color: var(--pl-mut); }
.pl-ses-when { display: grid; line-height: 1.25; min-width: 0; }
.pl-ses-when small { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--pl-ink); }
.pl-ses-when b { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-ses-sum { display: none; }
.pl-ses-f { display: flex; align-items: center; gap: 2px; min-width: 0; }
.pl-ses-f i { display: none; flex: none; font-style: normal; font-size: 13px; }
.pl-ses-f input { width: 100%; min-width: 0; padding: 7px 8px; border: 1px solid transparent; border-radius: 9px; box-shadow: none; background: none; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--text);
text-overflow: ellipsis; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.pl-ses-f.is-title input { font-weight: 800; }
.pl-ses-f input::placeholder { font-weight: 600; color: var(--pl-faint); opacity: 1; }
.pl-ses-f input:hover:not(:read-only) { border-color: var(--border-light); background: var(--surface); }
.pl-ses-f input:focus:not(:read-only) { outline: 0; border-color: var(--plan); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--plan) 14%, transparent); }
.pl-ses-f input:read-only { cursor: default; }
.pl-ses-f input:read-only:focus { outline: 0; box-shadow: none; }
.pl-ses-lead { display: inline-flex; align-items: center; min-height: 30px; padding: 2px 6px; border: 0; border-radius: 9px; background: none; font: inherit; cursor: pointer; transition: background .2s ease; }
.pl-ses-lead:hover, .pl-ses-lead:active, .pl-ses-lead:focus-visible { background: var(--pl-soft); }
.pl-ses-lead .pl-nobody { font-size: 12px; white-space: nowrap; }
.pl-ses-st { display: inline-flex; min-width: 0; }
.pl-ses-st select, .pl-ses-st select:focus { width: 100%; min-width: 0; padding: 4px 6px 4px 10px; border: 0; outline: 0; border-radius: 999px; box-shadow: none; font: inherit; font-size: 12px; font-weight: 800; line-height: 1.5;
color: var(--c, var(--st-grey)); background-color: color-mix(in srgb, var(--c, var(--st-grey)) 11%, var(--surface)); cursor: pointer; text-overflow: ellipsis; }
.pl-ses-st select:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, var(--st-grey)) 40%, transparent); }
.pl-ses-st select:disabled { opacity: 1; cursor: default; }
.pl-ses-work { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 30px; min-width: 0; padding: 3px 8px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 12.5px;
color: var(--pl-mut); white-space: nowrap; cursor: pointer; transition: background .2s ease; }
.pl-ses-work b { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.pl-ses-work b.is-none { font-weight: 600; color: var(--pl-faint); }
.pl-ses-work .pl-mini { width: 30px; }
.pl-ses-go { font-size: 12px; color: var(--pl-ink); transition: transform .2s var(--pl-ease); }
.pl-ses-work:hover, .pl-ses-work:active, .pl-ses-work:focus-visible { background: color-mix(in srgb, var(--plan) 12%, var(--surface)); }
.pl-ses-work:hover .pl-ses-go, .pl-ses-work:active .pl-ses-go, .pl-ses-work:focus-visible .pl-ses-go { transform: translateX(2px); }
.pl-ses-r.is-on .pl-ses-go { transform: rotate(90deg); }
.pl-ses-x { width: 30px; height: 30px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 16px; line-height: 1; color: var(--pl-mut); cursor: pointer; transition: background .2s ease, color .2s ease; }
.pl-ses-x:hover, .pl-ses-x:active, .pl-ses-x:focus-visible, .pl-ses-r.is-more .pl-ses-x { background: var(--pl-soft); color: var(--pl-ink); }
.pl-ses-more { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px 16px; align-items: start; margin: 4px 0 8px; padding: 12px; border-radius: 12px;
background: var(--surface); box-shadow: inset 0 0 0 1px var(--pl-line); animation: plIn .25s var(--pl-ease) backwards; }
.pl-ses-who { display: grid; gap: 6px; min-width: 0; }
.pl-ses-who > b { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--pl-mut); }
.pl-ses-who .pp { margin: 0; } .pl-ses-who .pp-note { display: none; }
.pl-ses-notes, .pl-ses-notes:focus { width: 100%; min-height: 62px; padding: 8px 10px; border: 1px solid var(--border-light); border-radius: 10px; outline: 0; box-shadow: none; resize: vertical; font: inherit; font-size: 13.5px;
color: var(--text); background: var(--surface); }
.pl-ses-notes:focus:not(:read-only) { border-color: var(--plan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--plan) 14%, transparent); }
.pl-ses-opts { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-ses-opts input[type="date"], .pl-ses-opts input[type="date"]:focus { padding: 1px 2px; border: 0; outline: 0; box-shadow: none; background: none; font: inherit; font-size: 12.5px; color: var(--text); }
.pl-ses-facts { margin-left: auto; font-size: 12.5px; color: var(--pl-mut); }
.pl-ses-own { grid-column: 1 / -1; display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-light); min-width: 0; }
.pl-ses-own > b { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--pl-mut); }
.pl-ses-own > b small { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.pl-ses-own .pl-rows { padding: 0; }
.pl-ses-own .pl-calm { padding: 10px 12px; border: 1px dashed var(--border); border-radius: 12px; }
.pl-ses-add { flex: none; max-width: 620px; }
.pl-sesl { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 3px 8px; align-items: center; width: 100%; padding: 9px 14px; border: 0; border-bottom: 1px solid var(--border-light);
background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background .2s ease, box-shadow .2s ease; }
.pl-sesl:hover, .pl-sesl:active, .pl-sesl:focus-visible { background: var(--pl-bg); }
.pl-sesl.is-on, .pl-sesl.is-on:hover { background: var(--pl-soft); box-shadow: inset 3px 0 0 var(--plan); }
.pl-sesl-when { grid-area: 1 / 1; display: flex; align-items: baseline; gap: 7px; min-width: 0; white-space: nowrap; }
.pl-sesl .pl-pill { grid-area: 1 / 2; }
.pl-sesl-when small { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--pl-ink); }
.pl-sesl-when b { font-size: 13.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.pl-sesl-what { grid-area: 2 / 1 / 3 / -1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--pl-mut); }
.pl-sesl-what b { font-weight: 800; color: var(--text); }
.pl-sesl-what > * + * { margin-left: 8px; }
.pl-sesl-what em { font-style: normal; color: var(--pl-faint); }
.pl-sesl-work { grid-area: 1 / 3; font-size: 12px; color: var(--pl-mut); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-sesl-work b { font-weight: 800; color: var(--text); }
.pl-sesl-work i { font-style: normal; color: var(--pl-faint); }
.pl-sesl-all { display: block; width: 100%; padding: 9px 14px; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--pl-ink); text-align: left; cursor: pointer;
transition: background .2s ease; }
.pl-sesl-all:hover, .pl-sesl-all:active, .pl-sesl-all:focus-visible { background: var(--pl-soft); }
.pl-sespick { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 0 4px 0 10px; border-radius: 10px; background: var(--surface-active); font-size: 12.5px; font-weight: 800; color: var(--pl-mut);
transition: background .2s ease, box-shadow .2s ease; }
.pl-sespick select, .pl-sespick select:focus { max-width: 168px; padding: 7px 2px 7px 4px; border: 0; outline: 0; box-shadow: none; background-color: transparent; font: inherit; font-weight: 800; color: var(--text);
cursor: pointer; text-overflow: ellipsis; }
.pl-sespick.is-on { background: var(--pl-soft); box-shadow: inset 0 0 0 1.5px var(--plan); }
.pl-sespick.is-on select { color: var(--pl-ink); }
.pl-sespick button { width: 26px; height: 26px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 12px; color: var(--pl-ink); cursor: pointer; }
.pl-sespick button:hover, .pl-sespick button:active, .pl-sespick button:focus-visible { background: color-mix(in srgb, var(--plan) 16%, var(--surface)); }
.pl-into.is-ses { padding-right: 9px; color: var(--pl-ink); background: var(--pl-soft); }
.pl-tools:has(.pl-sespick) .pl-add { flex-basis: 270px; }
@container pl (max-width: 700px) {
.pl-ses-hint, .pl-ses-r.is-head, .pl-ses-x { display: none; }
.pl-ses-r { grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 8px; padding: 9px 10px 9px 12px; }
.pl-ses-when { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; gap: 6px; }
.pl-ses-lead { grid-column: 2; grid-row: 1; }
.pl-ses-st { grid-column: 3; grid-row: 1; }
.pl-ses-sum { grid-column: 1 / 3; grid-row: 2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-width: 0; padding: 4px 0; border: 0; background: none; font: inherit;
font-size: 14px; line-height: 1.4; color: var(--pl-mut); text-align: left; cursor: pointer; }
.pl-ses-sum > * { margin-right: 8px; }
.pl-ses-sum b { font-weight: 800; color: var(--text); }
.pl-ses-sum em { font-style: normal; color: var(--pl-faint); }
.pl-ses-work { grid-column: 3; grid-row: 2; }
.pl-ses-f { display: none; grid-column: 1 / -1; }
.pl-ses-r.is-more .pl-ses-f { display: flex; }
.pl-ses-r.is-more .pl-ses-sum { display: none; }
.pl-ses-r.is-more .pl-ses-work { grid-column: 1 / -1; justify-content: flex-start; }
.pl-ses-f i { display: inline; }
.pl-ses-f input, .pl-ses-notes, .pl-ses-notes:focus { padding: 8px 6px; font-size: 16px; }
.pl-ses-f input { border-color: var(--border-light); background: var(--surface); }
.pl-ses-more { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
.pl-ses-facts { margin-left: 0; }
.pl-sesl { padding: 11px 12px; }
.pl-sesl-what { font-size: 14px; }
.pl-sesl-all { padding: 12px; }
.pl-sespick select, .pl-sespick select:focus { max-width: 132px; padding: 8px 2px 8px 4px; font-size: 16px; }
.pl-sespick button { width: 32px; height: 32px; }
.pl-into.is-ses { display: none; }
.pl-ses-add input, .pl-ses-add input:focus { font-size: 16px; }
}
.olami-settings { color: var(--text); }
.olami-settings * { box-sizing: border-box; }
.olami-settings .om-page-head { margin-bottom: 18px; }
.olami-settings .om-page-head h1 {
font-weight: 800;
font-size: 24px;
letter-spacing: -0.3px;
margin: 0 0 4px;
color: var(--text);
}
.olami-settings .om-page-head p { margin: 0; color: var(--text-secondary); font-size: 13px; }
.olami-settings .om-toptabs {
display: flex;
gap: 5px;
background: var(--surface-active);
padding: 5px;
border-radius: 8px;
margin-bottom: 20px;
max-width: 600px;
flex-wrap: wrap;
}
.olami-settings .om-toptab {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
border: none;
border-radius: 6px;
background: transparent;
color: var(--text-secondary);
text-decoration: none;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.olami-settings .om-toptab.active {
background: var(--surface);
color: var(--text);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.olami-settings .om-subtab-bar {
display: flex;
gap: 6px;
padding: 6px;
background: var(--surface-active);
border: 1px solid var(--border-light);
border-radius: 10px;
margin-bottom: 20px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.olami-settings .om-subtab-bar::-webkit-scrollbar { display: none; }
.olami-settings .om-subtab {
flex-shrink: 0;
padding: 8px 16px;
border: none;
border-radius: 7px;
background: transparent;
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s;
}
.olami-settings .om-subtab:hover { background: var(--surface-hover); color: var(--text); }
.olami-settings .om-subtab.active {
background: var(--primary);
color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.olami-settings .om-card {
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
padding: 24px 22px;
margin-bottom: 22px;
}
.olami-settings .om-section-title {
font-size: 18px;
font-weight: 700;
margin: 0 0 22px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-light);
display: flex;
align-items: center;
gap: 10px;
color: var(--text);
}
.olami-settings .om-form-group { margin-bottom: 22px; }
.olami-settings .om-form-group:last-child { margin-bottom: 0; }
.olami-settings .om-row { display: flex; gap: 30px; flex-wrap: wrap; }
.olami-settings .om-row > .om-form-group { flex: 1; min-width: 200px; }
.olami-settings .om-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .olami-settings .om-grid-2 { grid-template-columns: 1fr; } }
.olami-settings .om-label {
display: block;
font-size: 13px;
font-weight: 600;
margin-bottom: 8px;
color: var(--text);
}
.olami-settings .om-desc {
font-size: 12.5px;
color: var(--text-secondary);
margin-top: 6px;
line-height: 1.45;
}
.olami-settings .om-desc code {
background: var(--surface-active);
padding: 1px 5px;
border-radius: 4px;
font-size: 11.5px;
}
.olami-settings .om-desc a { color: var(--secondary); }
.olami-settings .om-input,
.olami-settings .om-select,
.olami-settings .om-textarea {
width: 100%;
padding: 11px 14px;
font-size: 14px;
color: var(--text);
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
transition: all 0.2s ease;
font-family: inherit;
}
.olami-settings .om-textarea { resize: vertical; }
.olami-settings .om-input:focus,
.olami-settings .om-select:focus,
.olami-settings .om-textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-soft);
outline: none;
}
.olami-settings .om-input::placeholder,
.olami-settings .om-textarea::placeholder { color: var(--text-muted); }
.olami-settings .om-color-pair { display: flex; gap: 10px; align-items: center; }
.olami-settings .om-color-swatch {
height: 46px;
width: 56px;
padding: 4px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
cursor: pointer;
}
.olami-settings .om-color-hex { font-family: monospace; letter-spacing: 1px; flex: 1; }
.olami-settings .om-toggle {
position: relative;
display: inline-block;
width: 50px;
height: 28px;
flex-shrink: 0;
}
.olami-settings .om-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.olami-settings .om-toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background-color: var(--border);
transition: 0.3s;
border-radius: 28px;
}
.olami-settings .om-toggle-slider:before {
position: absolute;
content: "";
height: 22px;
width: 22px;
left: 3px;
bottom: 3px;
background-color: var(--surface);
transition: 0.3s;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.olami-settings .om-toggle input:checked + .om-toggle-slider { background-color: var(--success); }
.olami-settings .om-toggle input:checked + .om-toggle-slider:before { transform: translateX(22px); }
.olami-settings .om-checkbox-group { margin-top: 4px; display: flex; flex-direction: column; gap: 15px; }
.olami-settings .om-checkbox-label { display: flex; align-items: flex-start; cursor: pointer; gap: 11px; }
.olami-settings .om-checkbox-label input { display: none; }
.olami-settings .om-checkmark {
width: 22px;
height: 22px;
border: 2px solid var(--border);
border-radius: 6px;
background: var(--surface);
flex-shrink: 0;
position: relative;
transition: all 0.2s;
}
.olami-settings .om-checkbox-label input:checked + .om-checkmark {
background: var(--primary);
border-color: var(--primary);
}
.olami-settings .om-checkmark::after {
content: '';
position: absolute;
display: none;
left: 7px;
top: 3px;
width: 6px;
height: 11px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.olami-settings .om-checkbox-label input:checked + .om-checkmark::after { display: block; }
.olami-settings .om-cb-text { font-size: 14px; font-weight: 600; padding-top: 1px; color: var(--text); }
.olami-settings .om-cb-desc { display: block; font-size: 12.5px; font-weight: 400; color: var(--text-secondary); margin-top: 3px; }
.olami-settings .om-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 22px;
font-size: 14px;
font-weight: 600;
border-radius: 99px;
background: var(--primary);
color: #fff;
border: none;
cursor: pointer;
transition: 0.2s;
text-decoration: none;
}
.olami-settings .om-btn:hover { background: var(--primary-hover); transform: scale(1.02); }
.olami-settings .om-btn-secondary { background: var(--surface-active); color: var(--text); }
.olami-settings .om-btn-secondary:hover { background: var(--border-light); transform: none; }
.olami-settings .om-save-bar {
position: sticky;
bottom: 16px;
background: var(--surface);
border: 1px solid var(--border-light);
padding: 14px 24px;
border-radius: 16px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: var(--shadow-lg);
margin-top: 28px;
z-index: 20;
}
.olami-settings .om-save-bar .om-save-hint { font-weight: 600; color: var(--text-secondary); font-size: 13px; }
.olami-settings .om-repeater-row { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }
.olami-settings .om-repeater-remove {
color: var(--danger);
cursor: pointer;
font-size: 18px;
line-height: 1;
padding: 4px 8px;
border-radius: 6px;
}
.olami-settings .om-repeater-remove:hover { background: var(--danger-soft); }
.olami-settings .om-integration-card {
background: var(--surface-hover);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 20px;
margin-bottom: 15px;
border-left: 4px solid var(--int-c, var(--border));
}
.olami-settings .om-integration-card:last-child { margin-bottom: 0; }
.olami-settings .om-int-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.olami-settings .om-int-id { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.olami-settings button.om-int-id {
background: none;
border: 0;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.olami-settings button.om-int-id:hover .om-int-title { color: var(--primary); }
.olami-settings button.om-int-id:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 10px; }
.olami-settings .om-int-chev {
width: 8px;
height: 8px;
flex: none;
margin-left: 2px;
border-right: 2px solid var(--text-muted);
border-bottom: 2px solid var(--text-muted);
transform: rotate(-45deg);
transition: transform 0.18s ease;
}
.olami-settings .om-int-chev.is-open { transform: rotate(45deg); }
.olami-settings .om-int-state {
flex: none;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
padding: 3px 9px;
border-radius: 999px;
background: var(--surface);
border: 1px solid var(--border-light);
color: var(--text-muted);
}
.olami-settings .om-int-state.is-on {
background: color-mix(in srgb, var(--success) 14%, transparent);
border-color: var(--success);
color: var(--success);
}
.olami-settings .om-int-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #fff;
flex-shrink: 0;
}
.olami-settings .om-int-title { font-size: 15px; font-weight: 700; color: var(--text); }
.olami-settings .om-int-sub { font-size: 12px; color: var(--text-secondary); }
.olami-settings .om-int-fields { margin-top: 15px; }
.olami-settings .om-int-head + .om-note { margin-top: 15px; }
.olami-settings .om-note {
padding: 12px 15px;
border-radius: 8px;
font-size: 13px;
line-height: 1.5;
margin-top: 12px;
}
.olami-settings .om-note-warn { background: var(--warning-bg); border: 1px solid #fde68a; color: var(--warning-text); }
.olami-settings .om-note-info { background: var(--info-bg); border: 1px solid #bae6fd; color: var(--info-text); }
.olami-settings .om-note-ok { background: var(--success-bg); border: 1px solid #a7f3d0; color: var(--success-text); }
.olami-settings .om-brand-preview { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.olami-settings .om-brand-chip { display: flex; align-items: center; gap: 10px; }
.olami-settings .om-brand-dot { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.olami-settings .om-brand-hex { font-family: monospace; font-size: 13px; color: var(--text); }
.olami-settings .om-staff-list { display: flex; flex-direction: column; gap: 8px; }
.olami-settings .om-staff-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--surface-hover);
border: 1px solid var(--border-light);
border-radius: 10px;
}
.olami-settings .om-staff-avatar {
width: 34px;
height: 34px;
flex: none;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), #5856d6);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
}
.olami-settings .om-staff-info { min-width: 0; flex: 1; }
.olami-settings .om-staff-name { font-size: 14px; font-weight: 600; color: var(--text); }
.olami-settings .om-staff-email { font-size: 12px; color: var(--text-secondary); }
.olami-settings .om-staff-role {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
padding: 4px 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--rc, var(--primary)) 14%, transparent);
color: var(--rc, var(--primary));
}
.olami-settings .om-staff-head {
display: flex;
align-items: center;
gap: 12px;
padding: 2px 14px 10px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--text-muted);
}
.olami-settings .om-staff-head::before { content: ""; width: 34px; flex: none; }
.olami-settings .om-staff-head-who { flex: 1; min-width: 0; }
.olami-settings .om-staff-cell {
flex: none;
width: 104px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.olami-settings .om-staff-cell--role { width: 156px; justify-content: flex-start; }
.olami-settings .om-staff-select { width: 100%; }
.olami-settings .om-staff-cell-tag { display: none; font-size: 12px; color: var(--text-secondary); }
@media (max-width: 760px) {
.olami-settings .om-staff-head { display: none; }
.olami-settings .om-staff-row { flex-wrap: wrap; }
.olami-settings .om-staff-info { flex: 1 1 60%; }
.olami-settings .om-staff-cell { width: auto; justify-content: flex-start; }
.olami-settings .om-staff-cell--role { width: 100%; }
.olami-settings .om-staff-cell-tag { display: inline; }
}
.olami-settings .om-chip-toggle { display: flex; flex-wrap: wrap; gap: 8px; }
.olami-settings .om-chip {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border: 1px solid var(--border-light);
border-radius: 8px;
cursor: pointer;
font-size: 13px;
background: var(--surface);
transition: all 0.2s;
}
.olami-settings .om-chip input { accent-color: var(--primary); }
.olami-settings .om-chip.is-on { background: var(--primary-soft); border-color: var(--primary); }
.olami-settings .om-cat-head,
.olami-settings .om-cat-row {
display: grid;
grid-template-columns: 1fr 14px 1fr 92px 34px;
align-items: center;
gap: 8px;
}
.olami-settings .om-cat-row { margin-bottom: 8px; }
.olami-settings .om-cat-head {
padding: 0 2px 8px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--text-muted);
}
.olami-settings .om-cat-head > span:nth-child(2) { grid-column: 3; }
.olami-settings .om-cat-head-uses { grid-column: 4; text-align: center; }
.olami-settings .om-cat-arrow { color: var(--text-muted); text-align: center; }
.olami-settings .om-cat-uses {
font-size: 11px;
font-weight: 600;
text-align: center;
color: var(--text-muted);
white-space: nowrap;
}
.olami-settings .om-cat-uses.is-used { color: var(--text-secondary); }
@media (max-width: 720px) {
.olami-settings .om-cat-head { display: none; }
.olami-settings .om-cat-row { grid-template-columns: 1fr 14px 1fr 34px; }
.olami-settings .om-cat-uses { grid-column: 1 / -1; text-align: left; }
}
.olami-settings .om-divider { border: none; border-top: 1px solid var(--border-light); margin: 20px 0; }
.olami-settings .om-subhead { font-size: 14px; font-weight: 700; margin: 0 0 14px; color: var(--text); }
.olami-settings .om-tab {
padding: 9px 16px;
border: none;
background: transparent;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
.olami-settings .om-tab:hover { color: var(--text); }
.olami-settings .om-tab.is-on { color: var(--primary); border-bottom-color: var(--primary); }
.olami-settings .ofb-wrap { display: flex; gap: 24px; align-items: flex-start; }
.olami-settings .ofb-sidebar { width: 380px; flex-shrink: 0; }
.olami-settings .ofb-main { flex: 1; min-width: 0; }
.olami-settings .ofb-card { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 20px; }
.olami-settings .ofb-card-header { padding: 16px 20px; border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; }
.olami-settings .ofb-card-header h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.olami-settings .ofb-card-body { padding: 16px; }
.olami-settings .ofb-btn { padding: 10px 18px; border-radius: var(--radius); font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: all 0.15s; }
.olami-settings .ofb-btn-primary { background: var(--primary); color: var(--text-inverse); }
.olami-settings .ofb-btn-secondary { background: var(--surface-active); color: var(--text-secondary); }
.olami-settings .ofb-btn-danger { background: var(--danger-bg); color: var(--danger); }
.olami-settings .ofb-btn-sm { padding: 6px 12px; font-size: 12px; }
.olami-settings .ofb-fields { max-height: 600px; overflow-y: auto; }
.olami-settings .ofb-field-item { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--bg); border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: all 0.15s; border: 2px solid transparent; }
.olami-settings .ofb-field-item:hover { background: var(--surface-active); }
.olami-settings .ofb-field-item.selected { border-color: var(--primary); background: rgba(var(--primary-rgb), 0.08); box-shadow: inset 4px 0 0 var(--primary); padding-left: 16px; }
.olami-settings .ofb-field-item.disabled { opacity: 0.5; }
.olami-settings .ofb-field-drag { color: var(--text-muted); cursor: grab; padding: 4px; }
.olami-settings .ofb-field-info { flex: 1; min-width: 0; }
.olami-settings .ofb-field-label { font-weight: 600; font-size: 13px; color: var(--text); }
.olami-settings .ofb-field-meta { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.olami-settings .ofb-field-meta code { background: var(--border-light); padding: 1px 4px; border-radius: 3px; font-size: 10px; }
.olami-settings .ofb-req { flex-shrink: 0; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .2px; line-height: 1; padding: 6px 9px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.olami-settings .ofb-req:hover { border-color: var(--primary); color: var(--primary); }
.olami-settings .ofb-req.is-required { background: rgba(var(--primary-rgb), 0.12); border-color: var(--primary); color: var(--primary); }
.olami-settings .ofb-toggle { width: 36px; height: 20px; background: var(--border); border-radius: 10px; position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
.olami-settings .ofb-toggle.on { background: var(--primary); }
.olami-settings .ofb-toggle::after { content: ''; position: absolute; width: 16px; height: 16px; background: var(--surface); border-radius: 50%; top: 2px; left: 2px; transition: transform 0.2s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.olami-settings .ofb-toggle.on::after { transform: translateX(16px); }
.olami-settings .ofb-add-btn { width: 100%; padding: 12px; border: 2px dashed var(--border); border-radius: 10px; background: transparent; color: var(--text-secondary); font-weight: 600; cursor: pointer; transition: all 0.15s; }
.olami-settings .ofb-add-btn:hover { border-color: var(--primary); color: var(--primary); }
.olami-settings .ofb-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.olami-settings .ofb-tab { padding: 10px 18px; border-radius: var(--radius); font-size: 13px; font-weight: 600; cursor: pointer; border: 2px solid var(--border); background: var(--surface); color: var(--text-secondary); transition: all 0.15s; }
.olami-settings .ofb-tab:hover { border-color: var(--primary); color: var(--primary); }
.olami-settings .ofb-tab.active { background: var(--primary); color: var(--text-inverse); border-color: var(--primary); }
.olami-settings .ofb-tab[disabled] { opacity: 0.4; cursor: not-allowed; }
.olami-settings .ofb-tab[disabled]:hover { border-color: var(--border); color: var(--text-secondary); }
.olami-settings .ofb-tab-panel { display: none; }
.olami-settings .ofb-tab-panel.active { display: block; }
.olami-settings .ofb-form-group { margin-bottom: 14px; }
.olami-settings .ofb-form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; }
.olami-settings .ofb-form-group input, .olami-settings .ofb-form-group select, .olami-settings .ofb-form-group textarea { width: 100%; padding: 9px 11px; border: 2px solid var(--border); border-radius: var(--radius); font-size: 13px; color: var(--text); background: var(--surface); font-family: inherit; }
.olami-settings .ofb-form-group input:focus, .olami-settings .ofb-form-group select:focus, .olami-settings .ofb-form-group textarea:focus { outline: none; border-color: var(--primary); }
.olami-settings .ofb-form-group textarea { min-height: 70px; resize: vertical; }
.olami-settings .ofb-form-row { display: flex; gap: 12px; }
.olami-settings .ofb-form-row .ofb-form-group { flex: 1; }
.olami-settings .ofb-checkbox { display: flex; align-items: center; gap: 8px; }
.olami-settings .ofb-checkbox input { width: 16px; height: 16px; accent-color: var(--primary); }
.olami-settings .ofb-checkbox label { margin: 0; }
.olami-settings .ofb-preview-wrap { background: var(--surface-active); border-radius: var(--radius-md); padding: 30px; }
.olami-settings .ofb-preview { max-width: 640px; margin: 0 auto; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 40px; position: relative; }
.olami-settings .ofb-preview * { pointer-events: none; }
.olami-settings .ofb-preview::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--primary), rgba(var(--primary-rgb), 0.60)); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.olami-settings .ofb-preview-header { text-align: center; margin-bottom: 30px; }
.olami-settings .ofb-preview-avatar { width: 90px; height: 90px; border-radius: 50%; margin: 0 auto 16px; background: linear-gradient(135deg, var(--surface-hover), var(--border-light)); display: flex; align-items: center; justify-content: center; font-size: 36px; }
.olami-settings .ofb-preview-header h2 { font-size: 26px; font-weight: 800; color: var(--text); margin: 0 0 8px; }
.olami-settings .ofb-preview-header p { font-size: 14px; color: var(--text-secondary); margin: 0; }
.olami-settings .ofb-preview-fields { display: flex; flex-wrap: wrap; gap: 16px; }
.olami-settings .ofb-preview-field { flex: 1 1 calc(50% - 8px); min-width: 200px; }
.olami-settings .ofb-preview-field.full { flex: 1 1 100%; }
.olami-settings .ofb-preview-field.cond { opacity: 0.5; position: relative; }
.olami-settings .ofb-preview-field.cond::before { content: '⚡'; position: absolute; top: -8px; right: 0; font-size: 12px; }
.olami-settings .ofb-preview-field > label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.olami-settings .ofb-preview-field .req { color: var(--danger); }
.olami-settings .ofb-preview-field input, .olami-settings .ofb-preview-field select { width: 100%; padding: 13px 15px; border: 2px solid var(--border); border-radius: var(--radius-md); font-size: 14px; background: var(--surface); color: var(--text); }
.olami-settings .ofb-preview-cb { display: inline-flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg); border-radius: var(--radius-md); }
.olami-settings .ofb-preview-cb input { width: 20px; height: 20px; }
.olami-settings .ofb-preview-cb span { font-weight: 500; color: var(--text); }
.olami-settings .ofb-preview-submit { width: 100%; padding: 16px; background: var(--primary); border: none; border-radius: 14px; font-size: 16px; font-weight: 700; color: var(--text-inverse); margin-top: 20px; cursor: default; }
@media (max-width: 1100px) {
.olami-settings .ofb-wrap { flex-direction: column; }
.olami-settings .ofb-sidebar { width: 100%; }
}
.olami-settings .cd-stage {
display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;
background: var(--surface-active); border-radius: 14px; padding: 26px; margin: 6px 0 20px;
}
.olami-settings .cd-stage-dark { background: #0c1322; perspective: 1000px; }
.olami-settings .cd-stage-grey { background: #4b5563; }
.olami-settings .cd-cap { text-align: center; margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: .5px; }
.olami-settings .cd-statebar { display: flex; gap: 6px; justify-content: center; margin: 4px 0 12px; }
.olami-settings .cd-statebtn { padding: 5px 13px; border: 1px solid var(--border-light); background: var(--surface); border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.olami-settings .cd-statebtn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.olami-settings .cd-ticket { width: 340px; max-width: 100%; height: 180px; display: flex; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,.22); }
.olami-settings .cd-ticket.is-declined { opacity: .6; }
.olami-settings .cd-ticket-body { flex: 1; position: relative; padding: 14px 16px; display: flex; overflow: hidden; border-right: 2px dashed rgba(255,255,255,.45); border-radius: 12px 0 0 12px;
-webkit-mask-image: radial-gradient(circle at right center, transparent 9px, #000 9.5px); mask-image: radial-gradient(circle at right center, transparent 9px, #000 9.5px); }
.olami-settings .cd-ticket-overlay { position: absolute; inset: 0; }
.olami-settings .cd-coin { position: absolute; top: 11px; right: 16px; z-index: 3; background: rgba(0,0,0,.55); color: #FFD700; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 20px; border: 1px solid rgba(255,215,0,.5); }
.olami-settings .cd-ticket-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; }
.olami-settings .cd-ticket-date { font-size: 10px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; opacity: .9; }
.olami-settings .cd-ticket-title { font-size: 24px; font-weight: 900; line-height: 1; text-transform: uppercase; letter-spacing: -.5px; margin: 3px 0; }
.olami-settings .cd-ticket-loc { font-size: 11px; opacity: .9; }
.olami-settings .cd-ticket-opts { margin-top: auto; padding-top: 10px; }
.olami-settings .cd-opt-q { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; opacity: .8; }
.olami-settings .cd-opt-pills { display: flex; gap: 6px; margin-top: 5px; }
.olami-settings .cd-opt-pill { font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 20px; background: rgba(0,0,0,.25); }
.olami-settings .cd-opt-pill.on { background: rgba(255,255,255,.95); color: #111; }
.olami-settings .cd-ticket-stub { width: 48px; flex: 0 0 48px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 10px; border-radius: 0 12px 12px 0;
-webkit-mask-image: radial-gradient(circle at left center, transparent 9px, #000 9.5px); mask-image: radial-gradient(circle at left center, transparent 9px, #000 9.5px); }
.olami-settings .cd-ticket-stub span { writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 2px; }
.olami-settings .cd-progcard { width: 340px; height: 200px; border-radius: 16px; position: relative; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,.35); transition: transform .08s ease-out; }
.olami-settings .cd-pc-texture { position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.6) 0 1px, transparent 1px 9px); }
.olami-settings .cd-pc-shine { position: absolute; inset: 0; background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%); }
.olami-settings .cd-pc-content { position: relative; z-index: 3; padding: 22px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.olami-settings .cd-pc-head { display: flex; justify-content: space-between; align-items: flex-start; }
.olami-settings .cd-pc-kicker { font-size: 9px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; opacity: .7; display: block; }
.olami-settings .cd-pc-title { font-size: 18px; font-weight: 800; line-height: 1.1; margin-top: 2px; }
.olami-settings .cd-pc-badge { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #FFD700, #FDB931); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.olami-settings .cd-pc-meta { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 8px; font-size: 11px; }
.olami-settings .cd-pc-num { font-size: 26px; font-weight: 800; }
.olami-settings .cd-pc-track { height: 6px; background: rgba(255,255,255,.14); border-radius: 3px; overflow: hidden; }
.olami-settings .cd-pc-fill { height: 100%; border-radius: 3px; }
.olami-settings .cd-promo { position: relative; width: 100%; max-width: 640px; border-radius: 16px; padding: 28px 30px; box-shadow: 0 18px 45px rgba(0,0,0,.5); overflow: hidden; }
.olami-settings .cd-promo-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 108%; height: 120%; filter: blur(48px); border-radius: 30px; animation: om-breathe 6s infinite alternate; }
.olami-settings .cd-promo-inner { position: relative; z-index: 1; text-align: center; }
.olami-settings .cd-promo-tag { text-transform: uppercase; letter-spacing: 3px; font-weight: 700; font-size: 12px; margin-bottom: 8px; }
.olami-settings .cd-promo-title { font-size: 40px; font-weight: 800; text-transform: uppercase; margin: 0 0 6px; letter-spacing: -.5px; }
.olami-settings .cd-promo-sub { font-size: 16px; opacity: .85; margin-bottom: 16px; }
.olami-settings .cd-promo-desc { font-size: 13.5px; line-height: 1.5; opacity: .9; margin: 0 auto 18px; max-width: 460px; }
.olami-settings .cd-promo-grid { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); padding: 12px 0; margin-bottom: 18px; }
.olami-settings .cd-promo-grid > div { padding: 0 22px; }
.olami-settings .cd-promo-k { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; opacity: .6; }
.olami-settings .cd-promo-v { font-size: 15px; font-weight: 700; }
.olami-settings .cd-promo-btn { display: inline-block; color: #000; padding: 12px 38px; font-weight: 800; text-transform: uppercase; border-radius: 6px; font-size: 14px; letter-spacing: .5px; }
@keyframes om-breathe { from { opacity: .15; } to { opacity: .45; } }
.olami-settings .cd-bp { width: 300px; max-width: 100%; background: var(--surface); border-radius: 16px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,.3); display: flex; flex-direction: column; }
.olami-settings .cd-bp-hero { position: relative; min-height: 210px; padding: 16px; display: flex; flex-direction: column; }
.olami-settings .cd-bp-hero-ov { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.olami-settings .cd-bp-badge { position: absolute; top: 14px; right: 14px; z-index: 2; color: #1d1d1f; font-size: 9px; font-weight: 800; letter-spacing: 1px; padding: 4px 8px; border-radius: 4px; }
.olami-settings .cd-bp-coin { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(0,0,0,.55); color: #FFD700; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 20px; border: 1px solid rgba(255,215,0,.5); }
.olami-settings .cd-bp-passport { position: relative; z-index: 2; margin-top: 40px; display: flex; flex-direction: column; gap: 8px; }
.olami-settings .cd-bp-field { background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.3); border-radius: 8px; padding: 9px 12px; font-size: 12px; color: rgba(255,255,255,.75); }
.olami-settings .cd-bp-title { position: relative; z-index: 2; margin-top: auto; font-size: 23px; font-weight: 900; line-height: .95; text-transform: uppercase; letter-spacing: -.5px; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.olami-settings .cd-bp-body { background: var(--surface); padding: 14px 16px; position: relative; color: var(--text); }
.olami-settings .cd-bp-body::before { content: ''; position: absolute; top: -1px; left: 10px; right: 10px; border-top: 2px dashed var(--border); }
.olami-settings .cd-bp-meta { display: flex; justify-content: space-between; margin-bottom: 8px; }
.olami-settings .cd-bp-k { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.olami-settings .cd-bp-v { font-size: 14px; font-weight: 800; color: var(--text); }
.olami-settings .cd-bp-desc { font-size: 12px; line-height: 1.45; color: var(--text-secondary); margin-bottom: 10px; }
.olami-settings .cd-bp-opts { display: flex; gap: 6px; margin-bottom: 12px; }
.olami-settings .cd-bp-pill { font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 20px; border: 1.5px solid var(--border); color: var(--text); }
.olami-settings .cd-bp-pill.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.olami-settings .cd-bp-btn { width: 100%; border: none; border-radius: 10px; padding: 13px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #1d1d1f; cursor: default; }
.olami-settings .cd-ticket-photo { background: linear-gradient(115deg, #8a5a3c 0%, #5a3b2e 35%, #2a2a3a 70%, #14161f 100%) !important; background-size: cover !important; background-position: center !important; }
@media (min-width: 1100px) {
.olami-settings > div[x-show] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
.olami-settings > div[x-show] > .om-card { margin-bottom: 0; }
.olami-settings > div[x-show] > .om-card--full { grid-column: 1 / -1; }
.olami-settings > div[x-show].om-fullpanel { grid-template-columns: 1fr; }
}
.om-staff-name--link {
border: 0; background: none; padding: 0; margin: 0; font: inherit; text-align: left;
cursor: pointer; color: inherit; border-bottom: 1px solid transparent; transition: var(--transition);
}
.om-staff-name--link:hover { color: var(--primary); border-bottom-color: currentColor; }
.tm {
--tm-ease: cubic-bezier(.2, .8, .2, 1); --tm-top: 4rem;
--tm-dec: var(--success); --tm-todo: var(--info); --tm-q: var(--warning); --tm-late: var(--danger);
display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 26px; align-items: start; min-width: 0; width: 100%; color: var(--text);
}
@media (min-width: 1024px) { .tm { --tm-top: 64px; } }
.tm *, .tm *::before, .tm *::after { box-sizing: border-box; }
@keyframes tmIn { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .tm *, .tm *::before, .tm *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }
.tm .pp-av { flex: none; }
.tm .pp-av.tm-face { width: 30px; height: 30px; flex-basis: 30px; font-size: 11px; }
.tm .pp-av.tm-face.is-xl { width: 60px; height: 60px; flex-basis: 60px; font-size: 20px; }
.tm-face--none { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--surface-active); color: var(--text-muted); font-weight: 800; font-size: 12px; }
.tm em { font-style: normal; font-weight: 800; color: var(--danger); }
.tm button { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: inherit; }
.tm a { color: inherit; text-decoration: none; }
.tm-btn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 13px; border-radius: var(--radius-full); background: var(--surface-active); font-size: 12.5px; font-weight: 700; color: var(--text); cursor: pointer; white-space: nowrap;
transition: background-color .15s ease, transform .15s ease; }
.tm .tm-btn { background: var(--surface-active); padding: 0 13px; }
.tm .tm-btn:hover, .tm .tm-btn:focus-visible { background: color-mix(in srgb, var(--text) 9%, var(--surface)); }
.tm .tm-btn:active { transform: scale(.97); }
.tm .tm-btn.is-p { background: var(--primary); color: var(--text-inverse); }
.tm .tm-btn.is-p:hover, .tm .tm-btn.is-p:focus-visible { background: color-mix(in srgb, var(--primary) 88%, var(--text)); }
.tm .tm-btn.is-ghost { background: transparent; color: var(--text-secondary); }
.tm .tm-btn.is-copied::after { content: " ✓"; color: var(--success); }
.tm .tm-btn[disabled] { opacity: .5; cursor: default; }
.tm .tm-link { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--primary); cursor: pointer; }
.tm-none { margin: 4px 0; font-size: 13.5px; color: var(--text-muted); }
.tm-dot { display: inline-block; width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; }
.tm-dot.is-dec { background: var(--tm-dec); } .tm-dot.is-todo { background: var(--tm-todo); } .tm-dot.is-q { background: var(--tm-q); }
.tm-dot.is-block { background: var(--tm-late); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tm-late) 20%, transparent); }
.tm-side { position: sticky; top: calc(var(--tm-top) + 12px); max-height: calc(100vh - var(--tm-top) - 24px); overflow-y: auto; padding: 4px 6px 20px 2px; scrollbar-width: thin;
animation: tmIn .35s var(--tm-ease) backwards; }
.tm-side__top { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.tm-side__top b { font-size: 20px; font-weight: 850; letter-spacing: -.02em; }
.tm-side__top .tm-btn { margin-left: auto; }
.tm-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; margin-bottom: 10px; border-radius: var(--radius-full); background: var(--surface); box-shadow: 0 0 0 1px var(--border-light); color: var(--text-muted); font-size: 13px; }
.tm-search:focus-within { box-shadow: 0 0 0 1.5px var(--primary); }
.tm-search input { flex: 1; min-width: 0; align-self: stretch; border: 0; outline: 0; background: transparent; font: inherit; color: var(--text); padding: 0; box-shadow: none; }
.tm-month { margin: 14px 8px 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.tm-nav { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-md); cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease; }
.tm-nav:hover, .tm-nav:focus-visible { background: var(--surface-hover); }
.tm-nav.is-on { background: var(--surface); box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--primary) 30%, var(--border-light)); }
.tm-nav__d { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 40px; height: 42px; flex: 0 0 40px; border-radius: 11px; background: var(--surface-active); line-height: 1; }
.tm-nav__d b { font-size: 15px; font-weight: 850; }
.tm-nav__d small { margin-top: 2px; font-size: 9.5px; font-weight: 800; text-transform: uppercase; color: var(--text-muted); }
.tm-nav.is-on .tm-nav__d b { color: var(--primary); }
.tm-nav__i { display: grid; place-items: center; width: 40px; height: 42px; flex: 0 0 40px; border-radius: 11px; background: var(--primary-soft); font-size: 18px; }
.tm-nav__t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-pill { flex: none; padding: 2px 7px; border-radius: var(--radius-full); font-size: 10.5px; font-weight: 800; font-style: normal; white-space: nowrap; }
.tm-pill.is-late { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.tm-pill.is-draft { background: var(--warning-bg); color: var(--warning-text); }
.tm-main { min-width: 0; transition: opacity .2s ease; }
.tm-main.is-loading { opacity: .5; }
.tm-view { animation: tmIn .3s var(--tm-ease) backwards; }
.tm-oh h1, .tm-mh h1 { margin: 0; font-size: 28px; font-weight: 850; letter-spacing: -.03em; line-height: 1.15; }
.tm-oh p { margin: 4px 0 16px; font-size: 14px; color: var(--text-secondary); }
.tm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.tm-tile { padding: 14px 16px; border-radius: var(--radius-xl); background: color-mix(in srgb, var(--k) 6%, var(--surface)); }
.tm-tile.is-todo { --k: var(--info); } .tm-tile.is-q { --k: var(--warning); } .tm-tile.is-dec { --k: var(--success); }
.tm-tile b { display: block; font-size: 34px; line-height: 1; font-weight: 850; letter-spacing: -.03em; color: color-mix(in srgb, var(--k) 75%, var(--text)); font-variant-numeric: tabular-nums; }
.tm-tile span { display: block; margin-top: 5px; font-size: 14px; font-weight: 750; }
.tm-tile small { display: block; font-size: 12.5px; color: var(--text-secondary); }
.tm-whorow { display: flex; gap: 4px; margin-bottom: 16px; padding: 2px; overflow-x: auto; scrollbar-width: none; }
.tm .tm-who { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 70px; padding: 6px 6px 5px; border-radius: var(--radius-lg); cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); text-align: center; transition: background-color .2s ease; }
.tm .tm-who:hover, .tm .tm-who:focus-visible { background: var(--surface-hover); }
.tm .tm-who.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--primary) 30%, var(--border-light)); }
.tm-who small { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.tm-who small.is-late { color: var(--danger); }
.tm-who__all { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-active); font-size: 15px; }
.tm-ov { animation: tmIn .3s var(--tm-ease) backwards; }
.tm-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tm-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tm-card { padding: 16px 18px; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-xs), 0 0 0 1px var(--border-light); min-width: 0; }
.tm-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14.5px; font-weight: 800; }
.tm-h small { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.tm-group { padding: 8px 0 4px; border-top: 1px solid var(--border-light); }
.tm-h + .tm-group { border-top: 0; }
.tm-group__h { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 13.5px; }
.tm-group__h small { font-size: 12px; color: var(--text-muted); font-weight: 700; }
.tm-hello { display: flex; align-items: center; gap: 16px; margin: 4px 0 16px; }
.tm-hello h2 { margin: 0; font-size: 24px; font-weight: 850; }
.tm-hello p { margin: 2px 0 0; font-size: 14.5px; color: var(--text-secondary); }
.tm-hello p b { color: var(--text); }
.tm-mini { display: flex; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--border-light); font-size: 13.5px; cursor: pointer; }
.tm-mini span { width: 52px; flex: none; color: var(--text-muted); font-weight: 700; font-size: 12.5px; }
.tm-mini:hover, .tm-mini:focus-visible { color: var(--primary); }
.tm-list:not(.is-all) .tm-li.is-extra { display: none; }
.tm-list.is-all .tm-li.is-extra { animation: tmIn .25s var(--tm-ease) backwards; }
.tm .tm-moreb { display: inline-flex; align-items: center; min-height: 36px; font-size: 13px; font-weight: 700; color: var(--primary); cursor: pointer; }
.tm-answered { margin-top: 4px; padding-top: 2px; border-top: 1px dashed var(--border-light); }
.tm-line { position: relative; }
.tm .tm-line__row { display: flex; align-items: center; gap: 10px; width: calc(100% + 16px); min-height: 42px; padding: 6px 8px; margin: 0 -8px; border-radius: var(--radius-md); cursor: pointer; transition: background-color .15s ease; }
.tm .tm-line__row:hover, .tm .tm-line__row:focus-visible { background: var(--surface-hover); }
.tm-line__t { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-line__m { display: flex; align-items: center; gap: 6px; flex: none; }
.tm-line__m .pp-av { width: 22px; height: 22px; flex-basis: 22px; font-size: 9px; }
.tm-name { font-size: 12.5px; font-weight: 650; color: var(--text-secondary); }
.tm-when { font-style: normal; font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.tm-when.is-late { color: var(--danger); font-weight: 800; }
.tm-wait { font-style: normal; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.tm-flag { font-style: normal; padding: 1px 7px; border-radius: var(--radius-full); font-size: 11px; font-weight: 800; background: var(--surface-active); color: var(--text-secondary); }
.tm-flag.is-late { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.tm-flag.is-soon { background: var(--warning-bg); color: var(--warning-text); }
.tm-flag.is-pb { background: var(--primary-soft); }
.tm-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--tm-ease); }
.tm-more > div { overflow: hidden; min-height: 0; padding-left: 19px; }
.tm-line.is-open > .tm-line__row { background: var(--surface-hover); }
.tm-line.is-open > .tm-line__row .tm-line__t { white-space: normal; font-weight: 650; }
.tm-line.is-open > .tm-more { grid-template-rows: 1fr; }
.tm-full { margin: 4px 0 6px; font-size: 14px; line-height: 1.55; }
.tm-why { margin: 0 0 6px; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); white-space: pre-line; }
.tm-from { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 12px; color: var(--text-muted); }
.tm-from a:hover, .tm-from a:focus-visible { color: var(--primary); }
.tm-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.tm-note { font-size: 12.5px; color: var(--text-muted); }
.tm-answer { margin: 0 0 10px; padding: 8px 10px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--success) 7%, var(--surface)); font-size: 13.5px; line-height: 1.55; }
.tm-ans { margin-bottom: 4px; }
.tm-ans textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: 13.5px; resize: vertical; background: var(--surface); color: var(--text); }
.tm-ans textarea:focus { outline: 0; border-color: var(--primary); }
.tm-todo { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 0; }
.tm-todo > .tm-line__row { grid-column: 2; }
.tm .tm-todo > .tm-line__row { width: calc(100% + 8px); margin-left: 0; }
.tm-todo > .tm-more { grid-column: 2; }
.tm-tick { position: relative; align-self: start; margin-top: 12px; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, transform .2s var(--tm-ease); }
.tm .tm-tick { border: 1.6px solid var(--border-hover); }
.tm-tick::before { content: ""; position: absolute; inset: -12px; }
.tm .tm-tick:hover, .tm .tm-tick:focus-visible { border-color: var(--success); transform: scale(1.1); }
.tm .tm-tick.is-off { border-style: dashed; cursor: default; transform: none; }
.tm .tm-todo.is-done .tm-tick { background: var(--success); border-color: var(--success); }
.tm-todo.is-done .tm-tick::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-inverse); font-size: 11px; font-weight: 900; }
.tm-todo.is-done .tm-line__t { color: var(--text-muted); text-decoration: line-through; }
.tm-todo.is-late:not(.is-done) .tm-line__t { color: color-mix(in srgb, var(--danger) 55%, var(--text)); }
.tm-mh { margin-bottom: 14px; }
.tm-kicker { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.tm-sub { margin: 4px 0 0; font-size: 14.5px; color: var(--text-secondary); }
.tm-by { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }
.tm-mh__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.tm-people { display: flex; gap: 6px; flex-wrap: wrap; }
.tm-person { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: var(--radius-full); background: var(--surface-hover); font-size: 12.5px; font-weight: 700; }
.tm-person .pp-av { width: 24px; height: 24px; flex-basis: 24px; font-size: 9.5px; }
.tm-mh__acts { display: flex; gap: 6px; margin-left: auto; }
.tm-publish { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 12px 16px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--warning) 8%, var(--surface)); font-size: 13.5px; }
.tm-publish .tm-btn { margin-left: auto; }
.tm-ed { margin-bottom: 18px; }
.tm-ed__h { margin: 22px 0 10px; }
.tm-ed__who { display: flex; gap: 6px; flex-wrap: wrap; }
.tm-ed__add { margin-bottom: 6px; }
.tm-ed__btns { display: flex; gap: 9px; margin-top: 13px; flex-wrap: wrap; }
@media (max-width: 1150px) {
.tm { grid-template-columns: 250px minmax(0, 1fr); gap: 18px; }
.tm-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
.tm { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tm input, .tm textarea, .tm select { font-size: 16px; }
.tm-side { position: static; max-height: none; overflow: visible; padding: 0; }
.tm-side__top b { font-size: 24px; }
.tm .tm-side__top .tm-btn { height: 42px; padding: 0 16px; }
.tm-search { height: 46px; }
.tm-month { display: none; }
.tm-navs { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px 6px; }
.tm-nav { flex: 0 0 210px; scroll-snap-align: start; min-height: 60px; background: var(--surface); box-shadow: 0 0 0 1px var(--border-light); border-radius: var(--radius-lg); }
.tm-nav__t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tm-tiles { gap: 8px; }
.tm-tile { padding: 12px; }
.tm-tile b { font-size: 28px; }
.tm-tile span { font-size: 13px; }
.tm-tile small { font-size: 11.5px; }
.tm-oh h1, .tm-mh h1 { font-size: 24px; }
.tm-card { padding: 14px 12px; }
.tm .tm-line__row { min-height: 48px; flex-wrap: wrap; row-gap: 2px; }
.tm-line__t { flex: 1 1 100%; white-space: normal; font-size: 14px; }
.tm-line__m { flex: 1 1 100%; }
.tm-tick { margin-top: 15px; width: 20px; height: 20px; }
.tm .tm-btn { height: 44px; padding: 0 16px; font-size: 13.5px; }
.tm-mh__acts { margin-left: 0; width: 100%; }
.tm .tm-mh__acts .tm-btn { flex: 1; justify-content: center; }
.tm .tm-publish .tm-btn { margin-left: 0; width: 100%; justify-content: center; }
.tm .tm-link { display: inline-flex; align-items: center; min-height: 44px; }
.tm-mini { min-height: 44px; align-items: center; }
.tm .tm-who { min-height: 44px; }
.tm .tm-moreb { min-height: 44px; }
.tm-from a { display: inline-flex; align-items: center; min-height: 40px; }
.tm-ed__btns .sm-btn { flex: 1; justify-content: center; min-height: 44px; }
.tm-main { padding-bottom: 24px; }
}
.ed-draft {
background: var(--surface); border: 1px solid var(--border-light);
border-radius: var(--radius-md); padding: 13px 15px; margin-bottom: 8px;
box-shadow: var(--shadow-xs);
}
.ed-draft--new { border-left: 3px solid var(--info); }
.ed-draft--kept { border-left: 3px solid var(--success); }
.ed-draft__a { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 9px; }
.ed-mini {
display: inline-flex; align-items: center; gap: 5px; font: inherit;
font-size: 11px; font-weight: 750; padding: 4px 10px; border-radius: var(--radius-full);
background: var(--surface-active); color: var(--text-secondary);
border: 1px solid var(--border-light); cursor: pointer;
}
.ed-mini--on { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.ed-mini--ghost { background: transparent; border-style: dashed; color: var(--text-muted); }
.ed-pub {
background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
border-radius: var(--radius-lg); padding: 16px 19px; margin-top: 6px;
}
.ed-pub__t { font-size: 13px; font-weight: 850; color: var(--text); margin: 0 0 9px; }
.ed-pub ul { margin: 0; padding-left: 19px; }
.ed-pub li { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); line-height: 1.75; }
.ed-pub li b { color: var(--text); font-weight: 800; }
@media (max-width: 760px) {
.ed-mini { min-height: 40px; padding: 6px 14px; font-size: 12.5px; }
}
.tt-page { --tt-ease: cubic-bezier(.2, .8, .2, 1); --tt-top: 4rem; --sm-glow: 0 8px 22px -6px color-mix(in srgb, var(--primary) 48%, transparent); color: var(--text); }
@media (min-width: 1024px) { .tt-page { --tt-top: 52px; } }
.tt-page *, .tt-page *::before, .tt-page *::after { box-sizing: border-box; }
@keyframes ttIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes ttPop { from { opacity: 0; transform: scale(.94); } }
@keyframes ttGrow { from { transform: scaleX(0); } }
@keyframes ttDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .tt-page *, .tt-page *::before, .tt-page *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }
.tt-page .sm-ph { animation: ttIn .35s var(--tt-ease) backwards; }
.tt-page button { font: inherit; color: inherit; }
.tt-head-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tt-search, .tt-new { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 12px; border: 1px solid var(--border-light); border-radius: var(--radius-full);
background: var(--surface); color: var(--text-muted); font-size: 13.5px; transition: border-color .2s ease, box-shadow .2s ease; }
.tt-search { min-width: 240px; padding-right: 12px; }
.tt-new { min-width: 320px; }
.tt-search input, .tt-new input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--text); box-shadow: none; padding: 0; }
.tt-search:focus-within, .tt-new:focus-within { border-color: color-mix(in srgb, var(--primary) 45%, var(--border-light)); box-shadow: 0 0 0 4px var(--primary-soft); }
.tt-new .sm-btn { height: 28px; padding: 0 12px; }
.tt-scope { display: none; }
.tt-fixbar { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--success) 25%, var(--border-light));
border-radius: var(--radius-lg); background: color-mix(in srgb, var(--success) 5%, var(--surface)); animation: ttIn .4s var(--tt-ease) .05s backwards; }
.tt-fixbar > span { font-size: 20px; }
.tt-fixbar p { flex: 1; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.tt-fixbar p b { color: var(--text); }
.tt-pulse { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 16px 0 14px; }
.tt-tile { position: relative; display: block; padding: 12px 14px 11px; text-align: left; cursor: pointer;
border: 1px solid color-mix(in srgb, var(--tile, var(--text-muted)) 20%, var(--border-light)); border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--tile, var(--text-muted)) 5%, var(--surface)); animation: ttIn .4s var(--tt-ease) backwards;
transition: transform .2s var(--tt-ease), box-shadow .2s ease, border-color .2s ease; }
.tt-tile:nth-child(2) { animation-delay: 40ms; } .tt-tile:nth-child(3) { animation-delay: 80ms; } .tt-tile:nth-child(4) { animation-delay: 120ms; }
.tt-tile:nth-child(5) { animation-delay: 160ms; } .tt-tile:nth-child(6) { animation-delay: 200ms; }
.tt-tile:hover, .tt-tile:active, .tt-tile:focus-visible, .tt-tile.is-on { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--tile, var(--text-muted)) 45%, var(--border-light)); }
.tt-tile b { display: block; font-size: 26px; line-height: 1.05; font-weight: 850; letter-spacing: -.02em; color: color-mix(in srgb, var(--tile, var(--text)) 85%, var(--text)); font-variant-numeric: tabular-nums; }
.tt-tile span { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.tt-tile small { display: block; margin-top: 1px; font-size: 11px; color: var(--text-muted); }
.tt-tile i { position: absolute; top: 11px; right: 12px; font-style: normal; font-size: 15px; opacity: .8; }
.tt-bar { position: sticky; top: var(--tt-top); z-index: 3; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 8px 0; margin-bottom: 10px;
background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); }
.tt-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.tt-filter { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border: 1px solid var(--border-light); border-radius: var(--radius-full); background: var(--surface);
font-size: 12.5px; color: var(--text-secondary); cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease; white-space: nowrap; }
.tt-filter:hover, .tt-filter:active, .tt-filter:focus-visible { border-color: var(--border-hover); color: var(--text); }
.tt-filter.is-on { border-color: color-mix(in srgb, var(--primary) 35%, var(--border-light)); background: var(--primary-soft); color: var(--primary); font-weight: 700; }
select.tt-filter { padding-right: 28px; }
.tt-view { animation: ttIn .3s var(--tt-ease) backwards; }
.tt-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.tt-person { padding: 14px 14px 10px; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs);
animation: ttIn .45s var(--tt-ease) backwards; transition: box-shadow .25s ease; }
.tt-person:nth-child(n+2) { animation-delay: 60ms; } .tt-person:nth-child(n+4) { animation-delay: 120ms; } .tt-person:nth-child(n+6) { animation-delay: 180ms; }
.tt-person:hover { box-shadow: var(--shadow-md); }
.tt-person__h { display: flex; align-items: center; gap: 10px; }
.tt-person__h b { display: block; font-size: 14.5px; font-weight: 800; }
.tt-person__h small { display: block; font-size: 11.5px; color: var(--text-muted); }
.tt-person__n { margin-left: auto; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.tt-person__n b { font-size: 20px; font-weight: 850; color: var(--text); font-variant-numeric: tabular-nums; }
.tt-person__stats { display: flex; gap: 5px; flex-wrap: wrap; margin: 10px 0 8px; }
.tt-page .pp-av.is-lg { width: 34px; height: 34px; flex: 0 0 34px; font-size: 12.5px; }
.tt-load { display: flex; height: 5px; border-radius: var(--radius-full); overflow: hidden; background: var(--surface-active); margin-bottom: 6px; }
.tt-load i { width: var(--w); transform-origin: left; animation: ttGrow .7s var(--tt-ease) .25s backwards; }
.tt-load .is-late { background: var(--danger); } .tt-load .is-soon { background: var(--warning); }
.tt-load .is-later { background: color-mix(in srgb, var(--info) 70%, var(--surface)); } .tt-load .is-none { background: var(--border); }
.tt-person--nobody { border-color: color-mix(in srgb, var(--danger) 26%, var(--border-light)); background: color-mix(in srgb, var(--danger) 4%, var(--surface)); }
.tt-person--queue { border-color: color-mix(in srgb, var(--info) 26%, var(--border-light)); background: color-mix(in srgb, var(--info) 4%, var(--surface)); }
.tt-badge { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; font-weight: 900; font-size: 15px; }
.tt-badge.is-nobody { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: color-mix(in srgb, var(--danger) 85%, var(--text)); animation: ttDrift 2.6s ease-in-out infinite; }
.tt-badge.is-queue { background: color-mix(in srgb, var(--info) 14%, var(--surface)); }
.tt-badge.is-smart { background: color-mix(in srgb, var(--hq-net) 14%, var(--surface)); }
.tt-badge.is-sm { width: 22px; height: 22px; flex-basis: 22px; font-size: 11px; animation: none; }
.tt-list { display: flex; flex-direction: column; }
.tt-row { position: relative; border-top: 1px solid var(--border-light); animation: ttIn .3s var(--tt-ease) backwards; }
.tt-list > .tt-row:first-child, .tt-col__body > .tt-row:first-child { border-top: 0; }
.tt-row__main { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 6px 2px; }
.tt-tick { position: relative; width: 18px; height: 18px; flex: 0 0 18px; padding: 0; border-radius: 50%; border: 1.6px solid var(--border-hover); background: transparent; cursor: pointer;
transition: background-color .2s ease, border-color .2s ease, transform .2s var(--tt-ease); }
.tt-tick::before { content: ""; position: absolute; inset: -13px; }
.tt-tick:hover, .tt-tick:active, .tt-tick:focus-visible { border-color: var(--success); transform: scale(1.1); }
.tt-tick.is-done { background: var(--success); border-color: var(--success); }
.tt-tick.is-done::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-inverse); font-size: 11px; font-weight: 900; animation: ttPop .25s var(--tt-ease); }
.tt-tick.is-icon { display: grid; place-items: center; border: 0; font-size: 12px; color: var(--info); cursor: default; transform: none; }
.tt-title { flex: 1; min-width: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.tt-title__t { display: block; font-size: 13px; font-weight: 650; line-height: 1.35; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s ease; }
.tt-title:hover .tt-title__t, .tt-title:active .tt-title__t, .tt-title:focus-visible .tt-title__t { color: var(--primary); }
.tt-row.is-late .tt-title__t { color: color-mix(in srgb, var(--danger) 55%, var(--text)); }
.tt-row.is-done .tt-title__t { color: var(--text-muted); text-decoration: line-through; }
.tt-row.is-open > .tt-row__main { background: var(--surface-hover); border-radius: var(--radius) var(--radius) 0 0; }
.tt-row__meta { display: flex; align-items: center; gap: 5px; flex: none; }
.tt-src { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--text-muted); }
.tt-src span { display: none; }
.tt-lines { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.tt-flag { font-size: 11px; font-weight: 800; color: color-mix(in srgb, var(--danger) 80%, var(--text)); }
.tt-stack { display: inline-flex; align-items: center; }
.tt-stack .pp-av { box-shadow: 0 0 0 2px var(--surface); }
.tt-stack .pp-av + .pp-av { margin-left: -6px; }
.tt-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 9px; border-radius: var(--radius-full); background: var(--surface-active);
font-size: 11.5px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.tt-chip.is-late { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: color-mix(in srgb, var(--danger) 80%, var(--text)); }
.tt-chip.is-soon { background: var(--warning-bg); color: var(--warning-text); }
.tt-chip.is-ok { background: var(--success-bg); color: var(--success-text, var(--success)); }
.tt-chip.is-info { background: var(--info-bg); color: var(--info-text, var(--info)); }
.tt-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border-light); border-radius: var(--radius-full); background: var(--surface);
font-size: 12.5px; font-weight: 750; color: var(--text); cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .15s ease, background-color .2s ease, border-color .2s ease; }
.tt-btn:hover, .tt-btn:active, .tt-btn:focus-visible { border-color: var(--border-hover); background: var(--surface-hover); }
.tt-btn:active { transform: scale(.97); }
.tt-btn.is-p { border-color: transparent; background: var(--primary); color: var(--text-inverse); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--primary) 60%, transparent); }
.tt-btn.is-p:hover, .tt-btn.is-p:focus-visible { background: color-mix(in srgb, var(--primary) 88%, var(--text)); }
.tt-btn.is-ghost { border-color: transparent; background: transparent; color: var(--text-secondary); }
.tt-btn.is-sm { height: 26px; padding: 0 9px; font-size: 11.5px; }
.tt-more { display: block; width: 100%; padding: 8px 2px 2px; border: 0; background: none; text-align: left; font-size: 12px; font-weight: 750; color: var(--primary); cursor: pointer; }
.tt-give { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 10px; border-radius: var(--radius); background: var(--surface-hover); color: var(--text-muted); }
.tt-give input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0; background: transparent; box-shadow: none; font: inherit; font-size: 12.5px; color: var(--text); }
.tt-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 40px 20px; text-align: center; color: var(--text-secondary); }
.tt-empty > span { font-size: 30px; animation: ttDrift 3s ease-in-out infinite; }
.tt-empty p { margin: 0; font-size: 13px; }
.tt-ed { margin-bottom: 6px; border-radius: 0 0 var(--radius) var(--radius); background: var(--surface-hover); animation: ttIn .28s var(--tt-ease) backwards; }
.tt-ed__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; padding: 10px 10px 4px; }
.tt-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tt-f--wide { grid-column: 1 / -1; }
.tt-f > span { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.tt-f input[type="text"], .tt-f input[type="date"], .tt-f textarea, .tt-f select, .tt-why { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius);
background: var(--surface); font: inherit; font-size: 13px; color: var(--text); resize: vertical; }
.tt-why { margin-top: 6px; font-size: 12.5px; }
.tt-why.is-said { margin: 6px 0 0; border: 0; background: color-mix(in srgb, var(--danger) 8%, var(--surface)); color: color-mix(in srgb, var(--danger) 75%, var(--text)); }
.tt-seg { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: var(--radius); background: var(--surface-active); }
.tt-seg button { padding: 5px 10px; border: 0; border-radius: 6px; background: none; font-size: 12px; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.tt-seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.tt-seg--st button[data-st="doing"].on { color: var(--warning-text); } .tt-seg--st button[data-st="cant"].on { color: var(--danger); } .tt-seg--st button[data-st="done"].on { color: var(--success); }
.tt-cl { margin: 0; padding: 0; list-style: none; }
.tt-cl button { padding: 3px 0; border: 0; background: none; text-align: left; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; }
.tt-cl button.is-done { color: var(--text-muted); text-decoration: line-through; }
.tt-ed__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px 10px; font-size: 12px; color: var(--text-muted); }
.tt-ed__foot a { color: var(--primary); font-weight: 700; }
.tt-ed__btns { display: flex; gap: 6px; margin-left: auto; }
.tt-smart { margin-top: 8px; padding: 8px 10px 4px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--hq-net) 5%, var(--surface)); border: 1px solid color-mix(in srgb, var(--hq-net) 16%, var(--border-light)); }
.tt-smart__h { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; font-size: 12.5px; }
.tt-smart__h small { color: var(--text-muted); }
.tt-srow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid color-mix(in srgb, var(--hq-net) 12%, var(--border-light)); animation: ttIn .3s var(--tt-ease) backwards; }
.tt-smart__h + .tt-srow { border-top: 0; }
.tt-srow.is-snoozed { opacity: .6; }
.tt-srow__i { font-size: 15px; }
.tt-srow__b { flex: 1; min-width: 0; }
.tt-srow__b b { display: block; font-size: 12.5px; font-weight: 650; line-height: 1.35; }
.tt-srow__b small { display: block; font-size: 11.5px; color: var(--text-muted); }
.tt-srow__acts { display: flex; gap: 2px; }
.tt-ic { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; font-size: 13px; cursor: pointer; color: var(--text-secondary); transition: background-color .15s ease, transform .15s ease; }
.tt-ic:hover, .tt-ic:active, .tt-ic:focus-visible { background: var(--surface); transform: scale(1.08); }
.tt-ic.is-done { color: var(--success); font-weight: 900; }
.tt-ic.is-danger:hover, .tt-ic.is-danger:active { color: var(--danger); }
.tt-pass { flex: 1 1 100%; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 4px 0 2px 26px; font-size: 12px; color: var(--text-muted); animation: ttIn .2s var(--tt-ease) backwards; }
.tt-pass__p { padding: 3px 10px; border: 1px solid var(--border-light); border-radius: var(--radius-full); background: var(--surface); font-size: 12px; font-weight: 700; color: var(--text); cursor: pointer; }
.tt-pass__p:hover, .tt-pass__p:active, .tt-pass__p:focus-visible { border-color: var(--hq-net); color: var(--hq-net); }
.tt-smarttools { margin-bottom: 14px; padding: 12px 14px; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--hq-net) 22%, var(--border-light)); background: color-mix(in srgb, var(--hq-net) 5%, var(--surface)); animation: ttIn .3s var(--tt-ease) backwards; }
.tt-smarttools__h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tt-smarttools__h b { display: block; font-size: 14px; } .tt-smarttools__h small { display: block; font-size: 12px; color: var(--text-secondary); }
.tt-smarttools__h > div { flex: 1 1 260px; }
.tt-smarttools__a { display: flex; gap: 6px; flex-wrap: wrap; }
.tt-push { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--hq-net) 16%, var(--border-light)); animation: ttIn .25s var(--tt-ease) backwards; }
.tt-push__btns { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 6px; }
.tt-err { font-style: normal; font-size: 11.5px; color: var(--danger); }
.tt-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; }
.tt-col { padding: 8px 10px; border-radius: var(--radius-lg); background: var(--surface-active); animation: ttIn .4s var(--tt-ease) backwards; }
.tt-col:nth-child(2) { animation-delay: 60ms; } .tt-col:nth-child(3) { animation-delay: 120ms; } .tt-col:nth-child(4) { animation-delay: 180ms; } .tt-col:nth-child(5) { animation-delay: 240ms; }
.tt-col > header { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 8px; font-size: 13px; }
.tt-col > header span { font-weight: 800; color: var(--text-muted); }
.tt-col--late > header b { color: color-mix(in srgb, var(--danger) 85%, var(--text)); }
.tt-col--done > header b { color: var(--success); }
.tt-col__body { padding: 2px 8px; border-radius: var(--radius-md); background: var(--surface); }
.tt-col .tt-title__t { white-space: normal; }
.tt-col .tt-row__main { flex-wrap: wrap; }
.tt-col .tt-row__meta { flex: 1 1 100%; padding-left: 27px; flex-wrap: wrap; }
.tt-col__more { margin: 6px 2px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.tt-table { position: relative; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--surface); }
.tt-thead, .tt-tr { display: grid; grid-template-columns: 34px minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1.3fr) 120px 80px 120px; align-items: center; gap: 10px; padding: 0 14px; }
.tt-thead { height: 38px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--surface-hover); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.tt-tgroup { display: flex; align-items: baseline; gap: 8px; padding: 14px 14px 6px; font-size: 13px; }
.tt-tgroup small { color: var(--text-muted); font-weight: 700; }
.tt-tr { min-height: 40px; border-top: 1px solid var(--border-light); font-size: 13px; cursor: pointer; transition: background-color .15s ease; }
.tt-tr:hover { background: var(--surface-hover); }
.tt-tr.is-picked { background: var(--primary-soft); }
.tt-tr > span { min-width: 0; display: flex; align-items: center; gap: 6px; }
.tt-tr em { font-style: normal; font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-tr__t, .tt-tr__s { display: block !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-tr__t { font-weight: 600; } .tt-tr__s, .tt-tr__p { font-size: 12px; color: var(--text-muted); }
.tt-sel { width: 16px; height: 16px; accent-color: var(--primary); }
.tt-bulk { position: sticky; bottom: 14px; z-index: 4; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: max-content; max-width: calc(100% - 28px); margin: 10px auto 14px; padding: 8px 10px 8px 16px;
border-radius: var(--radius-full); background: var(--text); color: var(--surface); box-shadow: var(--shadow-xl); animation: ttIn .3s var(--tt-ease) backwards; }
.tt-bulk b { font-size: 12.5px; margin-right: 4px; }
.tt-bulk .tt-btn { border-color: transparent; background: color-mix(in srgb, var(--surface) 14%, transparent); color: var(--surface); }
.tt-bulk select, .tt-bulk input { height: 26px; padding: 0 8px; border: 0; border-radius: var(--radius-full); background: color-mix(in srgb, var(--surface) 92%, transparent); font: inherit; font-size: 12px; color: var(--text); }
.tt-wk { overflow-x: auto; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--surface); }
.tt-wk__h, .tt-wk__r { display: grid; grid-template-columns: 150px repeat(9, minmax(96px, 1fr)); min-width: 1040px; }
.tt-wk__h > span { padding: 10px 8px; font-size: 11.5px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.tt-wk__h .is-today { color: var(--primary); } .tt-wk__h .is-late { color: color-mix(in srgb, var(--danger) 85%, var(--text)); }
.tt-wk__r { border-top: 1px solid var(--border-light); animation: ttIn .35s var(--tt-ease) backwards; }
.tt-wk__p { display: flex; align-items: center; gap: 8px; padding: 8px; font-size: 13px; }
.tt-wk__c { display: flex; flex-direction: column; gap: 3px; padding: 6px 4px; border-left: 1px solid var(--border-light); }
.tt-wk__c.is-empty { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--surface-active) 60%, transparent) 6px 7px); }
.tt-wk__t { display: block; width: 100%; padding: 3px 6px; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--info) 10%, var(--surface)); text-align: left; font-size: 11px; font-weight: 600;
line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.tt-wk__t.is-late { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: color-mix(in srgb, var(--danger) 75%, var(--text)); }
.tt-wk__more { padding-left: 4px; font-size: 11px; font-weight: 800; color: var(--text-muted); }
.tt-wk__open { margin-bottom: 12px; padding: 4px 12px; border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border-light)); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); }
.tt-agenda { display: none; }
@media (max-width: 1100px) {
.tt-pulse { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tt-board { grid-template-columns: repeat(5, 280px); overflow-x: auto; padding-bottom: 6px; }
}
@media (max-width: 760px) {
.tt-page { -webkit-tap-highlight-color: transparent; }
.tt-page input, .tt-page textarea, .tt-page select { font-size: 16px !important; }
.tt-scope { display: flex; gap: 3px; padding: 4px; margin-bottom: 12px; border-radius: var(--radius-lg); background: var(--surface-active); }
.tt-scope > * { flex: 1; display: grid; place-items: center; height: 40px; border-radius: var(--radius-md); font-size: 14px; font-weight: 750; color: var(--text-secondary); text-decoration: none; }
.tt-scope .on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
.tt-page .sm-ph__t { font-size: 27px; }
.tt-head-tools { width: 100%; }
.tt-search, .tt-new { flex: 1 1 100%; min-width: 0; height: 46px; }
.tt-new { height: 52px; }
.tt-new .sm-btn { height: 42px; padding: 0 18px; }
.tt-fixbar { flex-wrap: wrap; border-radius: var(--radius-xl); }
.tt-pulse { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
.tt-tile { min-height: 96px; scroll-snap-align: start; }
.tt-bar { margin: 0 -14px 10px; padding: 8px 14px; }
.tt-views { width: 100%; }
.tt-views .thrive-tab { flex: 1; justify-content: center; padding: 9px 6px; min-height: 44px; font-size: 13px; }
.tt-filters { margin-left: 0; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tt-filter { flex: none; height: 40px; padding: 0 14px; }
.tt-people { grid-template-columns: minmax(0, 1fr); }
.tt-person { padding: 14px 12px 10px; border-radius: var(--radius-xl); }
.tt-row__main { flex-wrap: wrap; align-items: flex-start; gap: 4px 12px; min-height: 52px; padding: 12px 2px; }
.tt-tick { margin-top: 1px; width: 20px; height: 20px; flex-basis: 20px; }
.tt-title { flex: 1 1 calc(100% - 40px); padding: 12px 0; margin: -12px 0; }
.tt-title__t { font-size: 14.5px; line-height: 1.4; white-space: normal; }
.tt-row__meta { flex: 1 1 100%; padding-left: 32px; flex-wrap: wrap; }
.tt-src span { display: inline; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-btn { min-height: 44px; padding: 0 16px; font-size: 13.5px; }
.tt-btn.is-sm { min-height: 40px; padding: 0 13px; font-size: 13px; }
.tt-more { min-height: 44px; display: flex; align-items: center; font-size: 13.5px; }
.tt-give { min-height: 48px; padding: 0 12px; }
.tt-ed__grid { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 12px; }
.tt-seg { display: flex; } .tt-seg button { flex: 1; padding: 10px 6px; font-size: 13px; }
.tt-ed__foot { padding: 10px 12px 12px; } .tt-ed__from { flex: 1 1 100%; }
.tt-ed__btns { width: 100%; margin-left: 0; flex-wrap: wrap; } .tt-ed__btns .tt-btn { flex: 1; justify-content: center; }
.tt-ic { width: 40px; height: 40px; font-size: 15px; }
.tt-srow__acts { flex: 1 1 100%; justify-content: flex-end; }
.tt-pass__p { min-height: 40px; padding: 0 14px; font-size: 13px; }
.tt-smarttools__a { width: 100%; } .tt-smarttools__a .tt-btn { flex: 1; justify-content: center; }
.tt-push { grid-template-columns: minmax(0, 1fr); }
.tt-board { grid-template-columns: repeat(5, 84%); scroll-snap-type: x mandatory; margin: 0 -14px; padding: 0 14px 8px; }
.tt-col { scroll-snap-align: center; }
.tt-thead { display: none; }
.tt-tr { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "c t t" "c w d"; padding: 10px 12px; row-gap: 4px; min-height: 56px; }
.tt-tr > :nth-child(1) { grid-area: c; } .tt-tr > :nth-child(2) { grid-area: t; } .tt-tr > :nth-child(3) { grid-area: w; } .tt-tr > :nth-child(5) { grid-area: d; justify-content: flex-end; }
.tt-tr > :nth-child(4), .tt-tr > :nth-child(6), .tt-tr > :nth-child(7) { display: none !important; }
.tt-tr__t { white-space: normal; }
.tt-sel { width: 22px; height: 22px; }
.tt-bulk { position: fixed; left: 10px; right: 10px; bottom: calc(10px + var(--omm-zone-nav, 0px)); z-index: var(--z-dropdown); width: auto; max-width: none; margin: 0;
border-radius: var(--radius-xl); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tt-bulk > * { flex: none; }
.tt-wk { display: none; }
.tt-agenda { display: block; }
.tt-ag { margin-bottom: 12px; padding: 12px 12px 6px; border: 1px solid var(--border-light); border-radius: var(--radius-xl); background: var(--surface); animation: ttIn .35s var(--tt-ease) backwards; }
.tt-ag h4 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-size: 14px; font-weight: 850; }
.tt-ag h4 small { font-size: 12px; color: var(--text-muted); }
.tt-ag.is-late h4 { color: color-mix(in srgb, var(--danger) 85%, var(--text)); }
.tt-ag.is-today { border-color: color-mix(in srgb, var(--primary) 35%, var(--border-light)); background: color-mix(in srgb, var(--primary) 3%, var(--surface)); }
}
.pbx-page { --pbx-ease: cubic-bezier(.2, .8, .2, 1); --pbx-top: 4rem; --sm-glow: 0 8px 22px -6px color-mix(in srgb, var(--primary) 48%, transparent); color: var(--text); }
@media (min-width: 1024px) { .pbx-page { --pbx-top: 64px; } }
.pbx-page *, .pbx-page *::before, .pbx-page *::after { box-sizing: border-box; }
@keyframes pbxIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes pbxDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .pbx-page *, .pbx-page *::before, .pbx-page *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }
.pbx-page .sm-ph { animation: pbxIn .35s var(--pbx-ease) backwards; }
.pbx-page button { font: inherit; }
.pbx-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border-light); border-radius: var(--radius-full); background: var(--surface);
font-size: 12.5px; font-weight: 750; color: var(--text); cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .15s ease, background-color .2s ease, border-color .2s ease; }
.pbx-btn:hover, .pbx-btn:active, .pbx-btn:focus-visible { border-color: var(--border-hover); background: var(--surface-hover); }
.pbx-btn:active { transform: scale(.97); }
.pbx-btn.is-p { border-color: transparent; background: var(--primary); color: var(--text-inverse); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--primary) 60%, transparent); }
.pbx-btn.is-p:hover, .pbx-btn.is-p:focus-visible { background: color-mix(in srgb, var(--primary) 88%, var(--text)); }
.pbx-btn.is-ghost { border-color: transparent; background: transparent; color: var(--text-secondary); }
.pbx-btn.is-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.pbx-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 10px; border-radius: var(--radius-full); background: var(--surface-active);
font-size: 11.5px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.pbx-chip.is-link { background: var(--primary-soft); color: var(--primary); }
.pbx-chip.is-link:hover, .pbx-chip.is-link:active, .pbx-chip.is-link:focus-visible { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); }
.pbx-chip.is-draft { background: var(--warning-bg); color: var(--warning-text); }
.pbx-chip.is-soon { background: var(--warning-bg); color: var(--warning-text); }
.pbx-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pbx-search { position: relative; }
.pbx-search__box { display: flex; align-items: center; gap: 8px; width: 340px; max-width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--border-light); border-radius: var(--radius-full);
background: var(--surface); color: var(--text-muted); font-size: 13.5px; transition: border-color .2s ease, box-shadow .2s ease; }
.pbx-search__box:focus-within { border-color: color-mix(in srgb, var(--primary) 45%, var(--border-light)); box-shadow: 0 0 0 4px var(--primary-soft); }
.pbx-search__box input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none; font: inherit; color: var(--text); }
.pbx-sr { position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--z-dropdown); width: 440px; max-width: calc(100vw - 32px); padding: 8px; border: 1px solid var(--border-light);
border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-lg); animation: pbxIn .2s var(--pbx-ease) backwards; }
.pbx-sr > small { display: block; padding: 4px 8px 6px; font-size: 11.5px; color: var(--text-muted); }
.pbx-sr__r { display: grid; grid-template-columns: 24px 1fr; gap: 0 8px; width: 100%; padding: 8px; border: 0; border-radius: var(--radius); background: none; text-align: left; cursor: pointer; }
.pbx-sr__r:hover, .pbx-sr__r:focus-visible { background: var(--surface-hover); }
.pbx-sr__r i { grid-row: span 2; font-style: normal; } .pbx-sr__r b { font-size: 13px; color: var(--text); } .pbx-sr__r small { font-size: 11.5px; color: var(--text-muted); }
.pbx-tray { display: flex; align-items: center; gap: 12px; margin: 16px 0 18px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border-light)); border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--warning) 6%, var(--surface)); animation: pbxIn .4s var(--pbx-ease) .08s backwards; }
.pbx-tray__i { font-size: 22px; animation: pbxDrift 2.8s ease-in-out infinite; }
.pbx-tray b { font-size: 13.5px; } .pbx-tray p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.pbx-tray__go { margin-left: auto; }
.pbx-a { display: grid; grid-template-columns: 236px minmax(0, 1fr) 210px; gap: 28px; align-items: start; margin-top: 18px; }
.pbx-chapters { position: sticky; top: var(--pbx-top); display: flex; flex-direction: column; gap: 2px; }
.pbx-chapters hr { width: 100%; margin: 10px 0; border: 0; border-top: 1px solid var(--border-light); }
.pbx-ch { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-md); background: none; text-align: left; cursor: pointer;
transition: background-color .2s ease, transform .2s var(--pbx-ease); }
.pbx-ch:hover, .pbx-ch:active, .pbx-ch:focus-visible { background: var(--surface-hover); transform: translateX(2px); }
.pbx-ch.is-on { background: color-mix(in srgb, var(--tc, var(--text-muted)) 10%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc, var(--text-muted)) 30%, transparent); }
.pbx-ch__i { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; background: color-mix(in srgb, var(--tc, var(--text-muted)) 14%, var(--surface)); font-size: 15px; }
.pbx-ch b { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--text); }
.pbx-ch small { font-size: 12px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pbx-ch.is-meta b { font-weight: 600; color: var(--text-secondary); }
.pbx-ch.is-draft small { padding: 0 7px; border-radius: var(--radius-full); background: var(--warning-bg); color: var(--warning-text); }
.pbx-read { max-width: 780px; min-width: 0; animation: pbxIn .35s var(--pbx-ease) backwards; }
.pbx-cover { display: flex; align-items: center; gap: 18px; padding: 22px 24px; margin-bottom: 8px; border-radius: var(--radius-xl);
background: linear-gradient(135deg, color-mix(in srgb, var(--tc, var(--text-muted)) 11%, var(--surface)), color-mix(in srgb, var(--tc, var(--text-muted)) 3%, var(--surface)));
border: 1px solid color-mix(in srgb, var(--tc, var(--text-muted)) 18%, var(--border-light)); }
.pbx-cover__i { display: grid; place-items: center; width: 64px; height: 64px; flex: 0 0 64px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-md); font-size: 32px; animation: pbxDrift 3.2s ease-in-out infinite; }
.pbx-cover small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--tc, var(--text-muted)) 70%, var(--text)); }
.pbx-cover h2 { margin: 2px 0; font-size: 28px; font-weight: 850; letter-spacing: -.03em; }
.pbx-cover p { margin: 0; font-size: 13px; color: var(--text-secondary); }
.pbx-rule { position: relative; border-bottom: 1px solid var(--border-light); scroll-margin-top: calc(var(--pbx-top) + 12px); animation: pbxIn .4s var(--pbx-ease) backwards; }
.pbx-rule:nth-of-type(2) { animation-delay: 40ms; } .pbx-rule:nth-of-type(3) { animation-delay: 80ms; } .pbx-rule:nth-of-type(n+4) { animation-delay: 120ms; }
.pbx-rule:target .pbx-rule__view { background: color-mix(in srgb, var(--primary) 5%, transparent); border-radius: var(--radius-md); }
.pbx-rule__view { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px; padding: 22px 6px 20px 0; transition: background-color .6s ease; }
.pbx-rule__n { padding-top: 3px; font-size: 12px; font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pbx-rule__t { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 800; color: var(--text-muted); }
.pbx-rule h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.38; font-weight: 800; letter-spacing: -.01em; }
.pbx-rule.is-draft h3 { color: var(--text-secondary); }
.pbx-prose { font-size: 14.5px; line-height: 1.7; color: var(--text-secondary); }
.pbx-prose p { margin: 0 0 8px; }
.pbx-prose ul, .pbx-prose ol { margin: 0 0 8px; padding-left: 20px; }
.pbx-prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.pbx-prose a { color: var(--primary); }
.pbx-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 10px; }
.pbx-link { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--surface-hover); text-decoration: none; color: var(--text);
transition: border-color .2s ease, transform .2s var(--pbx-ease); }
.pbx-link:hover, .pbx-link:active, .pbx-link:focus-visible { border-color: color-mix(in srgb, var(--primary) 40%, var(--border-light)); transform: translateY(-1px); }
.pbx-link b { font-size: 13px; } .pbx-link small { font-size: 11.5px; color: var(--text-muted); }
.pbx-rule__f { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.pbx-owner { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.pbx-rule__acts { display: inline-flex; gap: 2px; margin-left: auto; opacity: .55; transition: opacity .2s ease; }
.pbx-rule:hover .pbx-rule__acts, .pbx-rule__acts:focus-within { opacity: 1; }
@media (hover: none) { .pbx-rule__acts { opacity: 1; } }
.pbx-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 20px; text-align: center; color: var(--text-secondary); }
.pbx-empty > span:first-child { font-size: 34px; animation: pbxDrift 3s ease-in-out infinite; }
.pbx-empty p { max-width: 380px; margin: 0 0 6px; font-size: 13px; }
.pbx-rule.is-editing, .pbx-rule:has(.pbx-ed) { border-bottom: 0; }
.pbx-ed { display: grid; gap: 12px; margin: 12px 0 16px; padding: 18px; border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border-light)); border-radius: var(--radius-lg);
background: var(--surface); box-shadow: var(--shadow-md); animation: pbxIn .3s var(--pbx-ease) backwards; }
.pbx-ed .np-field { margin: 0; }
.pbx-ed__head { font-size: 13px; color: var(--text-secondary); } .pbx-ed__head b { color: var(--text); }
.pbx-ed__media, .pbx-ed__surfaces, .pbx-ed__prov { display: flex; gap: 6px; flex-wrap: wrap; }
.pbx-ed__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.pbx-ed__link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 6px; margin-bottom: 6px; }
.pbx-ed__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.pbx-ed__btns { display: flex; gap: 6px; margin-left: auto; }
.pbx-side { position: sticky; top: var(--pbx-top); }
.pbx-toc small { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.pbx-toc a { display: block; padding: 5px 0 5px 12px; border-left: 2px solid var(--border-light); font-size: 12.5px; line-height: 1.4; color: var(--text-secondary); text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.pbx-toc a:hover, .pbx-toc a:active, .pbx-toc a:focus-visible { border-left-color: var(--primary); color: var(--text); }
.pbx-drafts > header h2 { margin: 0; font-size: 22px; font-weight: 850; }
.pbx-drafts > header h2 small { font-size: 14px; color: var(--warning-text); }
.pbx-drafts > header p { margin: 4px 0 14px; font-size: 13px; color: var(--text-secondary); }
.pbx-dgroup { margin-bottom: 14px; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; animation: pbxIn .4s var(--pbx-ease) backwards; }
.pbx-dgroup__h { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface-hover); font-size: 13px; }
.pbx-dgroup__h a { color: var(--text); text-decoration: none; } .pbx-dgroup__h a:hover { color: var(--primary); }
.pbx-dgroup__h small { font-weight: 800; color: var(--text-muted); }
.pbx-dgroup__h .pbx-btn { margin-left: auto; }
.pbx-drow { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--border-light); font-size: 13px; }
.pbx-drow b { flex: 1; font-weight: 600; }
@media (max-width: 1180px) { .pbx-a { grid-template-columns: 210px minmax(0, 1fr); } .pbx-side { display: none; } .pbx-ed__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
.pbx-page { -webkit-tap-highlight-color: transparent; }
.pbx-page input, .pbx-page textarea, .pbx-page select { font-size: 16px !important; }
.pbx-page .sm-ph__t { font-size: 27px; }
.pbx-tools { width: 100%; } .pbx-search, .pbx-search__box { width: 100%; } .pbx-search__box { height: 46px; }
.pbx-tools .sm-btn { width: 100%; height: 44px; }
.pbx-tray { flex-wrap: wrap; border-radius: var(--radius-xl); } .pbx-tray__go { width: 100%; justify-content: center; margin-left: 0; }
.pbx-a { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pbx-chapters { position: sticky; top: var(--pbx-top); z-index: 3; flex-direction: row; overflow-x: auto; gap: 6px; margin: 0 -14px; padding: 6px 14px; background: var(--bg);
scroll-snap-type: x proximity; scrollbar-width: none; }
.pbx-chapters hr { display: none; }
.pbx-ch { flex: none; width: auto; min-height: 44px; padding: 6px 12px 6px 6px; border: 1px solid var(--border-light); border-radius: var(--radius-full); background: var(--surface); scroll-snap-align: start; }
.pbx-ch:hover { transform: none; }
.pbx-ch__i { width: 30px; height: 30px; flex-basis: 30px; font-size: 14px; border-radius: 50%; }
.pbx-ch b { font-size: 13px; white-space: nowrap; }
.pbx-cover { padding: 16px; gap: 12px; border-radius: var(--radius-xl); } .pbx-cover__i { width: 48px; height: 48px; flex-basis: 48px; font-size: 24px; border-radius: 15px; } .pbx-cover h2 { font-size: 22px; }
.pbx-rule__view { grid-template-columns: 34px minmax(0, 1fr); }
.pbx-rule h3 { font-size: 16.5px; } .pbx-prose { font-size: 14.5px; }
.pbx-rule__acts { width: 100%; margin-left: 0; flex-wrap: wrap; gap: 6px; }
.pbx-btn { min-height: 44px; padding: 0 16px; font-size: 13.5px; } .pbx-btn.is-sm { min-height: 40px; height: auto; padding: 0 13px; font-size: 13px; }
.pbx-chip.is-link { min-height: 40px; padding: 8px 13px; font-size: 12.5px; white-space: normal; }
.pbx-sr__r { min-height: 52px; }
.pbx-ed { padding: 14px 12px; } .pbx-ed__row { grid-template-columns: minmax(0, 1fr); }
.pbx-ed__link { grid-template-columns: minmax(0, 1fr) auto; } .pbx-ed__link input:nth-child(2), .pbx-ed__link input:nth-child(3) { grid-column: 1; }
.pbx-ed__btns { width: 100%; margin-left: 0; } .pbx-ed__btns .pbx-btn { flex: 1; justify-content: center; }
.pbx-page .ed-mini { min-height: 40px; }
.pbx-dgroup__h { flex-wrap: wrap; } .pbx-dgroup__h .pbx-btn { margin-left: 0; width: 100%; justify-content: center; }
.pbx-drow { flex-wrap: wrap; } .pbx-drow b { flex: 1 1 calc(100% - 34px); font-size: 14px; } .pbx-drow .pbx-btn { flex: 1; justify-content: center; }
}
.hq-v2 {
display: flex;
flex-direction: column;
gap: 18px;
color: var(--text);
}
.hq-ph { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.hq-ph__t { font-size: 25px; font-weight: 800; letter-spacing: -0.035em; margin: 0; line-height: 1.1; color: var(--text); }
.hq-ph__s { font-size: 13px; color: var(--text-secondary); margin: 5px 0 0; max-width: 66ch; line-height: 1.5; }
.hq-ph__a { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hq-btn {
display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
height: 34px; padding: 0 14px; border-radius: var(--radius);
border: 1px solid var(--border); background: var(--surface); color: var(--text);
font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; text-decoration: none;
transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.hq-btn:hover, .hq-btn:active, .hq-btn:focus-visible { background: var(--surface-active); border-color: var(--border-hover); transform: translateY(-1px); }
.hq-btn svg { width: 14px; height: 14px; }
.hq-btn--p { background: var(--primary); border-color: var(--primary); color: var(--text-inverse); }
.hq-btn--p:hover, .hq-btn--p:active { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--text-inverse); }
.hq-btn--sm { height: 28px; padding: 0 10px; font-size: 11.5px; border-radius: var(--radius-sm); }
.hq-btn--danger { color: var(--danger-text); }
.hq-btn--danger:hover, .hq-btn--danger:active, .hq-btn--danger:focus-visible { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-text); }
.hq-btn.is-on { background: var(--surface-active); border-color: var(--primary); color: var(--primary); }
.hq-tabs {
display: inline-flex; gap: 3px; padding: 4px; max-width: 100%;
background: var(--surface-active); border: 1px solid var(--border-light);
border-radius: var(--radius-md); overflow-x: auto; scrollbar-width: none;
}
.hq-tabs::-webkit-scrollbar { display: none; }
.hq-tab {
display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
border: 0; background: none; border-radius: var(--radius-sm);
font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-secondary);
white-space: nowrap; cursor: pointer; text-decoration: none;
transition: background 0.16s ease, color 0.16s ease;
}
.hq-tab:hover, .hq-tab:active { color: var(--text); }
.hq-tab.on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
.hq-card { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 18px; }
.hq-card--flush { padding: 0; overflow: hidden; }
.hq-card__h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hq-card__t { font-size: 13px; font-weight: 800; letter-spacing: -0.01em; margin: 0; color: var(--text); }
.hq-card__sub { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.hq-card__a { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.hq-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.hq-grid { display: grid; gap: 14px; }
.hq-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hq-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hq-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hq-g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hq-g-2-1 { grid-template-columns: 2fr 1fr; }
.hq-stack { display: flex; flex-direction: column; gap: 14px; }
.hq-chip {
display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
border-radius: var(--radius-full); background: var(--surface-active);
color: var(--text-secondary); font-size: 11px; font-weight: 700; white-space: nowrap;
}
.hq-chip--a { background: var(--primary-soft); color: var(--primary); }
.hq-chip--good { background: var(--success-soft); color: var(--success-text); }
.hq-chip--warn { background: var(--warning-soft); color: var(--warning-text); }
.hq-chip--crit { background: var(--danger-soft); color: var(--danger-text); }
.hq-dot { width: 7px; height: 7px; border-radius: var(--radius-full); flex: none; background: currentColor; }
.hq-mono {
width: 34px; height: 34px; border-radius: var(--radius); flex: none;
display: grid; place-items: center; font-size: 11px; font-weight: 800; letter-spacing: -0.02em;
background: var(--surface-active); color: var(--text); border: 1px solid var(--border-light);
}
.hq-mono--sm { width: 26px; height: 26px; border-radius: var(--radius-sm); font-size: 9px; }
.hq-ava {
width: 36px; height: 36px; border-radius: var(--radius-md); flex: none;
display: grid; place-items: center; font-size: 11.5px; font-weight: 800;
color: var(--text-inverse); letter-spacing: -0.02em;
}
.hq-ava--t0 {
width: 44px; height: 44px; font-size: 13px;
background: linear-gradient(135deg, var(--primary), var(--hq-net));
box-shadow: var(--shadow-md);
}
.hq-ava--t1 { background: linear-gradient(135deg, var(--hq-net), var(--hq-net-2)); }
.hq-ava--t2 { background: var(--surface-active); color: var(--text); border: 1px solid var(--border-light); }
.hq-ava--sm { width: 26px; height: 26px; border-radius: var(--radius-sm); font-size: 9px; }
.hq-hero {
grid-column: span 2;
background: radial-gradient(120% 160% at 8% 0%, var(--primary-soft), transparent 58%), var(--surface);
border: 1px solid var(--border-light); border-radius: var(--radius-lg);
padding: 20px 22px; position: relative; overflow: hidden;
}
.hq-hero__n { font-size: 52px; font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; margin: 8px 0 0; color: var(--text); }
.hq-hero__u { font-size: 13px; color: var(--text-secondary); margin-top: 7px; font-weight: 600; }
.hq-hero__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; text-decoration: none; }
.hq-kpi {
background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-md);
padding: 14px 15px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
transition: border-color 0.18s ease, transform 0.18s ease;
}
.hq-kpi:hover, .hq-kpi:active { border-color: var(--border-hover); transform: translateY(-2px); }
.hq-kpi__l { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.hq-kpi__v { font-size: 27px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; color: var(--text); }
.hq-kpi__d { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-top: auto; }
.hq-bars { display: flex; flex-direction: column; gap: 11px; }
.hq-bar { display: grid; grid-template-columns: minmax(96px, 150px) 1fr auto; align-items: center; gap: 12px; }
.hq-bar__l { font-size: 12px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hq-bar__t { height: 10px; border-radius: 0 5px 5px 0; background: var(--surface-active); overflow: hidden; }
.hq-bar__f {
display: block; height: 100%; border-radius: 0 4px 4px 0;
background: var(--hq-s1); width: var(--w, 0%);
animation: hqGrow 1s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--d, 0s);
}
.hq-bar__f--s2 { background: var(--hq-s2); }
.hq-bar__f--s3 { background: var(--hq-s3); }
@keyframes hqGrow { from { width: 0; } to { width: var(--w, 0%); } }
.hq-bar__v { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; color: var(--text); }
.hq-bar__v small { color: var(--text-muted); font-weight: 700; }
.hq-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 11.5px; color: var(--text-secondary); font-weight: 600; }
.hq-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; }
.hq-meter { height: 8px; border-radius: 4px; background: var(--hq-s1-track); overflow: hidden; }
.hq-meter i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--hq-s1); width: var(--w, 0%); animation: hqGrow 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hq-meter--s2 { background: var(--hq-s2-track); }
.hq-meter--s2 i { background: var(--hq-s2); }
.hq-meter--good { background: var(--success-soft); }
.hq-meter--good i { background: var(--success); }
.hq-meter--warn { background: var(--warning-soft); }
.hq-meter--warn i { background: var(--warning); }
.hq-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.hq-tbl th {
text-align: left; font-size: 9.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--text-muted); padding: 11px 14px; border-bottom: 1px solid var(--border-light);
background: var(--surface-hover); white-space: nowrap;
}
.hq-tbl td { padding: 11px 14px; border-bottom: 1px solid var(--border-light); color: var(--text); vertical-align: middle; }
.hq-tbl tr:last-child td { border-bottom: 0; }
.hq-tbl tbody tr:hover, .hq-tbl tbody tr:active { background: var(--surface-hover); }
.hq-tbl .hq-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.hq-who { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.hq-muted { color: var(--text-muted); font-weight: 600; }
.hq-scroll-x { overflow-x: auto; }
.hq-note {
display: flex; gap: 11px; padding: 12px 14px; border-radius: var(--radius-md);
background: var(--surface-hover); border: 1px solid var(--border-light);
font-size: 12.5px; color: var(--text-secondary); line-height: 1.5;
}
.hq-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--text-muted); }
.hq-note b { color: var(--text); }
.hq-note--warn { background: var(--warning-soft); border-color: transparent; color: var(--text); }
.hq-note--warn svg { color: var(--warning); }
.hq-row {
display: flex; align-items: center; gap: 13px; padding: 13px 15px;
border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--surface);
transition: border-color 0.16s ease, transform 0.16s ease;
}
.hq-row:hover, .hq-row:active { border-color: var(--primary); transform: translateX(2px); }
.hq-row__b { min-width: 0; flex: 1; }
.hq-row__t { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hq-row__s { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; display: flex; gap: 10px; flex-wrap: wrap; }
.hq-row__a { display: flex; gap: 7px; flex: none; }
.hq-empty { text-align: center; padding: 46px 20px; border: 1px dashed var(--border); border-radius: var(--radius-lg); color: var(--text-muted); font-size: 13px; }
.hq-tbl td.hq-empty { text-align: center; border: 0; }
.hqc-node {
background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-md);
padding: 12px 13px; text-align: left; min-width: 0; position: relative;
transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.hqc-node:hover, .hqc-node:active { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.hqc-node__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hqc-node__nm { font-size: 13.5px; font-weight: 800; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.hqc-node__rl { font-size: 10.5px; font-weight: 700; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hqc-node__mt { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 11px; }
.hqc-node__n { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hqc-node--root { border-color: var(--primary); background: radial-gradient(130% 200% at 0% 0%, var(--primary-soft), transparent 62%), var(--surface); }
.hqc-node--gap { border-style: dashed; border-color: var(--warning); background: var(--warning-soft); }
.hqc-staff { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 3px; }
.hqc-person {
display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: var(--radius-sm);
font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: grab;
border: 1px solid transparent; background: none; width: 100%; text-align: left; font-family: inherit;
transition: background 0.14s ease, border-color 0.14s ease;
}
.hqc-person:hover, .hqc-person:active, .hqc-person:focus-visible { background: var(--surface-hover); border-color: var(--border-light); color: var(--text); }
.hqc-person__nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hqc-person__r { margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); flex: none; }
.hqc-drag { cursor: grab; }
.hqc-drag:active { cursor: grabbing; }
.hqc-node.is-dragging, .hqc-person.is-dragging { opacity: 0.4; }
.hqc-drop.is-over { outline: 2px dashed var(--primary); outline-offset: 3px; background: var(--primary-soft); }
.hqc-picked { outline: 2px solid var(--primary); outline-offset: 2px; }
.hq-v2.is-moving .hqc-drop { outline: 1px dashed var(--border-hover); outline-offset: 2px; }
.hqc-movebar {
display: flex; align-items: center; gap: 10px; padding: 10px 14px;
border-radius: var(--radius-md); background: var(--primary-soft);
border: 1px solid var(--primary); font-size: 12.5px; font-weight: 700; color: var(--primary);
}
.hqc-movebar__x { margin-left: auto; }
.hqc-cascade { padding-top: 6px; }
.hqc-root { display: flex; justify-content: center; }
.hqc-root .hqc-node { width: min(360px, 100%); }
.hqc-stem { height: 26px; position: relative; }
.hqc-stem::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border); }
.hqc-rail { height: 1px; background: var(--border); margin-inline: var(--railpad, 12.5%); }
.hqc-drops, .hqc-tier { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 14px; }
.hqc-drops { gap: 14px; }
.hqc-drops i { height: 22px; position: relative; }
.hqc-drops i::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border); }
.hqc-col { display: flex; flex-direction: column; gap: 12px; }
.hqc-level { display: block; }
.hqc-tier--solo { display: flex; justify-content: center; }
.hqc-tier--solo .hqc-node { width: min(360px, 100%); }
.hqc-kids { position: relative; margin-left: 18px; padding-left: 20px; }
.hqc-kids::before { content: ""; position: absolute; left: 0; top: -6px; bottom: 26px; width: 1px; background: var(--border); }
.hqc-item { position: relative; margin-top: 10px; }
.hqc-item::before { content: ""; position: absolute; left: -20px; top: 27px; width: 14px; height: 1px; background: var(--border); }
.hqc-spine .hqc-node { max-width: 660px; }
.hqc-orbit { position: relative; width: 100%; aspect-ratio: 980 / 640; }
.hqc-orbit__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hqc-ring { fill: none; stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 7; opacity: 0.22; transform-origin: 490px 300px; animation: hqSpin 90s linear infinite; }
.hqc-ring--2 { animation-duration: 140s; animation-direction: reverse; }
.hqc-orbit--deep { aspect-ratio: 980 / 760; }
.hqc-orbit--deep .hqc-ring { transform-origin: 490px 380px; }
@keyframes hqSpin { to { transform: rotate(360deg); } }
.hqc-link { stroke: var(--text-muted); stroke-width: 1.5; fill: none; opacity: 0.55; }
.hqc-link--s { stroke-dasharray: 3 6; opacity: 0.38; }
.hqc-link--d { stroke-dasharray: 5 5; stroke: var(--warning); opacity: 0.75; }
.hqc-orb { position: absolute; transform: translate(-50%, -50%); width: 206px; }
.hqc-orb .hqc-node { padding: 10px 11px; }
.hqc-orb--root { width: 224px; }
@media (max-width: 1180px) {
.hq-g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hq-g-2-1 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.hq-g4, .hq-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hqc-cascade, .hqc-orbit-wrap { display: none; }
.hqc-narrow-only { display: block; }
}
@media (max-width: 640px) {
.hq-g2, .hq-g3 { grid-template-columns: 1fr; }
.hq-g4, .hq-g6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hq-hero { grid-column: span 2; }
.hq-hero__n { font-size: 40px; }
.hq-kpi__v { font-size: 23px; }
.hq-ph__t { font-size: 21px; }
.hq-ph__a { margin-left: 0; width: 100%; }
.hq-bar { grid-template-columns: minmax(84px, 112px) 1fr auto; gap: 9px; }
.hqc-kids { margin-left: 10px; padding-left: 14px; }
.hqc-item::before { left: -14px; width: 10px; }
}
.hqc-narrow-only { display: none; }
@media (prefers-reduced-motion: reduce) {
.hq-bar__f, .hq-meter i, .hqc-ring { animation: none; }
.hq-bar__f, .hq-meter i { width: var(--w, 0%); }
}
.hqc-lead {
display: flex; align-items: center; gap: 8px; margin-top: 11px;
padding: 7px 9px; border-radius: var(--radius-sm);
background: var(--surface-hover); border: 1px dashed var(--border);
font-size: 11.5px; min-height: 40px;
}
.hqc-lead__nm { font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hqc-lead__r { margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); flex: none; }
.hqc-lead__empty { color: var(--text-muted); font-weight: 600; font-style: italic; }
.hqc-bench { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px; }
.hqc-node--hint .hqc-node__rl { white-space: normal; overflow: visible; line-height: 1.45; }
.hq-note--strip { align-items: center; gap: 12px; flex-wrap: wrap; color: var(--text-secondary); }
.hq-note--strip:hover { border-color: var(--primary); }
.fi-panel-hq .fi-header-heading { font-size: 25px; font-weight: 800; letter-spacing: -0.035em; }
.fi-panel-hq .fi-header { padding-block-end: 0; }
.hq-rep { display: flex; flex-direction: column; gap: 16px; }
.hq-tabs--topic { font-size: 13px; }
.hq-scope {
display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px;
background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-md);
font-size: 12.5px; font-weight: 700; color: var(--text); cursor: pointer;
transition: border-color 0.16s ease;
}
.hq-scope:hover, .hq-scope:focus-within { border-color: var(--primary); }
.hq-scope select, .hq-scope input {
border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0;
max-width: 190px;
}
.hq-scope select:focus, .hq-scope input:focus { outline: none; }
.hq-scope__b {
font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; padding: 3px 6px; border-radius: var(--radius-sm);
background: var(--surface-active); color: var(--text-secondary);
}
.hq-scope--date span { color: var(--text-muted); }
.hq-link { border: 0; background: none; color: var(--primary); font-weight: 700; cursor: pointer; font-size: 13px; padding: 0; font-family: inherit; }
.hq-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 12px; }
.hq-td-share { display: flex; align-items: center; gap: 9px; justify-content: flex-end; }
.hq-td-share .hq-meter { width: 74px; flex: none; }
.hq-td-share span:last-child { min-width: 34px; text-align: right; }
button.hq-who { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--text); cursor: pointer; }
button.hq-who:hover, button.hq-who:active { color: var(--primary); }
.hq-tbl--num th { text-align: right; }
.hq-tbl--num th:first-child { text-align: left; }
.hq-tbl--num td { text-align: right; font-variant-numeric: tabular-nums; }
.hq-tbl--num td.hq-td-name { text-align: left; font-weight: 700; }
.hq-td-name button { border: 0; background: none; color: var(--text); font-weight: 700; cursor: pointer; font-family: inherit; font-size: 13px; padding: 0; text-align: left; }
.hq-td-name button:hover, .hq-td-name button:active { color: var(--primary); }
.hq-tbl tr.hq-row-total td { font-weight: 800; border-top: 2px solid var(--border); background: var(--surface-hover); }
.hq-goal-group { font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin: 16px 0 2px; }
.hq-goal-group:first-child { margin-top: 0; }
.hq-goal { padding: 11px 0; border-bottom: 1px solid var(--border-light); }
.hq-goal:last-child { border-bottom: 0; }
.hq-goal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 7px; }
.hq-goal-name { font-weight: 700; font-size: 13px; color: var(--text); }
.hq-goal-period { font-size: 10.5px; font-weight: 800; color: var(--text-muted); background: var(--surface-active); padding: 1px 8px; border-radius: var(--radius-full); margin-left: 6px; white-space: nowrap; }
.hq-goal-num { font-weight: 800; font-size: 13px; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hq-goal-del { border: 0; background: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 0 0 0 8px; }
.hq-goal-del:hover, .hq-goal-del:active { color: var(--danger); }
.hq-goal-bar { height: 8px; border-radius: 4px; background: var(--surface-active); overflow: hidden; }
.hq-goal-fill { height: 100%; border-radius: 0 4px 4px 0; transition: width 0.3s; }
.hq-goal-fill.is-low { background: var(--warning); }
.hq-goal-fill.is-mid { background: var(--hq-s2); }
.hq-goal-fill.is-done { background: var(--success); }
.fi-panel-hq .hq-goalcell-bar { background: var(--surface-active); }
.fi-panel-hq .thrive-stat {
background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-md);
padding: 14px 15px; box-shadow: none;
}
.fi-panel-hq .thrive-stat__num { font-size: 27px; letter-spacing: -0.035em; }
.fi-panel-hq .thrive-stat__label { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: var(--text-muted); }
.fi-panel-hq .thrive-card { border-radius: var(--radius-lg); border-color: var(--border-light); box-shadow: none; }
.fi-panel-hq .thrive-table th { font-size: 9.5px; letter-spacing: 0.09em; color: var(--text-muted); border-bottom: 1px solid var(--border-light); background: var(--surface-hover); padding: 11px 14px; }
.fi-panel-hq .thrive-table td { padding: 11px 14px; border-bottom: 1px solid var(--border-light); }
.fi-panel-hq .thrive-banner {
border-radius: var(--radius-md); padding: 12px 14px; font-size: 12.5px; line-height: 1.5;
background: var(--surface-hover); border: 1px solid var(--border-light); color: var(--text-secondary);
}
.fi-panel-hq .thrive-select {
border-radius: var(--radius); border-color: var(--border); background: var(--surface); color: var(--text);
padding: 7px 11px; font-size: 12.5px; font-weight: 600;
}
.hq-mx { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.hq-mx th, .hq-mx td { padding: 9px 14px; border-bottom: 1px solid var(--border-light); }
.hq-mx thead th {
background: var(--bg); border-bottom: 1px solid var(--border); text-align: center;
font-size: 9.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--text-muted); vertical-align: bottom; min-width: 132px;
}
.hq-mx thead th:first-child, .hq-mx tbody th { position: sticky; left: 0; z-index: 2; text-align: left; min-width: 250px; }
.hq-mx tbody th { background: var(--surface); font-weight: 700; color: var(--text); }
.hq-mx tbody tr:hover th, .hq-mx tbody tr:hover td { background: var(--surface-hover); }
.hq-mx tbody tr:last-child th, .hq-mx tbody tr:last-child td { border-bottom: 0; }
.hq-mx__k { font-size: 10.5px; font-weight: 600; color: var(--text-muted); margin-left: 6px; }
.hq-mx__g th, .hq-mx__g td, .hq-mx tbody tr.hq-mx__g:hover th, .hq-mx tbody tr.hq-mx__g:hover td {
background: var(--bg); padding: 7px 14px;
font-size: 9.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted);
}
.hq-mx__r div { font-size: 13px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; text-transform: none; }
.hq-mx__r span { display: block; font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: none; letter-spacing: 0; margin-top: 2px; }
.hq-mx__cell { text-align: center; }
.hq-mx__sub { padding-left: 34px !important; }
.hq-mx__tree { opacity: 0.45; font-weight: 400; margin-right: 5px; }
.hq-mx__all {
border: 0; background: transparent; cursor: pointer; padding: 0;
font-size: 10px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted);
}
.hq-mx__all:hover, .hq-mx__all:active { color: var(--primary); }
.hq-mx__ever { font-size: 10.5px; font-weight: 800; color: var(--success-text); text-transform: none; letter-spacing: 0; }
.hq-mx__del { border: 0; background: transparent; cursor: pointer; padding: 0; font-size: 10.5px; font-weight: 700; color: var(--danger); text-transform: none; letter-spacing: 0; }
.hq-tgl {
width: 34px; height: 20px; padding: 0; border-radius: 20px; position: relative; display: inline-block;
background: var(--surface-active); border: 1px solid var(--border); cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease;
}
.hq-tgl::after {
content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
background: var(--text-muted); transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
}
.hq-tgl.on { background: var(--primary); border-color: var(--primary); }
.hq-tgl.on::after { transform: translateX(14px); background: var(--text-inverse); }
.hq-tgl:hover:not(:disabled), .hq-tgl:active:not(:disabled) { border-color: var(--primary); }
.hq-tgl:disabled { opacity: 0.45; cursor: not-allowed; }
.hq-person { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border-light); }
.hq-person:first-child { border-top: 0; }
.hq-person__nm { font-size: 13px; font-weight: 700; color: var(--text); }
.hq-person__em { font-size: 11.5px; color: var(--text-muted); }
.hq-person__a { margin-left: auto; display: flex; gap: 5px; flex-wrap: wrap; }
.hq-rolepill {
border: 1px solid var(--border-light); background: transparent; color: var(--text-secondary);
font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 4px 11px; cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
}
.hq-rolepill:hover, .hq-rolepill:active { border-color: var(--border-hover); color: var(--text); }
.hq-rolepill.on { background: var(--primary); border-color: var(--primary); color: var(--text-inverse); }
.hq-cc {
background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg);
overflow: hidden; transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.hq-cc:hover, .hq-cc:active { border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.hq-cc--gap { border-color: var(--warning); }
.hq-cc__h { padding: 15px 16px 12px; display: flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--border-light); }
.hq-cc__nm { font-size: 14px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hq-cc__sl { font-size: 10.5px; font-weight: 700; color: var(--text-muted); margin-top: 2px; }
.hq-cc__b { padding: 13px 16px 15px; display: flex; flex-direction: column; gap: 12px; }
.hq-cc__row { display: flex; gap: 14px; }
.hq-cc__k { flex: 1; min-width: 0; }
.hq-cc__kv { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.hq-cc__kl { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-top: 5px; }
.hq-cc__sh { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.hq-cc__f { display: flex; align-items: center; gap: 8px; padding-top: 11px; border-top: 1px solid var(--border-light); }
.hq-mono--lg { width: 44px; height: 44px; border-radius: var(--radius-md); font-size: 13px; }
.hq-tbl td.hq-apr-acts { text-align: right; white-space: nowrap; }
.hq-tbl tr.hq-apr-note td { padding-top: 0; background: var(--surface-hover); border-bottom: 1px solid var(--border-light); }
.hq-apr-note__b { display: flex; gap: 6px; align-items: center; justify-content: flex-end; padding-top: 10px; }
.hq-apr-note__b input {
flex: 1; max-width: 520px; height: 28px; padding: 0 10px; font: inherit; font-size: 12.5px;
border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}
.hq-apr-note__b input:focus { outline: none; border-color: var(--primary); }
.sf-sync { color: var(--text); }
.sf-sync .sf-intro {
display: flex;
align-items: flex-start;
gap: 14px;
background: linear-gradient(135deg, var(--info-bg), var(--primary-soft));
border: 1px solid var(--border-light);
border-radius: 14px;
padding: 20px 24px;
margin-bottom: 22px;
}
.sf-sync .sf-intro-icon { font-size: 30px; line-height: 1; }
.sf-sync .sf-intro-title { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.sf-sync .sf-intro-sub { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.sf-sync .sf-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 22px; }
.sf-sync .sf-field label {
display: block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--text-muted);
margin-bottom: 4px;
}
.sf-sync .sf-select {
padding: 9px 14px;
border-radius: 10px;
border: 1.5px solid var(--border);
background: var(--surface);
color: var(--text);
font-size: 13px;
font-weight: 500;
min-width: 170px;
}
.sf-sync .sf-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.sf-sync .sf-dates { display: flex; align-items: center; gap: 8px; }
.sf-sync .sf-dates .sf-select { min-width: 0; }
.sf-sync .sf-dates span { color: var(--text-muted); font-size: 13px; }
.sf-sync .sf-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.sf-sync .sf-grid.is-loading { opacity: 0.6; pointer-events: none; }
.sf-sync .sf-card {
display: flex;
flex-direction: column;
gap: 12px;
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: 16px;
box-shadow: var(--shadow-sm);
padding: 22px;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.sf-sync .sf-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border); }
.sf-sync .sf-card-zip { border: 2px solid var(--primary); }
.sf-sync .sf-card-icon { font-size: 28px; line-height: 1; }
.sf-sync .sf-card-body { flex: 1; }
.sf-sync .sf-card-body h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--text); }
.sf-sync .sf-card-body p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.45; }
.sf-sync .sf-btn {
align-self: flex-start;
padding: 9px 18px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.sf-sync .sf-btn:hover { background: var(--surface-hover); }
.sf-sync .sf-btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.sf-sync .sf-btn-primary:hover { background: var(--primary-hover); }
.sf-sync .sf-card[disabled], .sf-sync .sf-btn[disabled] { opacity: 0.6; cursor: progress; }
.sf-sync .sf-loading {
display: none;
align-items: center;
gap: 10px;
margin-top: 16px;
padding: 14px 20px;
background: var(--info-bg);
border: 1px solid var(--border-light);
border-radius: 10px;
font-weight: 600;
color: var(--text);
font-size: 13px;
}
.sf-sync .sf-spinner {
width: 18px;
height: 18px;
border: 2px solid var(--border);
border-top-color: var(--primary);
border-radius: 50%;
animation: sf-spin 0.7s linear infinite;
}
@keyframes sf-spin { to { transform: rotate(360deg); } }
.sf-sync .sf-backfill {
margin-top: 28px;
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: 14px;
padding: 22px 26px;
}
.sf-sync .sf-backfill-title { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.sf-sync .sf-backfill-sub { font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin: 0 0 14px; }
.sf-sync .sf-map-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sf-sync .sf-map-chip {
font-size: 12px;
background: var(--surface-hover);
border: 1px solid var(--border-light);
border-radius: 6px;
padding: 4px 10px;
color: var(--text-secondary);
}
.sf-sync .sf-map-chip strong { color: var(--text); }
.sf-sync .sf-backfill-opt { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; cursor: pointer; }
.sf-sync .sf-backfill-status { margin-left: 12px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.sf-sync .om-note { padding: 12px 15px; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.sf-sync .om-note-warn { background: var(--warning-bg); border: 1px solid #fde68a; color: var(--warning-text); }
.roster-board-page .page-shell {
max-width: var(--shell-max-width, 1800px);
margin: 0 auto;
padding: 8px 0 24px;
}
.roster-board-page .rb-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 16px;
gap: 12px;
flex-wrap: wrap;
}
.roster-board-page .rb-title {
font-size: 26px;
font-weight: 800;
color: var(--text, #1d1d1f);
line-height: 1.1;
}
.roster-board-page .rb-subtitle {
font-size: 14px;
color: var(--text-secondary, #6e6e73);
margin-top: 2px;
}
.roster-board-page .rb-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.roster-board-page .rb-stat {
background: var(--surface, #fff);
border: 1px solid var(--border-light, #e5e7eb);
border-radius: var(--radius-md, 12px);
padding: 16px 18px;
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}
.roster-board-page .rb-stat-num {
font-size: 30px;
font-weight: 800;
line-height: 1;
}
.roster-board-page .rb-stat-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--text-secondary, #6e6e73);
margin-top: 8px;
}
.roster-board-page .rb-c-blue { color: var(--secondary, #0071e3); }
.roster-board-page .rb-c-green { color: var(--success, #34c759); }
.roster-board-page .rb-c-red { color: var(--danger, #ff3b30); }
.roster-board-page .rb-c-amber { color: var(--warning, #ff9500); }
.roster-board-page .roster-control-panel {
background: var(--surface, #fff);
border: 1px solid var(--border-light, #e5e7eb);
border-radius: 12px;
margin-bottom: 16px;
overflow: hidden;
}
.roster-board-page .rcp-filters-row {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
flex-wrap: wrap;
background: var(--surface-alt, #f9fafb);
}
.roster-board-page .rcp-search-box {
position: relative;
flex: 1;
min-width: 200px;
max-width: 320px;
}
.roster-board-page .rcp-search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted, #9ca3af);
pointer-events: none;
}
.roster-board-page .rcp-search-input {
width: 100%;
padding: 8px 10px 8px 32px;
border: 1px solid var(--border-light, #e5e7eb);
border-radius: 8px;
font-size: 13px;
background: var(--surface, #fff);
color: var(--text, #1d1d1f);
outline: none;
box-sizing: border-box;
transition: border-color 0.15s, box-shadow 0.15s;
}
.roster-board-page .rcp-search-input:focus {
border-color: var(--primary, #b41f51);
box-shadow: 0 0 0 3px var(--primary-soft, rgba(180, 31, 81, 0.1));
}
.roster-board-page .rcp-select {
padding: 8px 28px 8px 10px;
border: 1px solid var(--border-light, #e5e7eb);
border-radius: 8px;
font-size: 13px;
background-color: var(--surface, #fff);
color: var(--text, #1d1d1f);
cursor: pointer;
outline: none;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
transition: border-color 0.15s;
}
.roster-board-page .rcp-select:focus { border-color: var(--primary, #b41f51); }
.roster-board-page .olami-roster-container {
background: var(--surface, #fff);
border: 1px solid var(--border-light, #e5e7eb);
border-radius: 12px;
overflow: hidden;
width: 100%;
}
.roster-board-page .table-wrap { overflow-x: auto; width: 100%; }
.roster-board-page table.rb-table {
width: 100%;
border-collapse: collapse;
min-width: 760px;
}
.roster-board-page .rb-table thead th {
text-align: left;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary, #6e6e73);
padding: 12px 14px;
border-bottom: 1px solid var(--border-light, #e5e7eb);
background: var(--surface-alt, #f9fafb);
white-space: nowrap;
}
.roster-board-page .rb-table tbody td {
padding: 12px 14px;
border-bottom: 1px solid var(--border-light, #f0f0f0);
font-size: 14px;
color: var(--text, #1d1d1f);
vertical-align: middle;
}
.roster-board-page .rb-table tbody tr:last-child td { border-bottom: none; }
.roster-board-page .rb-table tbody tr:hover { background: var(--surface-hover, #fafafa); }
.roster-board-page .rb-col-mentor { font-weight: 600; white-space: nowrap; }
.roster-board-page .rb-col-fire { width: 36px; text-align: center; }
.roster-board-page .rb-col-actions { white-space: nowrap; }
.roster-board-page .rb-col-schedule { white-space: nowrap; }
.roster-board-page .rb-muted { color: var(--text-muted, #9ca3af); }
.roster-board-page .rb-empty {
text-align: center;
padding: 40px 20px;
color: var(--text-muted, #9ca3af);
font-size: 14px;
}
.roster-board-page .student-pill { display: flex; align-items: center; gap: 10px; }
.roster-board-page .student-info { display: flex; flex-direction: column; }
.roster-board-page .student-name { font-weight: 600; }
.roster-board-page .rb-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: #fff;
flex-shrink: 0;
background: var(--text-muted, #9ca3af);
}
.roster-board-page .rb-avatar.status-green { background: var(--success, #34c759); }
.roster-board-page .rb-avatar.status-yellow { background: var(--warning, #ff9500); }
.roster-board-page .rb-avatar.status-red { background: var(--danger, #ff3b30); }
.roster-board-page .rb-avatar.status-gray { background: #9ca3af; }
.roster-board-page .status-dot {
width: 9px;
height: 9px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.roster-board-page .status-dot.green { background: var(--success, #34c759); }
.roster-board-page .status-dot.yellow { background: var(--warning, #ff9500); }
.roster-board-page .status-dot.red { background: var(--danger, #ff3b30); }
.roster-board-page .status-dot.gray { background: #c7c7cc; }
.roster-board-page .rb-lastmet { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.roster-board-page .rb-lastmet-text { font-size: 13px; }
.roster-board-page .rb-days { color: var(--text-secondary, #6e6e73); font-size: 12px; }
.roster-board-page .rb-schedule { font-size: 13px; color: var(--text-secondary, #6e6e73); }
.roster-board-page .status-tag {
display: inline-block;
padding: 4px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
white-space: nowrap;
}
.roster-board-page .rb-type-mentee { background: rgba(0, 113, 227, 0.12); color: var(--secondary, #0071e3); }
.roster-board-page .rb-week-done { background: rgba(52, 199, 89, 0.14); color: #15803d; }
.roster-board-page .rb-week-sched { background: rgba(0, 113, 227, 0.12); color: var(--secondary, #0071e3); }
.roster-board-page .rb-week-cancel { background: var(--surface-hover, #f3f4f6); color: var(--text-secondary, #6e6e73); }
.roster-board-page .rb-week-noshow { background: rgba(255, 59, 48, 0.12); color: var(--danger, #ff3b30); }
.roster-board-page .rb-fire { font-size: 16px; }
.roster-board-page .roster-action-btn {
display: inline-block;
padding: 5px 11px;
font-size: 12px;
font-weight: 600;
border-radius: 6px;
text-decoration: none;
border: 1px solid var(--border-light, #e5e7eb);
cursor: pointer;
margin-right: 4px;
transition: all 0.15s;
}
.roster-board-page .ra-undo {
background: var(--surface-hover, #f3f4f6);
color: var(--text-secondary, #6b7280);
}
.roster-board-page .ra-undo:hover { background: var(--border-light, #e5e7eb); }
.roster-board-page .ra-checkin {
background: #ecfdf5;
color: #16a34a;
border-color: rgba(22, 163, 74, 0.2);
}
.roster-board-page .ra-checkin:hover { background: #16a34a; color: #fff; }
.roster-board-page .ra-present {
background: #16a34a;
color: #fff;
border-color: #16a34a;
}
.roster-board-page .ra-present:hover { background: #15803d; }
.roster-board-page .ra-cancel {
background: #fef2f2;
color: #ef4444;
border-color: rgba(239, 68, 68, 0.22);
padding: 5px 9px;
}
.roster-board-page .ra-cancel:hover { background: #ef4444; color: #fff; border-color: #ef4444; }
.roster-board-page .ra-restore {
background: var(--surface-hover, #f3f4f6);
color: var(--text-secondary, #6b7280);
}
.roster-board-page .ra-restore:hover { background: var(--border-light, #e5e7eb); }
.roster-board-page .rb-name-btn {
border: none; background: none; padding: 0; margin: 0;
font-weight: 600; font-size: inherit; color: var(--text, #1d1d1f);
cursor: pointer; text-align: left;
}
.roster-board-page .rb-name-btn:hover { color: var(--primary); text-decoration: underline; }
@media screen and (max-width: 900px) {
.roster-board-page .rb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.roster-signups-page .rcp-top-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-light); }
.roster-signups-page .rcp-filters-row { padding: 10px 16px; }
.rcp-gatekeeper { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; font-size: 13px; border: 1px solid var(--border-light); background: var(--surface-active); color: var(--text); }
.rcp-gatekeeper .gk-indicator { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gk-active .gk-indicator { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.5); }
.gk-disabled .gk-indicator { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,.4); }
.rcp-gatekeeper .gk-label { font-weight: 700; }
.gk-active .gk-status { color: #16a34a; font-weight: 700; }
.gk-disabled .gk-status { color: #d97706; font-weight: 700; }
.gk-toggle-btn { margin-left: 4px; padding: 3px 10px; font-size: 11px; font-weight: 600; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: all .15s; }
.gk-toggle-btn:hover { background: var(--surface-hover); color: var(--text); }
.rcp-view-tabs { display: inline-flex; gap: 4px; }
.rcp-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
.rcp-tab:hover { background: var(--surface-active); color: var(--text); }
.rcp-tab.active { background: var(--primary-soft); color: var(--primary); }
.rcp-tab-count { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 20px; background: var(--surface-active); color: var(--text-muted); }
.rcp-tab.active .rcp-tab-count { background: var(--primary); color: var(--on-primary, #fff); }
.rcp-apply-btn { padding: 9px 20px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
.rcp-apply-btn:hover { background: var(--surface-hover); }
.roster-signups-page .olami-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.roster-signups-page .olami-table thead { background: var(--bg); border-bottom: 2px solid var(--border); }
.roster-signups-page .olami-table th { text-align: left; padding: 10px 12px; font-weight: 700; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.roster-signups-page .olami-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-light); vertical-align: middle; color: var(--text); font-size: 14px; }
.roster-signups-page .olami-table tbody tr:hover { background: var(--surface-hover); }
.roster-signups-page .student-info { display: flex; flex-direction: column; line-height: 1.25; }
.roster-signups-page .rb-empty { text-align: center; padding: 40px; color: var(--text-muted); }
.roster-signups-page .rb-muted { color: var(--text-muted); }
.roster-signups-page .roster-action-btn {
display: inline-block; padding: 5px 11px; font-size: 12px; font-weight: 600; border-radius: 6px;
text-decoration: none; border: 1px solid var(--border-light, #e5e7eb); cursor: pointer; margin-right: 4px; transition: all .15s;
}
.roster-signups-page .ra-checkin { background: #ecfdf5; color: #16a34a; border-color: rgba(22,163,74,.2); }
.roster-signups-page .ra-checkin:hover { background: #16a34a; color: #fff; }
.roster-signups-page .ra-present { background: #16a34a; color: #fff; border-color: #16a34a; }
.roster-signups-page .ra-present:hover { background: #15803d; }
.roster-signups-page .ra-cancel { background: #fef2f2; color: #ef4444; border-color: rgba(239,68,68,.22); padding: 5px 9px; }
.roster-signups-page .ra-cancel:hover { background: #ef4444; color: #fff; border-color: #ef4444; }
.roster-signups-page .ra-restore { background: var(--surface-hover, #f3f4f6); color: var(--text-secondary, #6b7280); }
.roster-signups-page .ra-restore:hover { background: var(--border-light, #e5e7eb); }
.roster-signups-page .ra-delete { background: var(--surface); color: #b91c1c; border-color: rgba(185,28,28,.22); padding: 5px 9px; }
.roster-signups-page .ra-delete:hover { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.roster-signups-page .rb-name-btn { border: none; background: none; padding: 0; margin: 0; font-weight: 600; font-size: inherit; color: var(--text, #1d1d1f); cursor: pointer; text-align: left; }
.roster-signups-page .rb-name-btn:hover { color: var(--primary); text-decoration: underline; }
.roster-signups-page .col-select { width: 36px; text-align: center; }
.roster-signups-page .col-select input[type="checkbox"],
.roster-signups-page thead .col-select input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--primary, #b41f51); }
.roster-signups-page tbody tr.is-selected { background: var(--primary-soft, #fdf2f7); }
.roster-signups-page .roster-bulk-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 12px; border: 1px solid var(--primary-soft, #f3d6e2); background: var(--primary-soft, #fdf2f7); border-radius: 10px; }
.roster-signups-page .roster-bulk-bar .rbulk-count { font-weight: 700; font-size: 13px; color: var(--primary, #b41f51); margin-right: 6px; }
.roster-signups-page .roster-bulk-bar .rbulk-btn { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border, #e5e7eb); background: var(--surface); color: var(--text, #111); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .15s; }
.roster-signups-page .roster-bulk-bar .rbulk-btn:hover { background: var(--surface-hover, #f8f8f8); }
.roster-signups-page .roster-bulk-bar .rbulk-danger { color: #b91c1c; border-color: #f3c9c9; }
.roster-signups-page .roster-bulk-bar .rbulk-danger:hover { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.roster-signups-page .roster-bulk-bar .rbulk-ghost { margin-left: auto; color: var(--text-muted, #6b7280); }
.cal-wrap { display: flex; flex-direction: column; gap: 16px; }
.cal-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cal-title { font-size: 24px; font-weight: 800; color: var(--text); margin: 0; letter-spacing: -.4px; }
.cal-sub { font-size: 13.5px; color: var(--text-secondary); margin: 3px 0 0; }
.cal-top-right { display: flex; align-items: center; gap: 10px; }
.cal-seg { display: inline-flex; background: var(--surface-active); border-radius: var(--radius-full); padding: 3px; }
.cal-seg button { border: none; background: none; padding: 6px 16px; font-size: 13px; font-weight: 600; color: var(--text-secondary); border-radius: var(--radius-full); cursor: pointer; transition: var(--transition); }
.cal-seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.cal-add { border: none; background: var(--primary); color: #fff; font-weight: 700; font-size: 13.5px; padding: 9px 18px; border-radius: var(--radius-full); cursor: pointer; box-shadow: 0 2px 8px rgba(var(--primary-rgb), .28); transition: var(--transition); }
.cal-add:hover { background: var(--primary-hover); transform: translateY(-1px); }
.cal-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-nav button { width: 34px; height: 34px; border: 1px solid var(--border-light); background: var(--surface); border-radius: var(--radius); font-size: 18px; line-height: 1; color: var(--text); cursor: pointer; display: grid; place-items: center; transition: var(--transition); }
.cal-nav button:hover { background: var(--surface-hover); border-color: var(--border-hover); }
.cal-month { font-size: 18px; font-weight: 800; color: var(--text); min-width: 168px; text-align: center; letter-spacing: -.2px; }
.cal-today-btn { width: auto !important; padding: 0 14px; font-size: 13px !important; font-weight: 700; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 7px; }
.cal-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-light); background: var(--surface); border-radius: var(--radius-full); padding: 5px 11px; font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; transition: var(--transition); }
.cal-chip:hover { border-color: var(--border-hover); }
.cal-chip-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cc); flex-shrink: 0; }
.cal-chip-n { color: var(--text-muted); font-weight: 700; font-size: 11px; }
.cal-chip.off { opacity: .45; }
.cal-chip.off .cal-chip-dot { background: var(--text-muted); }
.cal-gcal { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 10px 14px; font-size: 13px; }
.cal-gcal-ok { color: var(--text); font-weight: 600; }
.cal-gcal-ok b { font-weight: 700; }
.cal-gcal-hint { color: var(--text-muted); font-size: 12px; }
.cal-gcal-sep { color: var(--border); }
.cal-gcal-btn { display: inline-flex; align-items: center; gap: 6px; background: #4285f4; color: #fff; font-weight: 700; font-size: 12.5px; padding: 7px 14px; border-radius: var(--radius-full); text-decoration: none; transition: var(--transition); }
.cal-gcal-btn:hover { background: #3367d6; }
.cal-gcal-btn.alt { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.cal-gcal-btn.alt:hover { border-color: var(--border-hover); background: var(--surface-hover); }
.cal-gcal-link { color: var(--text-muted); font-size: 12px; text-decoration: underline; }
.cal-gcal-link:hover { color: var(--danger); }
.cal-grid { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-wd-row { border-bottom: 1px solid var(--border-light); background: var(--surface); }
.cal-wd { padding: 11px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); }
.cal-wd:nth-child(7) { color: var(--primary); }
.cal-day { position: relative; min-height: 122px; padding: 7px 8px 8px; border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 4px; }
.cal-week:last-child .cal-day { border-bottom: none; }
.cal-day:nth-child(7n) { border-right: none; }
.cal-day.muted { background: color-mix(in srgb, var(--canvas) 55%, transparent); }
.cal-day.muted .cal-daynum { color: var(--text-muted); }
.cal-day.shabbat { background: color-mix(in srgb, #ff9500 5%, var(--surface)); }
.cal-day-rest { position: absolute; inset: 0; border: none; background: none; cursor: pointer; z-index: 0; }
.cal-day-rest:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.cal-daynum { position: relative; z-index: 1; align-self: flex-end; min-width: 26px; height: 26px; padding: 0 6px; border: none; background: none; font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; border-radius: var(--radius-full); display: inline-grid; place-items: center; }
.cal-daynum:hover { background: var(--surface-active); }
.cal-day.today .cal-daynum { background: var(--primary); color: #fff; }
.cal-items { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; }
.cal-ev { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; text-align: left; border: none; cursor: pointer; font-family: inherit; background: color-mix(in srgb, var(--ec) 12%, var(--surface)); color: var(--text); border-radius: 6px; padding: 3px 7px; transition: background .15s; }
.cal-ev:hover { background: color-mix(in srgb, var(--ec) 22%, var(--surface)); }
.cal-ev-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ec); flex-shrink: 0; }
.cal-ev-time { font-size: 10.5px; font-weight: 700; color: var(--ec); flex-shrink: 0; }
.cal-ev-title { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cal-ev-pub { font-size: 9px; margin-left: auto; opacity: .7; flex-shrink: 0; }
.cal-ev.is-done { opacity: .55; }
.cal-ev.is-done .cal-ev-title { text-decoration: line-through; }
.cal-ev.is-compact { gap: 5px; padding: 2px 6px; }
.cal-ev.is-compact .cal-ev-time { font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cal-ev.is-compact .cal-ev-title { font-size: 11.5px; }
.cal-lane { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; padding: 5px 8px 0; background: var(--surface); }
.cal-span { grid-row: 1; height: 19px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: none; cursor: pointer; font-family: inherit; text-align: left;
background: color-mix(in srgb, var(--ec) 20%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ec) 42%, transparent);
border-radius: var(--radius-full); color: color-mix(in srgb, var(--ec) 74%, var(--text));
font-size: 11px; font-weight: 800; white-space: nowrap; overflow: hidden; transition: background .15s; }
.cal-span:hover, .cal-span:focus-visible { background: color-mix(in srgb, var(--ec) 34%, var(--surface)); }
.cal-span.opens-l { border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-left-style: dashed; }
.cal-span.opens-r { border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-right-style: dashed; }
.cal-span-d { font-weight: 700; opacity: .72; }
.cal-span-cont { opacity: .6; font-weight: 700; font-style: italic; }
.cal-more { position: relative; z-index: 1; align-self: flex-start; border: none; background: none; color: var(--text-muted); font-size: 11px; font-weight: 700; cursor: pointer; padding: 1px 6px; border-radius: 5px; }
.cal-more:hover { background: var(--surface-active); color: var(--text); }
.cal-ev.is-row { background: var(--surface); border: 1px solid var(--border-light); border-left: 3px solid var(--ec); border-radius: var(--radius); padding: 9px 12px; gap: 9px; }
.cal-ev.is-row:hover { background: var(--surface-hover); border-color: var(--border); }
.cal-ev.is-row .cal-ev-title { font-size: 13.5px; font-weight: 700; white-space: normal; }
.cal-ev.is-row .cal-ev-time { font-size: 12px; }
.cal-ev-meta { font-size: 11.5px; color: var(--text-muted); margin-left: auto; white-space: nowrap; flex-shrink: 0; }
.cal-agenda { display: flex; flex-direction: column; gap: 4px; }
.cal-ag-day { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 12px 6px; border-top: 1px solid var(--border-light); }
.cal-ag-day:first-child { border-top: none; }
.cal-ag-date { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.cal-ag-date .wd { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); }
.cal-ag-date .dd { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.05; }
.cal-ag-date .mm { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.cal-ag-day.today .cal-ag-date .dd, .cal-ag-day.today .cal-ag-date .wd { color: var(--primary); }
.cal-ag-items { display: flex; flex-direction: column; gap: 6px; }
.cal-empty { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-lg); padding: 36px; text-align: center; color: var(--text-muted); font-size: 14px; }
.cal-dp-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.32); backdrop-filter: blur(2px); z-index: 35; display: flex; align-items: center; justify-content: center; padding: 20px; animation: calDpFade .18s ease backwards; }
.cal-dp { width: 100%; max-width: 460px; max-height: 84vh; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); display: flex; flex-direction: column; overflow: hidden; animation: calDpRise .3s cubic-bezier(.16,.84,.3,1) backwards; }
.cal-dp.is-narrow { max-width: 400px; }
@keyframes calDpFade { from { opacity: 0; } }
@keyframes calDpRise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
body:has(.cal-dp-backdrop) .aic-fab { display: none; }
@media (max-width: 560px) {
.cal-dp-backdrop { align-items: flex-end; padding: 0; }
.cal-dp, .cal-dp.is-narrow { max-width: none; max-height: 88vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); animation-name: calDpSheet; animation-duration: .34s; }
@keyframes calDpSheet { from { transform: translateY(100%); } }
}
.cal-dp-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--border-light); }
.cal-dp-when { display: flex; flex-direction: column; }
.cal-dp-when span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--primary); }
.cal-dp-when b { font-size: 19px; font-weight: 800; color: var(--text); }
.cal-dp-x { border: none; background: var(--surface-active); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; color: var(--text-secondary); font-size: 13px; }
.cal-dp-x:hover { background: var(--border-light); }
.cal-dp-items { flex: 1; overflow-y: auto; padding: 14px 20px; display: flex; flex-direction: column; gap: 7px; }
.cal-dp-empty { color: var(--text-muted); font-size: 13px; text-align: center; padding: 18px 0; }
.cal-dp-skips { display: flex; flex-direction: column; gap: 6px; padding: 10px 20px 12px; border-top: 1px solid var(--border-light); }
.cal-skip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-secondary); }
.cal-skip b { color: var(--text); font-weight: 700; }
.cal-skip-what { flex: 1 1 180px; min-width: 0; }
.cal-skip.is-off .cal-skip-what { color: var(--text-muted); }
.cal-skip-reason { flex: 2 1 200px; min-width: 0; font: inherit; font-size: 12.5px; padding: 6px 10px; border: 1px solid var(--border-light); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.cal-skip-reason:focus { outline: none; border-color: var(--primary); }
.cal-skip-btn { flex: none; font: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: var(--radius-full); border: 1px solid var(--border-light); background: var(--surface); color: var(--text); cursor: pointer; transition: var(--transition); }
.cal-skip-btn:hover, .cal-skip-btn:focus-visible { border-color: var(--border-hover); background: var(--surface-hover); }
.cal-skip-btn.is-go { color: var(--text-secondary); }
.cal-skip-btn.is-go:hover, .cal-skip-btn.is-go:focus-visible { color: var(--danger); border-color: var(--danger); }
.cal-skip-hint { margin: 2px 0 0; font-size: 11.5px; color: var(--text-muted); }
.cal-dp-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 14px 20px 18px; border-top: 1px solid var(--border-light); }
.cal-dp-act { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none; transition: var(--transition); }
.cal-dp-act span { font-size: 18px; }
.cal-dp-act:hover { border-color: var(--border-hover); background: var(--surface-hover); transform: translateY(-1px); }
.cal-dp.is-create .cal-dp-actions { order: -1; border-top: none; border-bottom: 1px solid var(--border-light); padding-top: 16px; }
.cal-dp.is-create .cal-dp-items { padding-top: 12px; }
.cal-dp-act.ev:hover { border-color: var(--primary); }
.cal-dp-act.mtg:hover { border-color: #8b5cf6; }
.cal-mp-act { display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 14px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left; transition: var(--transition); }
.cal-mp-act:hover { background: var(--surface-hover); border-color: var(--border-hover); }
.cal-mp-act span { font-size: 16px; }
.cal-mp-danger { color: var(--danger); border-color: rgba(255, 59, 48, .25); }
.cal-mp-danger:hover { background: var(--danger-bg); border-color: #fecaca; }
[x-cloak] { display: none !important; }
@media (max-width: 820px) {
.cal-day { min-height: 92px; }
.cal-ev-title { font-size: 11px; }
.cal-wd { padding: 8px 6px; }
}
@media (max-width: 640px) {
.cal-day { min-height: 58px; padding: 4px 3px 5px; gap: 3px; }
.cal-daynum { align-self: center; min-width: 20px; height: 20px; font-size: 11.5px; padding: 0; }
.cal-wd { padding: 7px 2px; font-size: 9.5px; letter-spacing: .3px; text-align: center; }
.cal-items { flex-direction: row; flex-wrap: wrap; gap: 3px; justify-content: center; }
.cal-items .cal-ev { width: auto; padding: 0; background: none !important; }
.cal-items .cal-ev-time,
.cal-items .cal-ev-title,
.cal-items .cal-ev-pub { display: none; }
.cal-items .cal-ev-dot { width: 7px; height: 7px; }
.cal-more { align-self: center; font-size: 9.5px; padding: 0 4px; }
}
.cal-avail {
background: var(--surface); border: 1px solid var(--border-light);
border-radius: var(--radius-md); padding: 16px 18px; margin-top: 16px;
}
.cal-avail h3 { margin: 0 0 2px; font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.cal-avail h3 .n {
background: var(--primary); color: #fff; font-size: 11.5px; font-weight: 800;
min-width: 20px; text-align: center; padding: 1px 7px; border-radius: var(--radius-full);
}
.cal-avail .sub { margin: 0 0 12px; font-size: 12.5px; color: var(--text-muted); }
.cal-avail--queue { border-color: color-mix(in srgb, var(--primary) 35%, var(--border-light)); }
.cal-avail-rows { display: flex; flex-direction: column; gap: 8px; }
.cal-avail-row {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 10px 12px; border: 1px solid var(--border-light);
border-radius: var(--radius); background: var(--surface-hover);
font-size: 13px; transition: var(--transition);
}
.cal-avail-row:hover { border-color: var(--border); }
.cal-avail-row.is-off { opacity: .55; }
.cal-avail-row .w { flex: 1 1 auto; min-width: 0; }
.cal-avail-row .muted { color: var(--text-muted); font-size: 12.5px; }
.cal-avail-row button {
border: 1px solid var(--border-light); background: var(--surface); color: var(--text);
font: inherit; font-size: 12px; font-weight: 700; padding: 5px 12px;
border-radius: var(--radius-full); cursor: pointer; transition: var(--transition);
}
.cal-avail-row button:hover { border-color: var(--primary); color: var(--primary); }
.cal-avail-row button.danger:hover { border-color: #dc2626; color: #dc2626; }
.cal-avail-go {
border: none !important; background: var(--primary) !important; color: #fff !important;
font-weight: 700; padding: 7px 16px !important; border-radius: var(--radius-full);
cursor: pointer; box-shadow: 0 2px 8px rgba(var(--primary-rgb), .28); transition: var(--transition);
}
.cal-avail-go:hover { background: var(--primary-hover) !important; transform: translateY(-1px); }
.cal-avail-warn {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
background: var(--warning-bg, rgba(245, 158, 11, .12));
border: 1px solid rgba(245, 158, 11, .35);
border-radius: var(--radius); padding: 11px 14px; font-size: 13px; margin-bottom: 12px;
}
.cal-avail-warn b { font-weight: 800; }
.cal-avail-actions { display: inline-flex; gap: 8px; margin-left: auto; }
.cal-avail-warn button {
border: 1px solid rgba(245, 158, 11, .5); background: var(--surface); color: var(--text);
font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 14px;
border-radius: var(--radius-full); cursor: pointer; transition: var(--transition);
}
.cal-avail-warn button:hover { border-color: var(--primary); color: var(--primary); }
.cal-roster-row { gap: 12px; }
.cal-roster-row .w { display: flex; align-items: center; gap: 8px; flex: 1 1 40%; }
.cal-roster-hours { flex: 0 1 auto; margin-left: auto; }
.cal-roster-you {
font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
color: var(--primary); background: rgba(var(--primary-rgb), .12);
padding: 2px 7px; border-radius: var(--radius-full);
}
.cal-roster-pill {
font-size: 11.5px; font-weight: 800; padding: 3px 10px;
border-radius: var(--radius-full); white-space: nowrap;
}
.cal-roster-pill.st-bookable { color: #16a34a; background: rgba(22, 163, 74, .13); }
.cal-roster-pill.st-blocked { color: #b45309; background: rgba(245, 158, 11, .17); }
.cal-roster-pill.st-idle { color: var(--text-muted); background: var(--surface-hover); }
.cal-roster-row.is-idle { opacity: .72; }
.cal-roster-row.is-idle:hover { opacity: 1; }
.cal-roster-row.is-blocked { border-color: rgba(245, 158, 11, .45); }
.cal-sched-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cal-sched-head h3 { margin: 0; }
.cal-sched-back {
border: 1px solid var(--border-light); background: var(--surface); color: var(--text-muted);
font: inherit; font-size: 12px; font-weight: 700; padding: 5px 12px;
border-radius: var(--radius-full); cursor: pointer; transition: var(--transition);
}
.cal-sched-back:hover { border-color: var(--primary); color: var(--primary); }
.cal-sched-opts {
display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
padding: 12px 14px; margin-bottom: 12px;
border: 1px solid var(--border-light); border-radius: var(--radius);
background: var(--surface-hover); font-size: 12.5px;
}
.cal-sched-opts label { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-weight: 700; }
.cal-sched-opts input[type="number"],
.cal-sched-opts input[type="time"] {
border: 1px solid var(--border-light); background: var(--surface); color: var(--text);
font: inherit; font-size: 13px; padding: 6px 9px; border-radius: var(--radius);
transition: var(--transition);
}
.cal-sched-opts input:focus { outline: none; border-color: var(--primary); }
.cal-sched-opts input[type="number"] { width: 64px; }
.cal-sched-opts input[type="time"] { width: 112px; }
.cal-sched-check { cursor: pointer; }
.cal-sched-when { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--text-muted); font-weight: 700; }
.cal-sched-week { display: flex; flex-direction: column; gap: 6px; }
.cal-sched-day {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 9px 12px; border: 1px solid var(--border-light);
border-radius: var(--radius); background: var(--surface);
font-size: 13px; transition: var(--transition);
}
.cal-sched-day:hover { border-color: var(--border); }
.cal-sched-day.is-empty { background: var(--surface-hover); }
.csd-name { flex: 0 0 96px; font-weight: 800; }
.csd-slots { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.csd-none { color: var(--text-muted); font-size: 12.5px; }
.csd-slot {
display: inline-flex; align-items: center;
border: 1px solid rgba(var(--primary-rgb), .3); background: rgba(var(--primary-rgb), .09);
border-radius: var(--radius-full); overflow: hidden; transition: var(--transition);
}
.csd-slot.is-off { opacity: .5; }
.csd-time {
border: 0; background: none; color: var(--text); font: inherit;
font-size: 12.5px; font-weight: 700; padding: 4px 4px 4px 12px; cursor: pointer;
}
.csd-x {
border: 0; background: none; color: var(--text-muted); font: inherit;
font-size: 15px; line-height: 1; padding: 4px 10px 5px 6px; cursor: pointer; transition: var(--transition);
}
.csd-x:hover { color: #dc2626; }
.csd-actions { display: inline-flex; gap: 6px; margin-left: auto; }
.csd-add, .csd-copy {
border: 1px solid var(--border-light); background: var(--surface); color: var(--text-muted);
font: inherit; font-size: 12px; font-weight: 700; padding: 5px 12px;
border-radius: var(--radius-full); cursor: pointer; transition: var(--transition);
}
.csd-add:hover, .csd-copy:hover { border-color: var(--primary); color: var(--primary); }
@media (max-width: 640px) {
.cal-avail { padding: 14px; }
.cal-avail-row { align-items: flex-start; }
.cal-avail-row .w { flex: 1 1 100%; }
.cal-avail-actions { margin-left: 0; }
.cal-roster-hours { margin-left: 0; }
.cal-sched-opts { gap: 10px; }
.cal-sched-when { margin-left: 0; }
.csd-name { flex: 1 1 100%; }
.csd-actions { margin-left: 0; }
}
.cal-avail-name { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; border-bottom: 1px solid transparent; transition: var(--transition); }
.cal-avail-name:hover { color: var(--primary); border-bottom-color: currentColor; }
.cal-legend { align-items: center; position: relative; }
.cal-manage-btn { width: 30px; height: 30px; border: 1px solid var(--border-light); background: var(--surface); border-radius: 50%; font-size: 14px; color: var(--text-secondary); cursor: pointer; display: grid; place-items: center; transition: var(--transition); }
.cal-manage-btn:hover { background: var(--surface-hover); border-color: var(--border-hover); color: var(--text); }
.cal-overlay-mgr { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; min-width: 260px; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.12)); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.cal-overlay-row { display: flex; align-items: center; gap: 8px; }
.cal-overlay-row input[type="color"] { width: 22px; height: 22px; padding: 0; border: 1px solid var(--border-light); border-radius: 5px; cursor: pointer; flex-shrink: 0; }
.cal-overlay-label { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--text); }
.cal-overlay-icon-btn { border: none; background: none; color: var(--text-muted); font-size: 13px; cursor: pointer; width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; }
.cal-overlay-icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.cal-overlay-icon-btn.danger:hover { color: var(--danger); }
.cal-overlay-add { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border-light); }
.cal-overlay-add input[type="text"] { flex: 1; min-width: 0; border: 1px solid var(--border-light); background: var(--bg); border-radius: 5px; padding: 5px 8px; font-size: 12px; color: var(--text); }
.cal-overlay-add input[type="color"] { width: 22px; height: 22px; padding: 0; border: 1px solid var(--border-light); border-radius: 5px; cursor: pointer; flex-shrink: 0; }
.cal-overlay-add button { border: none; background: var(--primary); color: var(--text-inverse); font-weight: 700; font-size: 11.5px; padding: 5px 10px; border-radius: 5px; cursor: pointer; white-space: nowrap; }
.cal-overlay-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border-light); }
.cal-overlay-cal { font-size: 11px; font-weight: 600; color: var(--text-secondary); background: var(--bg); border: 1px solid var(--border-light); border-radius: 6px; padding: 2px 5px; max-width: 108px; }
.cal-admin-toggle { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.cal-admin-toggle input { cursor: pointer; }
.cal-legend-sub { margin-top: 6px; }
.cal-legend-sub .cal-chip { padding: 4px 10px; font-size: 11.5px; }
.cal-legend-cals { margin-bottom: 4px; }
.cal-chip-cal { gap: 7px; }
.cal-chip-box { width: 13px; height: 13px; border-radius: 4px; flex-shrink: 0; border: 1.5px solid var(--cc); background: var(--cc); display: grid; place-items: center; }
.cal-chip-box::after { content: "✓"; font-size: 9px; font-weight: 900; color: var(--text-inverse); line-height: 1; }
.cal-chip-cal.off .cal-chip-box { background: transparent; }
.cal-chip-cal.off .cal-chip-box::after { content: ""; }
.cal-chip-newcal { border-style: dashed; color: var(--text-muted); }
.cal-chip-newcal:hover { border-style: solid; border-color: var(--primary); color: var(--primary); }
.cal-ev-wrap { display: flex; align-items: center; gap: 3px; width: 100%; }
.cal-ev-wrap .cal-ev { width: auto; flex: 1; min-width: 0; }
.cal-ev-check { flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; font-size: 13px; color: var(--text-muted); padding: 0; line-height: 1; }
.cal-ev-check.is-checked { color: var(--success); }
.cal-wall {
--bg: var(--canvas);
--panel: var(--surface);
--cell-solid: var(--surface);
--cell: var(--surface);
--cell-alt: var(--surface-hover);
--line: var(--border-light);
--line-soft: var(--border-light);
--ink: var(--text);
--ink-2: var(--text-secondary);
--ink-3: var(--text-muted);
--glow-a: rgba(var(--primary-rgb), .10);
--glow-b: rgba(13, 148, 136, .10);
--chip-mix: 14%;
--shadow: var(--shadow-lg);
position: relative; z-index: 0;
height: var(--cw-h, calc(100vh - 12rem)); min-height: 520px;
display: flex; flex-direction: column; overflow: hidden;
font-family: var(--font-sans); color: var(--ink);
border-radius: var(--radius-lg); border: 1px solid var(--border-light);
padding: 12px 16px 10px;
background:
radial-gradient(1150px 540px at 10% -12%, var(--glow-a), transparent 62%),
radial-gradient(950px 470px at 92% 2%, var(--glow-b), transparent 60%),
var(--bg);
}
.cal-wall.is-full {
position: fixed; inset: 0; z-index: 20;
height: auto; min-height: 0; border: 0; border-radius: 0;
padding: 14px 18px 10px;
}
body.cw-full .fi-topbar-ctn,
body.cw-full .fi-topbar,
body.cw-full .fi-sidebar { display: none !important; }
body.cw-full .fi-main-ctn, body.cw-full .fi-main { padding: 0 !important; margin: 0 !important; }
body.cw-full { overflow: hidden; }
html.dark .cal-wall {
--cell-solid: #151922;
--glow-a: rgba(var(--primary-rgb), .17);
--glow-b: rgba(13, 148, 136, .15);
--chip-mix: 26%;
}
.cal-wall * { box-sizing: border-box; }
.cal-wall button { font-family: inherit; border: 0; background: none; color: inherit; cursor: pointer; }
.cal-wall .cw-l-light { display: none; }
html.dark .cal-wall .cw-l-dark { display: none; }
html.dark .cal-wall .cw-l-light { display: inline; }
.cal-wall .cw-top {
position: relative; z-index: 4; display: flex; align-items: center; gap: 10px;
flex-wrap: nowrap; padding: 2px 0 9px; margin-bottom: 8px;
border-bottom: 1px solid var(--line);
}
.cal-wall .cw-sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cal-wall .cw-sheen::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(105deg, transparent 38%, rgba(140,160,200,.09) 50%, transparent 62%);
transform: translateX(-100%); animation: sheen 8s ease-in-out infinite;
}
@keyframes sheen { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
.cal-wall .cw-live { display: inline-flex; align-items: center; flex-shrink: 0; }
.cal-wall .cw-live i {
width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
box-shadow: 0 0 0 0 rgba(var(--primary-rgb), .55); animation: pinglive 2.4s ease-out infinite;
}
@keyframes pinglive {
0% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), .5); }
70%, 100% { box-shadow: 0 0 0 9px rgba(var(--primary-rgb), 0); }
}
.cal-wall .cw-top h1 {
font-size: clamp(19px, 1.65vw, 26px); font-weight: 300; margin: 0;
letter-spacing: -.8px; line-height: 1; white-space: nowrap; flex-shrink: 0;
}
.cal-wall .cw-top h1 b { font-weight: 800; }
.cal-wall .cw-camp {
display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700;
color: var(--ink-3); letter-spacing: .2px; white-space: nowrap; flex-shrink: 0;
}
.cal-wall .cw-proto {
padding: 1px 8px; border-radius: 999px; font-size: 9.5px; font-weight: 700;
color: var(--ink-2); background: var(--cell-alt); border: 1px dashed var(--line);
}
.cal-wall .cw-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cal-wall .cw-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 30px; min-width: 30px; padding: 0 11px; cursor: pointer; user-select: none;
border: 1px solid var(--line); background: var(--panel); color: var(--ink);
border-radius: var(--radius); font-size: 12px; font-weight: 700; font-family: inherit;
transition: var(--transition);
}
.cal-wall .cw-btn:hover, .cal-wall .cw-btn:focus-visible, .cal-wall .cw-btn:active { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.cal-wall .cw-btn.icon { padding: 0; font-size: 15px; }
.cal-wall .cw-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 3px 12px rgba(var(--primary-rgb), .3); }
.cal-wall .cw-btn.primary:hover, .cal-wall .cw-btn.primary:focus-visible { background: var(--primary-hover); color: #fff; }
.cal-wall .cw-btn.is-on { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--panel)); }
.cal-wall .cw-btn:active { transform: scale(.96); }
.cal-wall .cw-tools { display: flex; align-items: center; gap: 5px; margin-left: auto; flex-shrink: 0; }
.cal-wall .cw-pop { position: relative; }
.cal-wall .cw-pop-panel:not(.is-open) { display: none; }
.cal-wall .cw-pop-panel.is-open { animation: cwDrop .2s cubic-bezier(.16,.84,.3,1) backwards; }
.cal-wall .cw-seg {
position: relative; isolation: isolate; display: inline-flex; flex: none; gap: 2px; padding: 2px;
border-radius: var(--radius-full); background: var(--cell-alt); border: 1px solid var(--line);
}
.cal-wall .cw-seg-ink {
position: absolute; top: 2px; bottom: 2px; left: 0; z-index: -1; pointer-events: none;
border-radius: var(--radius-full); background: var(--primary);
box-shadow: 0 2px 10px rgba(var(--primary-rgb), .32);
transition: transform .34s cubic-bezier(.3,1.25,.45,1), width .34s cubic-bezier(.3,1.25,.45,1), opacity .2s ease;
}
.cal-wall .cw-seg button { position: relative; padding: 4px 10px; border-radius: var(--radius-full); font-size: 11.5px; font-weight: 700; color: var(--ink-3); white-space: nowrap; transition: color .2s ease; }
.cal-wall .cw-seg button:hover, .cal-wall .cw-seg button:focus-visible { color: var(--ink); }
.cal-wall .cw-seg button.on { background: var(--primary); color: #fff; }
.cal-wall .cw-seg.has-ink button.on { background: transparent; }
.cal-wall:not(.is-full) .cw-camp { display: none; }
.cal-wall:not(.is-full) .cw-seg button { padding: 4px 9px; font-size: 11px; }
@property --cw-fl { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --cw-fr { syntax: '<length>'; inherits: false; initial-value: 0px; }
.cal-wall .cw-strip {
flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px;
overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 2px 0;
-webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.cal-wall .cw-strip::-webkit-scrollbar { display: none; }
.cal-wall .cw-strip.is-hidden { display: none; }
@supports (animation-timeline: scroll()) {
.cal-wall .cw-strip {
mask-image: linear-gradient(to right, transparent, black var(--cw-fl), black calc(100% - var(--cw-fr)), transparent);
animation: cwStripEdges linear both; animation-timeline: scroll(self inline);
}
}
@keyframes cwStripEdges {
0% { --cw-fl: 0px; --cw-fr: 34px; }
4% { --cw-fl: 22px; }
96% { --cw-fr: 22px; }
100% { --cw-fl: 34px; --cw-fr: 0px; }
}
.cal-wall .cw-filters { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; flex: none; }
.cal-wall .cw-strip .cw-cals { flex-wrap: nowrap; flex: none; }
.cal-wall .cw-chip, .cal-wall .cw-cal-pill, .cal-wall .cw-pub { flex: none; }
.cal-wall .cw-chip.is-empty:not(.is-off) { color: var(--ink-2); }
.cal-wall .cw-chip.is-empty .cw-n { display: none; }
.cal-wall .cw-chip.is-sub { font-weight: 600; border-style: dashed; }
.cal-wall .cw-chip.is-pending { opacity: .55; transform: scale(.96); }
.cal-wall .cw-chip {
display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none;
border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius-full);
padding: 4px 8px; font-size: 11.5px; font-weight: 700; color: var(--ink);
white-space: nowrap; transition: var(--transition);
}
.cal-wall .cw-chip:hover, .cal-wall .cw-chip:focus-visible { border-color: var(--cc); transform: translateY(-1px); }
.cal-wall .cw-chip .cw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cc); flex-shrink: 0; transition: var(--transition); }
.cal-wall .cw-chip .cw-n {
font-size: 11px; font-weight: 800; color: var(--cc);
background: color-mix(in srgb, var(--cc) 13%, var(--panel));
border-radius: 999px; padding: 0 6px; min-width: 18px; text-align: center;
}
.cal-wall .cw-pub {
display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
color: #0071e3; background: color-mix(in srgb, #0071e3 10%, var(--panel));
border: 1px solid color-mix(in srgb, #0071e3 24%, var(--panel));
border-radius: var(--radius-full); padding: 4px 10px; white-space: nowrap;
}
.cal-wall.is-full .cw-body.is-wall { grid-template-columns: 296px minmax(0,1fr); }
.cal-wall .cw-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 244px minmax(0,1fr); grid-template-rows: minmax(0, 1fr); gap: 16px; transition: grid-template-columns .28s ease; }
.cal-wall .cw-body.is-narrow { grid-template-columns: 0 minmax(0,1fr); gap: 0; }
.cal-wall .cw-body.is-narrow .cw-rail { opacity: 0; pointer-events: none; }
.cal-wall .cw-rail { transition: opacity .2s ease; }
.cal-wall .cw-rail { display: flex; flex-direction: column; gap: 7px; min-width: 0; overflow: hidden; }
.cal-wall .cw-rail h2 { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-3); margin: 0 0 1px; }
.cal-wall .cw-rail h2.b { margin-top: 10px; }
.cal-wall .cw-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; min-height: 0; overflow: hidden; }
.cal-wall .cw-list li { cursor: pointer; }
.cal-wall .cw-list li:hover { border-color: var(--ec); transform: translateX(2px); }
.cal-wall .cw-list li {
display: grid; gap: 1px; padding: 7px 11px; border-radius: var(--radius);
background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--ec);
animation: slideIn .6s ease both; animation-delay: calc(var(--i) * .06s + .18s);
}
@keyframes slideIn { from { opacity: 0; transform: translateX(-13px); } to { opacity: 1; transform: none; } }
.cal-wall .cw-list li { transition: transform .18s ease, border-color .18s ease; }
.cal-wall .cw-list .k { font-size: 9.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--ec); }
.cal-wall .cw-list .t { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.cal-wall .cw-list .s { font-size: 11px; color: var(--ink-3); }
.cal-wall .cw-list .more { border-left-color: var(--line) !important; font-size: 11.5px; font-weight: 700; color: var(--ink-3); text-align: center; }
.cal-wall .cw-empty { color: var(--ink-3); font-size: 12.5px; padding: 8px 2px; }
.cal-wall .cw-none { display: none; }
.fhint-inline { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.cal-wall .cw-cal { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cal-wall .cw-wd { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 3px; padding-bottom: 6px; }
.cal-wall .cw-wd span { font-size: 10px; font-weight: 800; letter-spacing: 1.6px; color: var(--ink-3); }
.cal-wall .cw-wd span:last-child { color: #d97706; }
.cal-wall .cw-grid {
flex: 1; min-height: 0; display: grid; gap: 3px;
grid-template-rows: repeat(var(--cw-rows, 6), minmax(0,1fr));
border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line);
background: var(--line-soft);
}
.cal-wall:not(.is-full) { height: var(--cw-h, calc(100vh - 12rem)); min-height: 680px; }
.cal-wall:not(.is-full) .cw-grid { min-height: 0; grid-template-rows: repeat(var(--cw-rows, 6), minmax(0, 1fr)); }
.cal-wall .cw-week {
position: relative;
display: grid; min-height: 0;
grid-template-columns: repeat(7, minmax(0,1fr));
column-gap: 3px;
}
.cal-wall .cw-lane {
position: absolute; left: 0; right: 0; top: 24px; z-index: 3; pointer-events: none;
display: grid; grid-template-columns: repeat(7, minmax(0,1fr));
column-gap: 3px; row-gap: 2px; background: none; padding: 0;
}
.cal-wall .cal-span {
pointer-events: auto; margin: 0 4px;
height: 20px; font-size: 11px; padding: 0 11px; gap: 8px;
background: color-mix(in srgb, var(--ec) 24%, var(--cell));
border-color: color-mix(in srgb, var(--ec) 46%, transparent);
color: color-mix(in srgb, var(--ec) 78%, var(--ink));
box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.cal-wall .cal-span:hover, .cal-wall .cal-span:focus-visible { background: color-mix(in srgb, var(--ec) 38%, var(--cell)); }
.cal-wall .cw-day > .cw-num { margin-bottom: calc(var(--cw-bars, 0) * 22px); }
.cal-wall .cw-day {
position: relative; border-radius: 4px; padding: 5px 6px 5px;
background: var(--cell-solid); border: 0;
display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden;
animation: cellIn .5s ease both; animation-delay: calc(var(--i) * .011s + .22s);
transition: background .18s ease, box-shadow .18s ease;
}
.cal-wall .cw-day:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 45%, transparent); z-index: 2; }
@keyframes cellIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
.cal-wall .cw-day.out { opacity: .34; }
.cal-wall .cw-day.shab { background: color-mix(in srgb, #ff9500 8%, var(--cell-solid)); }
.cal-wall .cw-day.today { background: color-mix(in srgb, var(--primary) 10%, var(--cell-solid)); box-shadow: inset 0 0 0 2px var(--primary); }
.cal-wall .cw-day.today::after {
content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none;
box-shadow: 0 0 0 0 rgba(var(--primary-rgb), .4); animation: ping 2.6s ease-out infinite;
}
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), .45); } 70%,100% { box-shadow: 0 0 0 12px rgba(var(--primary-rgb), 0); } }
.cal-wall .cw-hit { position: absolute; inset: 0; z-index: 0; cursor: pointer; border-radius: 4px; }
.cal-wall .cw-hit::after {
content: ""; position: absolute; top: 5px; left: 6px; width: 18px; height: 18px;
border-radius: 5px; --cw-plus: 10px;
background:
linear-gradient(var(--on-primary), var(--on-primary)) center / var(--cw-plus) 2px no-repeat,
linear-gradient(var(--on-primary), var(--on-primary)) center / 2px var(--cw-plus) no-repeat,
var(--primary);
opacity: 0; transform: scale(.7);
transition: var(--transition);
}
.cal-wall .cw-hit:hover, .cal-wall .cw-hit:focus-visible { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.cal-wall .cw-hit:hover::after, .cal-wall .cw-hit:focus-visible::after { opacity: 1; transform: none; }
.cal-wall .cw-num { position: relative; z-index: 1; align-self: flex-end; display: inline-flex; align-items: baseline; gap: 5px; font-size: 14px; font-weight: 800; line-height: 1; pointer-events: none; }
.cal-wall .cw-day.today .cw-num { color: var(--primary); }
.cal-wall .cw-heb { font-size: 9.5px; font-weight: 700; letter-spacing: 0; color: var(--warning-text); white-space: nowrap; }
.cal-wall .cw-day.yomtov { background: color-mix(in srgb, var(--warning) 10%, var(--cell-solid)); }
.cal-wall .cw-day.today.is-flash::before {
content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 4px; pointer-events: none;
box-shadow: inset 0 0 0 3px var(--primary), 0 0 0 0 rgba(var(--primary-rgb), .5);
animation: cwFlash .9s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes cwFlash {
0% { opacity: 0; transform: scale(1.12); }
35% { opacity: 1; transform: scale(1); box-shadow: inset 0 0 0 3px var(--primary), 0 0 0 0 rgba(var(--primary-rgb), .5); }
100% { opacity: 0; box-shadow: inset 0 0 0 3px var(--primary), 0 0 0 14px rgba(var(--primary-rgb), 0); }
}
.cal-wall .cw-hit:active { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.cal-wall .cw-ev:active { transform: scale(.98); }
.cal-wall .cw-stack, .cal-wall .cw-loads, .cal-wall .cw-allday { pointer-events: none; }
.cal-wall .cw-ev, .cal-wall .cw-dmore, .cal-wall .cw-load { pointer-events: auto; }
.cal-wall .cw-stack { position: relative; z-index: 1; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 3px; }
.cal-wall .cw-ev[hidden], .cal-wall .cw-load[hidden] { display: none; }
.cal-wall .cw-ev {
display: flex; align-items: baseline; gap: 5px;
width: 100%; text-align: left; cursor: pointer;
border-radius: var(--radius-sm); padding: 2px 7px 3px;
border-left: 3px solid var(--ec);
background: color-mix(in srgb, var(--ec) var(--chip-mix), var(--cell));
transition: var(--transition);
}
.cal-wall .cw-ev:hover, .cal-wall .cw-ev:focus-visible, .cal-wall .cw-ev:active {
background: color-mix(in srgb, var(--ec) calc(var(--chip-mix) + 16%), var(--cell));
transform: translateX(2px); box-shadow: -2px 0 0 0 var(--ec);
}
.cal-wall .cw-ev .when {
flex: none; font-size: 9.5px; font-weight: 800; line-height: 1.6; letter-spacing: .4px;
font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--ec) 72%, var(--ink));
}
.cal-wall .cw-ev .name {
flex: 1; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font-size: 12.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.15px;
}
.cal-wall .cw-ev .globe { flex: none; font-size: 9px; line-height: 1.7; opacity: .75; }
.cal-wall .cw-dmore { font-size: 10px; font-weight: 700; color: var(--ink-3); padding-left: 2px; }
.cal-wall .cw-allday { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; margin: 1px -7px 1px; }
.cal-wall .cw-ad {
display: block; font-size: 9px; font-weight: 800; letter-spacing: .2px; line-height: 1.55;
padding: 1px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
border-radius: 999px; margin-inline: 3px;
color: color-mix(in srgb, var(--ec) 74%, var(--ink));
background: color-mix(in srgb, var(--ec) 13%, var(--cell));
border: 1px solid color-mix(in srgb, var(--ec) 30%, transparent);
}
.cal-wall .cw-ad.is-derived { border-style: dashed; }
.cal-wall .cw-ad.is-derived::after { content: " 🔒"; font-size: 8px; opacity: .5; }
.cal-wall .cw-loads { display: flex; flex: none; gap: 3px; flex-wrap: wrap; margin-top: auto; padding-top: 3px;
max-height: 48px; overflow: hidden; position: relative; z-index: 1; }
.cal-wall .cw-loads.is-tight { max-height: 24px; }
.cal-wall .cw-load {
display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 7px; cursor: pointer;
border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: .3px;
color: color-mix(in srgb, var(--ec) 68%, var(--ink));
background: color-mix(in srgb, var(--ec) 15%, var(--cell));
border: 1px solid color-mix(in srgb, var(--ec) 32%, var(--cell));
transition: var(--transition);
}
.cal-wall .cw-load:hover, .cal-wall .cw-load:focus-visible { background: color-mix(in srgb, var(--ec) 32%, var(--cell)); transform: translateY(-1px); border-color: var(--ec); }
.cal-wall .cw-load b { font-size: 11.5px; font-weight: 800; }
.cal-wall .cw-grid { transition: transform .2s cubic-bezier(.4,0,1,1), opacity .2s ease-in; }
.cal-wall .cw-grid.is-leaving-fwd { transform: translateX(-2.5%); opacity: .08; }
.cal-wall .cw-grid.is-leaving-back { transform: translateX(2.5%); opacity: .08; }
.cal-wall .cw-grid[data-dir="fwd"] { animation: cwFromRight .42s cubic-bezier(.16,.84,.3,1) backwards; }
.cal-wall .cw-grid[data-dir="back"] { animation: cwFromLeft .42s cubic-bezier(.16,.84,.3,1) backwards; }
.cal-wall .cw-grid[data-dir="fwd"] .cw-day, .cal-wall .cw-grid[data-dir="back"] .cw-day { animation: none; }
@keyframes cwFromRight { from { opacity: 0; transform: translateX(3.5%); } to { opacity: 1; transform: none; } }
@keyframes cwFromLeft { from { opacity: 0; transform: translateX(-3.5%); } to { opacity: 1; transform: none; } }
.cal-wall .cw-top h1 { transition: opacity .16s ease, transform .16s ease; }
.cal-wall .cw-top h1.is-leaving { opacity: 0; transform: translateY(-5px); }
.cal-wall .cw-top h1[data-dir="fwd"], .cal-wall .cw-top h1[data-dir="back"] { animation: cwTitleIn .42s cubic-bezier(.16,.84,.3,1) backwards; }
@keyframes cwTitleIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.cal-wall .cw-body { animation: cwBodyIn .4s cubic-bezier(.16,.84,.3,1) backwards; transition: grid-template-columns .28s ease, opacity .15s ease, transform .15s ease; }
.cal-wall .cw-body.is-leaving { opacity: 0; transform: translateY(8px); pointer-events: none; }
@keyframes cwBodyIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cwDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cal-wall .cw-progress {
position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; margin: 0;
overflow: hidden; pointer-events: none; border-radius: 2px;
background: color-mix(in srgb, var(--primary) 14%, transparent);
}
.cal-wall .cw-progress::after {
content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
background: linear-gradient(90deg, transparent, var(--primary), transparent);
animation: cwProgress 1.05s cubic-bezier(.45,0,.2,1) infinite;
}
@keyframes cwProgress { from { transform: translateX(-100%); } to { transform: translateX(270%); } }
.cal-wall .cw-find {
display: none; flex: 1 1 auto; min-width: 0; align-items: center; gap: 8px; height: 32px;
padding: 0 12px; border: 1px solid var(--primary); border-radius: var(--radius-full);
background: var(--panel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}
.cal-wall .cw-find.is-open { display: flex; animation: cwDrop .2s ease backwards; }
.cal-wall .cw-find input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; }
.cal-wall .cw-find input::-webkit-search-cancel-button { display: none; }
.cal-wall .cw-find-icon { color: var(--ink-3); font-size: 16px; line-height: 1; }
.cal-wall .cw-found {
position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 6;
max-height: min(60vh, 540px); overflow-y: auto; overscroll-behavior: contain;
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md);
box-shadow: var(--shadow-xl); animation: cwDrop .22s cubic-bezier(.16,.84,.3,1) backwards;
}
.cal-wall .cw-found.is-hidden { display: none; }
.cal-wall .cw-found-head { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.cal-wall .cw-found-head b { color: var(--ink); }
.cal-wall .cw-found-head span { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.cal-wall .cw-hit-row {
display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 14px;
border-top: 1px solid var(--line); background: var(--panel);
animation: cwDrop .3s ease backwards; animation-delay: calc(var(--i) * 25ms);
}
.cal-wall .cw-hit-row:first-of-type { border-top: 0; }
.cal-wall .cw-hit-row:hover, .cal-wall .cw-hit-row:focus-visible { background: var(--cell-alt); }
.cal-wall .cw-hit-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; background: var(--ec); }
.cal-wall .cw-hit-what { flex: 1; min-width: 0; }
.cal-wall .cw-hit-title { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.cal-wall .cw-hit-sub { display: block; font-size: 11px; color: var(--ink-2); }
.cal-wall .cw-hit-layer { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-2); white-space: nowrap; }
.cal-wall .cw-hit-when { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; min-width: 120px; text-align: right; }
.cal-wall .cw-found-none { padding: 16px 14px; font-size: 12.5px; color: var(--ink-2); }
.cal-wall .cw-body.is-meetings { grid-template-columns: minmax(320px, 390px) minmax(0, 1fr); }
.cal-wall .cw-side, .cal-wall .cw-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cal-wall .cw-side { display: flex; flex-direction: column; gap: 12px; padding-right: 4px; }
.cal-wall .cw-side .cal-avail { margin-top: 0; padding: 14px; }
.cal-wall .cw-side .cal-gcal { flex: none; }
.cal-wall .cw-body.is-classes { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
.cal-wall .cw-subbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal-wall .cw-subseg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-full); background: var(--cell-alt); border: 1px solid var(--line); }
.cal-wall .cw-subseg button { padding: 4px 12px; border-radius: var(--radius-full); font-size: 11.5px; font-weight: 700; color: var(--ink-3); transition: var(--transition); }
.cal-wall .cw-subseg button.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-sm); }
.cal-wall .cw-note { margin: 0; padding: 6px 12px; border-radius: var(--radius); background: var(--cell-alt); font-size: 12px; color: var(--ink-2); }
.fi-page-content:has(> .cal-wall) { row-gap: 0; }
body.cw-full .aic-fab { display: none; }
@media (max-width: 1240px) {
.cal-wall .cw-body.is-wall, .cal-wall .cw-body.is-wall.is-narrow { grid-template-columns: minmax(0, 1fr); gap: 0; }
.cal-wall .cw-rail { display: none; }
.cal-wall .cw-body.is-meetings { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; overscroll-behavior: contain; }
.cal-wall .cw-body.is-meetings .cw-cal { flex: none; height: 560px; }
.cal-wall .cw-body.is-meetings .cw-side { order: 2; overflow: visible; padding-right: 0; }
}
@media (max-width: 1599px) and (min-width: 781px) {
.cal-wall .cw-top { flex-wrap: wrap; row-gap: 8px; }
.cal-wall .cw-strip, .cal-wall .cw-find { order: 5; flex: 1 0 100%; }
}
@media (max-width: 780px) {
.app { padding: 10px 11px 12px; }
.stats { width: 100%; margin-left: 0; }
.stat { min-width: 0; flex: 1; padding: 7px 10px; }
.cal-wall { padding: 8px 9px 8px; border-radius: var(--radius); }
.cal-wall:not(.is-full) { height: var(--cw-h, calc(100dvh - 7rem)); min-height: 560px; }
.cal-wall .cw-top { flex-wrap: wrap; gap: 7px 8px; align-items: center; }
.cal-wall .cw-top h1 { font-size: 17px; }
.cal-wall .cw-live, .cal-wall .cw-camp, .cal-wall .cw-pub { display: none; }
.cal-wall .cw-nav { margin-left: auto; }
.cal-wall .cw-nav .cw-btn.icon { width: 30px; height: 30px; }
.cal-wall .cw-strip, .cal-wall .cw-find { order: 3; flex: 1 0 100%; }
.cal-wall .cw-strip { padding-bottom: 2px; }
.cal-wall .cw-seg {
order: 4; flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.cal-wall .cw-seg::-webkit-scrollbar { display: none; }
.cal-wall .cw-seg button, .cal-wall:not(.is-full) .cw-seg button { flex: none; padding: 5px 8px; }
.cal-wall .cw-seg-ic { display: none; }
.cal-wall .cw-tools { order: 5; margin-left: 0; gap: 5px; }
.cal-wall .cw-tools > * { flex: none; }
.cal-wall .cw-rail-btn, .cal-wall .cw-full-btn { display: none; }
.cal-wall .cw-tools .cw-btn.primary { width: 30px; padding: 0; font-size: 0; }
.cal-wall .cw-tools .cw-btn.primary::before { content: "＋"; font-size: 15px; }
.cal-wall .cw-found { max-height: 62vh; }
.cal-wall .cw-hit-row { flex-wrap: wrap; }
.cal-wall .cw-hit-when { min-width: 0; width: 100%; text-align: left; }
.cal-wall .cw-heb { display: none; }
@media (max-width: 380px) { .cal-wall .cw-theme-btn { display: none; } }
.cal-wall .cw-wd { padding-bottom: 4px; }
.cal-wall .cw-wd span { font-size: 9px; letter-spacing: .6px; text-align: center; }
.cal-wall .cw-grid { gap: 2px; }
.cal-wall:not(.is-full) .cw-grid { grid-template-rows: repeat(var(--cw-rows, 6), minmax(0, 1fr)); }
.cal-wall .cw-week { column-gap: 2px; }
.cal-wall .cw-body.is-meetings .cw-cal { height: 470px; }
.cal-wall .cw-subseg button { padding: 4px 10px; }
.cal-wall .cw-day { padding: 3px 3px 4px; gap: 2px; border-radius: 3px; }
.cal-wall .cw-num { font-size: 11px; align-self: center; }
.cal-wall .cw-hit::after { display: none; }
.cal-wall .cw-lane { top: 19px; row-gap: 1px; column-gap: 2px; }
.cal-wall .cal-span { height: 14px; font-size: 8.5px; padding: 0 6px; gap: 5px; margin: 0 2px; }
.cal-wall .cw-day > .cw-num { margin-bottom: calc(var(--cw-bars, 0) * 15px); }
.cal-wall .cw-stack { gap: 2px; }
.cal-wall .cw-ev { padding: 1px 3px 2px; gap: 3px; border-left-width: 2px; border-radius: 3px; }
.cal-wall .cw-ev .when, .cal-wall .cw-ev .globe { display: none; }
.cal-wall .cw-ev[data-layer^="class-"] { display: none; }
.cal-wall .cw-ev .name { font-size: 9px; line-height: 1.3; }
.cal-wall .cw-ad { font-size: 7.5px; line-height: 1.5; padding: 0 4px; margin-inline: 1px; }
.cal-wall .cw-allday { margin: 0 -3px; }
.cal-wall .cw-loads { gap: 2px; padding-top: 2px; max-height: 16px; }
.cal-wall .cw-load { padding: 0 4px; font-size: 7.5px; gap: 2px; letter-spacing: 0;
max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; }
.cal-wall .cw-load b { vertical-align: baseline; }
.cal-wall .cw-load b { font-size: 9px; }
.cal-wall .cw-load[data-layer^="class-"] { font-size: 0; padding: 0 5px; gap: 0; }
.cal-wall .cw-load[data-layer^="class-"] b { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
.cal-wall .cw-chip.is-off { opacity: .45; }
.cal-wall .cw-chip.is-off .cw-dot { background: var(--text-muted); }
.cal-wall .cw-chip.is-off .cw-n { color: var(--text-muted); background: var(--surface-active); }
.cal-wall .cw-list li > button { display: grid; gap: 1px; width: 100%; text-align: left; padding: 0; }
.cal-wall .cw-list li.cw-empty, .cal-wall .cw-list li.cw-more { border-left-color: var(--line); }
.cal-wall .cw-list li.cw-more button { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.cal-wall .cw-cals { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.cal-wall .cw-cal-pill {
display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius-full);
padding: 5px 12px 5px 10px; font-size: 12px; font-weight: 700; color: var(--ink);
white-space: nowrap; transition: var(--transition);
}
.cal-wall .cw-cal-pill:hover, .cal-wall .cw-cal-pill:focus-visible { border-color: var(--cc); transform: translateY(-1px); }
.cal-wall .cw-cal-pill .sw-box {
width: 14px; height: 14px; border-radius: 5px; flex-shrink: 0;
border: 1.5px solid var(--cc); background: var(--cc);
display: grid; place-items: center; transition: var(--transition);
}
.cal-wall .cw-cal-pill .sw-box::after { content: "✓"; font-size: 9.5px; font-weight: 900; color: var(--text-inverse); line-height: 1; }
.cal-wall .cw-cal-pill .cw-n {
font-size: 11px; font-weight: 800; color: var(--cc);
background: color-mix(in srgb, var(--cc) 13%, var(--panel));
border-radius: 999px; padding: 0 6px; min-width: 18px; text-align: center;
}
.cal-wall .cw-cal-pill.is-off { opacity: .45; }
.cal-wall .cw-cal-pill.is-off .sw-box { background: transparent; }
.cal-wall .cw-cal-pill.is-off .sw-box::after { content: ""; }
.cal-wall .cw-cal-pill.is-off .cw-n { color: var(--text-muted); background: var(--surface-active); }
.cal-wall .cw-cal-new {
display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
border: 1px dashed var(--border); background: transparent; border-radius: var(--radius-full);
padding: 5px 13px; font-size: 12px; font-weight: 700; color: var(--ink-3); transition: var(--transition);
}
.cal-wall .cw-cal-new:hover, .cal-wall .cw-cal-new:focus-visible {
border-color: var(--primary); color: var(--primary); border-style: solid; transform: translateY(-1px);
}
.cal-wall .cw-body.is-agenda {
grid-template-columns: minmax(250px, 340px) minmax(0, 960px); justify-content: center;
grid-template-rows: minmax(0, 1fr); gap: 26px;
}
.cal-wall .cwa-today {
position: relative; align-self: start; max-height: 100%; overflow-y: auto; scrollbar-width: none;
display: flex; flex-direction: column; gap: 14px; padding: 18px 16px 16px;
border-radius: var(--radius-lg);
background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 12%, var(--panel)), var(--panel) 64%);
border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
box-shadow: 0 14px 34px -22px rgba(var(--primary-rgb), .6);
animation: cwaTodayIn .6s cubic-bezier(.16,.84,.3,1) backwards .06s;
}
.cal-wall .cwa-today::-webkit-scrollbar { display: none; }
.cal-wall .cwa-today::after {
content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
animation: ping 2.8s ease-out 1.1s infinite;
}
.cal-wall .cwa-today-date {
display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 12px;
text-align: left; padding: 0; border-radius: var(--radius);
}
.cal-wall .cwa-today-date .k {
grid-column: 1 / -1; margin-bottom: 2px;
font-size: 10px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--primary);
}
.cal-wall .cwa-today-date b {
font-size: 56px; font-weight: 800; line-height: .86; letter-spacing: -2.5px; color: var(--primary);
animation: cwaNum .75s cubic-bezier(.2,1.35,.4,1) backwards .14s;
}
.cal-wall .cwa-today-date .m { padding-bottom: 5px; font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--ink-2); }
.cal-wall .cwa-today-list { display: flex; flex-direction: column; gap: 6px; }
.cal-wall .cwa-free {
margin: 0; padding: 14px 12px; border-radius: var(--radius); text-align: center;
font-size: 13px; color: var(--ink-3);
border: 1px dashed var(--line); background: color-mix(in srgb, var(--panel) 70%, transparent);
animation: cwaRowIn .45s ease backwards .32s;
}
.cal-wall .cwa-add {
align-self: flex-start; margin-top: 2px; padding: 5px 11px; border-radius: var(--radius-full);
font-size: 11.5px; font-weight: 700; color: var(--ink-3);
border: 1px dashed var(--line); transition: var(--transition);
}
.cal-wall .cwa-add:hover, .cal-wall .cwa-add:focus-visible, .cal-wall .cwa-add:active {
color: var(--primary); border-color: var(--primary); border-style: solid;
}
.cal-wall .cwa-scroll {
min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth;
padding: 0 6px 28px 2px; scrollbar-width: thin;
}
.cal-wall .cwa-sec {
position: sticky; top: 4px; z-index: 2; margin: 12px 0 4px; padding: 0; pointer-events: none;
animation: cwaIn .45s ease backwards; animation-delay: calc(var(--i) * 38ms + .22s);
}
.cal-wall .cwa-sec span {
display: inline-block; padding: 4px 11px; border-radius: var(--radius-full);
font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-2);
background: color-mix(in srgb, var(--panel) 88%, transparent); border: 1px solid var(--line);
box-shadow: var(--shadow-sm); backdrop-filter: blur(6px);
}
.cal-wall .cwa-sec:first-child { margin-top: 0; }
.cal-wall .cwa-day {
display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 9px 0;
border-top: 1px solid var(--line-soft);
animation: cwaIn .5s cubic-bezier(.16,.84,.3,1) backwards; animation-delay: calc(var(--i) * 42ms + .26s);
content-visibility: auto; contain-intrinsic-size: auto 72px;
}
.cal-wall .cwa-day:nth-of-type(n+7), .cal-wall .cwa-sec:nth-of-type(n+3),
.cal-wall.is-tile .cwa-day, .cal-wall.is-tile .cwa-sec { animation: none; }
.cal-wall .cwa-sec + .cwa-day { border-top: 0; }
.cal-wall .cwa-date {
align-self: start; display: flex; flex-direction: column; align-items: center; padding: 5px 0 6px;
border-radius: var(--radius); transition: var(--transition);
}
.cal-wall .cwa-date span { font-size: 10px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--ink-3); }
.cal-wall .cwa-date b { font-size: 23px; font-weight: 800; line-height: 1.1; color: var(--ink); }
.cal-wall .cwa-date:hover, .cal-wall .cwa-date:focus-visible, .cal-wall .cwa-date:active { background: var(--cell-alt); }
.cal-wall .cwa-day.shab .cwa-date span:first-child { color: var(--warning); }
.cal-wall .cwa-list { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cal-wall .cwa-none { margin: 18px 2px; font-size: 13px; color: var(--ink-3); }
.cal-wall .cwa-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cal-wall .cwa-today .cwa-row { animation: cwaRowIn .5s cubic-bezier(.16,.84,.3,1) backwards; animation-delay: calc(var(--n) * 70ms + .32s); }
.cal-wall .cwa-ev {
flex: 1; min-width: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto;
align-items: center; gap: 10px; padding: 8px 12px; text-align: left;
border-radius: var(--radius); border-left: 3px solid var(--ec);
background: color-mix(in srgb, var(--ec) var(--chip-mix), var(--panel));
transition: var(--transition);
}
.cal-wall .cwa-ev:hover, .cal-wall .cwa-ev:focus-visible, .cal-wall .cwa-ev:active {
background: color-mix(in srgb, var(--ec) calc(var(--chip-mix) + 12%), var(--panel));
transform: translateX(3px); box-shadow: -2px 0 0 0 var(--ec);
}
.cal-wall .cwa-ev .when {
font-size: 11px; font-weight: 800; letter-spacing: .3px; white-space: nowrap;
font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--ec) 74%, var(--ink));
}
.cal-wall .cwa-ev .what { display: flex; flex-direction: column; min-width: 0; }
.cal-wall .cwa-ev .t { font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.cal-wall .cwa-ev .s { margin-top: 1px; font-size: 11.5px; line-height: 1.35; color: var(--ink-3); }
.cal-wall .cwa-ev .globe { font-size: 11px; opacity: .7; }
.cal-wall .cwa-ev .tail { display: inline-flex; align-items: center; gap: 8px; }
.cal-wall .cwa-ev .going {
font-size: 11px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--success);
}
.cal-wall .cwa-ev.is-span {
border-left-width: 5px;
background: linear-gradient(90deg, color-mix(in srgb, var(--ec) 26%, var(--panel)), color-mix(in srgb, var(--ec) 8%, var(--panel)));
}
.cal-wall .cwa-ev.is-span .s { color: color-mix(in srgb, var(--ec) 70%, var(--ink)); font-weight: 700; }
.cal-wall .cwa-ev.is-done .t { text-decoration: line-through; opacity: .6; }
.cal-wall .cwa-ev.is-skipped { opacity: .72; }
@keyframes cwaTodayIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes cwaNum { from { opacity: 0; transform: translateY(10px) scale(.78); } to { opacity: 1; transform: none; } }
@keyframes cwaIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cwaRowIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@media (max-width: 1024px) {
.cal-wall .cw-body.is-agenda { display: block; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.cal-wall .cwa-today { max-height: none; overflow: visible; margin-bottom: 16px; }
.cal-wall .cwa-scroll { overflow: visible; padding: 0 2px 22px; }
}
@media (max-width: 780px) {
.cal-wall .cwa-today { padding: 14px 12px 12px; gap: 12px; margin-bottom: 12px; }
.cal-wall .cwa-today-date b { font-size: 46px; }
.cal-wall .cwa-day { grid-template-columns: 42px minmax(0, 1fr); gap: 9px; padding: 8px 0; }
.cal-wall .cwa-date b { font-size: 20px; }
.cal-wall .cwa-ev { grid-template-columns: 50px minmax(0, 1fr) auto; gap: 8px; padding: 8px 10px; }
.cal-wall .cwa-ev .t { font-size: 13px; }
.cal-wall .cwa-ev .when { font-size: 10.5px; }
}
.cal-wall.is-tile {
height: auto; min-height: 0;
padding: 10px 12px 8px; border: 0; border-radius: 0; background: none;
}
.cal-wall.is-tile .cw-cal { flex: 1; min-height: 0; }
.cal-wall.is-tile .cw-wd span { font-size: 9px; letter-spacing: .6px; text-align: center; }
.cal-wall.is-tile .cw-wd { gap: 1px; padding-bottom: 4px; }
.cal-wall.is-tile .cw-grid { gap: 1px; }
.cal-wall.is-tile .cw-week { column-gap: 1px; }
.cal-wall.is-tile .cw-day { border-radius: 0; }
.cal-wall.is-tile .cw-day:hover, .cal-wall.is-tile .cw-day.today { box-shadow: none; }
.cal-wall.is-tile .cw-day.today { background: var(--cell-solid); }
.cal-wall.is-tile .cw-hit:hover, .cal-wall.is-tile .cw-hit:focus-visible, .cal-wall.is-tile .cw-hit:active { background: none; }
.cal-wall.is-tile .cw-hit::before {
content: ""; position: absolute; inset: 2px; border-radius: 6px; pointer-events: none;
transition: background .18s ease, box-shadow .18s ease;
}
.cal-wall.is-tile .cw-day:hover .cw-hit::before, .cal-wall.is-tile .cw-hit:focus-visible::before {
background: color-mix(in srgb, var(--primary) 6%, transparent);
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 45%, transparent);
}
.cal-wall.is-tile .cw-hit:active::before { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.cal-wall.is-tile .cw-day.today .cw-hit::before {
background: color-mix(in srgb, var(--primary) 10%, transparent);
box-shadow: inset 0 0 0 2px var(--primary);
}
.cal-wall.is-tile .cw-day.today::after { inset: 2px; border-radius: 6px; }
.cal-wall.is-tile .cw-day { padding: 3px 3px 3px; gap: 2px; }
.cal-wall.is-tile .cw-num { font-size: 11px; align-self: center; }
.cal-wall.is-tile .cw-hit::after { top: 5px; left: 5px; width: 16px; height: 16px; border-radius: 4px; --cw-plus: 8px; }
.cal-wall.is-tile .cw-lane { top: 18px; row-gap: 1px; column-gap: 1px; }
.cal-wall.is-tile .cal-span { height: 14px; font-size: 8.5px; padding: 0 6px; gap: 5px; margin: 0 2px; }
.cal-wall.is-tile .cw-day > .cw-num { margin-bottom: calc(var(--cw-bars, 0) * 15px); }
.cal-wall.is-tile .cw-stack { gap: 2px; }
.cal-wall.is-tile .cw-ev { padding: 1px 4px 2px; gap: 3px; border-left-width: 2px; border-radius: 3px; }
.cal-wall.is-tile .cw-ev .when, .cal-wall.is-tile .cw-ev .globe { display: none; }
.cal-wall.is-tile .cw-ev .name { font-size: 10px; line-height: 1.35; letter-spacing: -.1px; }
.cal-wall.is-tile .cw-ev:hover, .cal-wall.is-tile .cw-ev:focus-visible { transform: none; }
.cal-wall.is-tile .cw-allday { margin: 0 -3px; }
.cal-wall.is-tile .cw-ad { font-size: 8px; line-height: 1.5; padding: 0 5px; margin-inline: 1px; }
.cal-wall.is-tile .cw-loads { gap: 2px; padding-top: 2px; max-height: 16px; }
.cal-wall.is-tile .cw-load {
display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
padding: 0 5px; font-size: 8px; letter-spacing: 0;
}
.cal-wall.is-tile .cw-load b { font-size: 9px; vertical-align: baseline; margin-right: 2px; }
.cal-wall.is-tile.is-list {
display: block; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
padding: 10px 12px 10px; border-top: 1px solid var(--line); container-type: inline-size;
}
.cal-wall.is-tile .cwa-today {
max-height: none; overflow: visible; margin-bottom: 10px;
padding: 8px 10px 9px; gap: 7px; border-radius: var(--radius);
}
.cal-wall.is-tile .cwa-today-date { display: flex; align-items: baseline; gap: 8px; padding-right: 76px; }
.cal-wall.is-tile .cwa-today-date .k { margin: 0; font-size: 9.5px; letter-spacing: 1.2px; }
.cal-wall.is-tile .cwa-today-date b { font-size: 20px; line-height: 1; letter-spacing: -.5px; }
.cal-wall.is-tile .cwa-today-date .m { padding: 0; font-size: 12px; }
.cal-wall.is-tile .cwa-add { position: absolute; top: 7px; right: 10px; margin: 0; padding: 3px 10px; font-size: 11px; }
.cal-wall.is-tile .cwa-free { padding: 6px 10px; font-size: 12px; text-align: left; }
.cal-wall.is-tile .cwa-scroll { overflow: visible; padding: 0 2px 2px; }
.cal-wall.is-tile .cwa-sec { top: 0; margin: 8px 0 2px; }
.cal-wall.is-tile .cwa-sec:first-child { margin-top: 0; }
.cal-wall.is-tile .cwa-sec span { font-size: 9px; padding: 2px 8px; }
.cal-wall.is-tile .cwa-day { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 5px 0; }
.cal-wall.is-tile .cwa-date { padding: 2px 0 3px; }
.cal-wall.is-tile .cwa-date span { font-size: 8.5px; }
.cal-wall.is-tile .cwa-date b { font-size: 17px; }
.cal-wall.is-tile .cwa-list, .cal-wall.is-tile .cwa-today-list { gap: 4px; }
.cal-wall.is-tile .cwa-ev { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 8px; padding: 6px 10px; }
.cal-wall.is-tile .cwa-ev .t { font-size: 12.5px; }
.cal-wall.is-tile .cwa-ev .s { font-size: 11px; }
.cal-wall.is-tile .cwa-ev .when { font-size: 10.5px; }
@container (min-width: 480px) {
.cal-wall.is-tile .cwa-ev { padding: 5px 10px; }
.cal-wall.is-tile .cwa-ev .what { flex-direction: row; align-items: baseline; gap: 8px; }
.cal-wall.is-tile .cwa-ev .t {
flex: 0 1 auto; min-width: 0; overflow-wrap: normal;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-wall.is-tile .cwa-ev .s {
flex: 1 1 0; min-width: 0; margin-top: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
}
@media (max-width: 780px) {
.cal-wall.is-tile { padding: 8px 8px 6px; }
.cal-wall.is-tile .cw-ev { padding: 1px 3px 2px; }
.cal-wall.is-tile .cw-ev .name { font-size: 9px; line-height: 1.3; }
.cal-wall.is-tile .cw-ad { font-size: 7.5px; padding: 0 4px; }
.cal-wall.is-tile .cw-load { padding: 0 4px; font-size: 7.5px; }
}
.cls-majors {
--cls-free-bg: color-mix(in srgb, var(--success) 12%, var(--panel));
--cls-free-line: color-mix(in srgb, var(--success) 38%, var(--panel));
--cls-free-ink: color-mix(in srgb, var(--success) 62%, var(--ink));
--cls-busy-bg: color-mix(in srgb, var(--ink) 7%, var(--panel));
--cls-busy-line: color-mix(in srgb, var(--ink) 13%, var(--panel));
--cls-maybe-line: color-mix(in srgb, var(--ink) 30%, var(--panel));
--cls-track-bg: repeating-linear-gradient(135deg, var(--cls-busy-bg) 0 5px, var(--panel) 5px 9px);
display: flex; flex-direction: column; gap: 12px; padding: 2px 2px 24px;
}
.cls-majors .cls-bar {
display: flex; flex-direction: column; gap: 10px; padding: 12px 14px;
border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel);
}
.cls-majors .cls-bar-top { display: flex; align-items: center; gap: 8px; }
.cls-majors .cls-lvl { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-full); background: var(--cell-alt); border: 1px solid var(--line); }
.cls-majors .cls-lvl button { padding: 5px 12px; border-radius: var(--radius-full); font-size: 12px; font-weight: 700; color: var(--ink-3); transition: var(--transition); }
.cls-majors .cls-lvl button.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-sm); }
.cls-majors .cls-clear {
margin-left: auto; padding: 5px 12px; border-radius: var(--radius-full);
font-size: 12px; font-weight: 700; color: var(--primary); background: rgba(var(--primary-rgb), .10);
transition: var(--transition);
}
.cls-majors .cls-clear:hover, .cls-majors .cls-clear:active, .cls-majors .cls-clear:focus-visible { background: rgba(var(--primary-rgb), .17); }
.cls-majors .cls-pickrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.cls-majors .cls-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cls-majors .cls-pills-lab { margin-right: 2px; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-3); }
.cls-majors .cls-pills-lab i { font-style: normal; }
.cls-majors .cls-pill {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
min-height: 32px; padding: 5px 13px; border: 1px solid var(--line); border-radius: var(--radius-full);
background: var(--panel); color: var(--ink-2); font-size: 12.5px; font-weight: 650; line-height: 1.2;
white-space: nowrap; transition: var(--transition); -webkit-tap-highlight-color: transparent;
}
.cls-majors .cls-pill:hover, .cls-majors .cls-pill:focus-visible { border-color: var(--ink-3); color: var(--ink); }
.cls-majors .cls-pill.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.cls-majors .cls-pill.is-year { min-width: 44px; font-variant-numeric: tabular-nums; }
.cls-majors .cls-pill.is-year::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cc); }
.cls-majors .cls-pill.is-year.on::before { background: var(--on-primary); }
.cls-majors .cls-sum {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
padding-top: 10px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--ink-2);
}
.cls-majors .cls-sum-lab { font-weight: 700; color: var(--ink); }
.cls-majors .cls-sum-sem { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cls-majors .cls-sum-sem b { margin-right: 2px; font-size: 11px; font-weight: 800; color: var(--ink-3); }
.cls-majors .cls-chip-free {
padding: 2px 9px; border-radius: var(--radius-full); border: 1px solid var(--cls-free-line);
background: var(--cls-free-bg); color: var(--cls-free-ink); font-size: 11.5px; font-weight: 700;
}
.cls-majors .cls-sum-none { font-style: italic; color: var(--ink-3); }
.cls-majors .cls-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 11px; color: var(--ink-3); }
.cls-majors .cls-key-sw { width: 14px; height: 10px; margin-left: 6px; border-radius: 3px; }
.cls-majors .cls-key-sw:first-child { margin-left: 0; }
.cls-majors .cls-key-sw.is-req { background: var(--cls-busy-bg); border: 1px solid var(--cls-busy-line); }
.cls-majors .cls-key-sw.is-trk { background: var(--cls-track-bg); border: 1px solid var(--cls-busy-line); }
.cls-majors .cls-key-sw.is-ele { border: 1px dashed var(--cls-maybe-line); }
.cls-majors .cls-key-sw.is-free { background: var(--cls-free-bg); border: 1px solid var(--cls-free-line); }
.cls-majors .cls-key-tip { margin-left: auto; }
.cls-majors .cls-card { padding: 12px 14px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.cls-majors .cls-card-hd h3 { margin: 0; font-size: 15px; font-weight: 750; letter-spacing: -.01em; color: var(--ink); }
.cls-majors .cls-school { margin: 1px 0 0; font-size: 11.5px; color: var(--ink-3); }
.cls-majors .cls-mx { width: calc(100% + 8px); margin: 6px -4px 0; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.cls-majors .cls-mx thead th { padding: 0 0 1px; font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; text-align: center; color: var(--ink-3); }
.cls-majors .cls-mx th.cls-mx-lab { width: 64px; }
.cls-majors .cls-mx tbody th.cls-mx-lab { padding: 0 0 0 8px; border-left: 3px solid var(--cc); border-radius: 2px; text-align: left; font-weight: 400; line-height: 1.15; }
.cls-majors .cls-mx-lab b { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink); }
.cls-majors .cls-mx-lab span { font-size: 11px; color: var(--ink-3); }
.cls-majors .cls-mx-lab i { font-style: normal; }
.cls-majors .cls-mx td { height: 46px; padding: 0; border-radius: var(--radius-sm); text-align: center; vertical-align: middle; }
.cls-majors .cls-mx td.is-free { background: var(--cls-free-bg); border: 1px solid var(--cls-free-line); }
.cls-majors .cls-mx td.is-free span { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--cls-free-ink); }
.cls-majors .cls-mx td.is-req { background: var(--cls-busy-bg); border: 1px solid var(--cls-busy-line); }
.cls-majors .cls-mx td.is-trk { background: var(--cls-track-bg); border: 1px solid var(--cls-busy-line); }
.cls-majors .cls-mx td.is-ele { background: transparent; border: 1px dashed var(--cls-maybe-line); }
.cls-majors .cls-mx td button {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
width: 100%; min-height: 44px; padding: 4px 3px; border-radius: inherit;
color: var(--ink); font-variant-numeric: tabular-nums; transition: var(--transition);
-webkit-tap-highlight-color: transparent;
}
.cls-majors .cls-mx td.is-ele button { color: var(--ink-2); }
.cls-majors .cls-mx td button:hover, .cls-majors .cls-mx td button:focus-visible { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.cls-majors .cls-mx td button.on { box-shadow: inset 0 0 0 2px var(--primary); }
.cls-majors .cls-t { font-size: 12px; font-weight: 700; line-height: 1.2; }
.cls-majors .cls-t i { font-style: normal; }
.cls-majors .cls-n { font-size: 10px; color: var(--ink-3); }
.cls-majors .cls-detail td {
height: auto; padding: 10px 12px 6px; text-align: left; vertical-align: top;
background: var(--cell-alt); border: 1px solid var(--line); border-radius: var(--radius);
}
.cls-majors .cls-detail-hd { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.cls-majors .cls-detail-hd b { color: var(--ink); }
.cls-majors .cls-detail-hd span { font-variant-numeric: tabular-nums; color: var(--ink-3); }
.cls-majors .cls-detail-x { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; font-size: 12px; color: var(--ink-3); }
.cls-majors .cls-detail-x:hover, .cls-majors .cls-detail-x:focus-visible { background: var(--panel); color: var(--ink); }
.cls-majors .cls-detail ul { margin: 4px 0 0; padding: 0; list-style: none; }
.cls-majors .cls-detail li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.cls-majors .cls-detail-time { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.cls-majors .cls-detail-courses { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; line-height: 1.35; color: var(--ink); }
.cls-majors .cls-type {
display: inline-block; margin-right: 4px; padding: 0 6px; border-radius: 4px; vertical-align: 1px;
font-size: 9.5px; font-style: normal; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
}
.cls-majors .cls-type.req { background: rgba(var(--primary-rgb), .12); color: var(--primary); }
.cls-majors .cls-type.ele { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink-2); }
.cls-majors .cls-type.trk { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning-text); }
.cls-majors .cls-tracks { display: block; margin-top: 1px; font-size: 11px; line-height: 1.3; color: var(--ink-3); }
.cls-majors .cls-empty { margin: 8px 2px; font-size: 13px; color: var(--ink-2); }
.cls-majors .cls-empty .cls-clear { margin-left: 8px; }
@media (max-width: 780px) {
.cls-majors { gap: 10px; padding-bottom: 16px; }
.cls-majors .cls-bar { gap: 9px; padding: 10px; }
.cls-majors .cls-pill { min-height: 34px; padding: 6px 12px; }
.cls-majors .cls-pills.is-majors {
display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); justify-content: start;
margin: 0 -10px; padding: 0 10px 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
-webkit-mask-image: linear-gradient(to right, black calc(100% - 22px), transparent);
mask-image: linear-gradient(to right, black calc(100% - 22px), transparent);
}
.cls-majors .cls-pills.is-majors::-webkit-scrollbar { display: none; }
.cls-majors .cls-pickrow { column-gap: 14px; }
.cls-majors .cls-pills-lab i { display: none; }
.cls-majors .cls-pill.is-year { min-width: 40px; padding: 6px 10px; }
.cls-majors .cls-pills:not(.is-majors) .cls-pill { min-width: 40px; }
.cls-majors .cls-sum { gap: 4px 12px; padding-top: 8px; }
.cls-majors .cls-key-tip { margin-left: 0; }
.cls-majors .cls-card { padding: 10px 8px 8px; }
.cls-majors .cls-card-hd { padding: 0 4px; }
.cls-majors .cls-mx { width: calc(100% + 6px); margin: 4px -3px 0; border-spacing: 3px; }
.cls-majors .cls-mx thead th { font-size: 9.5px; letter-spacing: .3px; }
.cls-majors .cls-mx th.cls-mx-lab { width: 34px; }
.cls-majors .cls-mx tbody th.cls-mx-lab { padding-left: 4px; border-left-width: 2px; }
.cls-majors .cls-mx-lab b { font-size: 11.5px; }
.cls-majors .cls-mx-lab span { font-size: 10.5px; }
.cls-majors .cls-mx-lab i { display: none; }
.cls-majors .cls-mx td { height: 42px; }
.cls-majors .cls-mx td button { min-height: 40px; padding: 3px 1px; }
.cls-majors .cls-mx td.is-free span { font-size: 9px; letter-spacing: .2px; }
.cls-majors .cls-t { font-size: 11px; }
.cls-majors .cls-t b { display: block; }
.cls-majors .cls-t i, .cls-majors .cls-n { display: none; }
.cls-majors .cls-detail td { padding: 9px 10px 4px; }
.cls-majors .cls-detail li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.sm {
--sm-r-s: 9px;
--sm-r: 13px;
--sm-r-l: 19px;
--sm-r-xl: 28px;
--sm-glow: 0 8px 22px -6px color-mix(in srgb, var(--primary) 48%, transparent);
display: flex;
flex-direction: column;
gap: 18px;
color: var(--text);
position: relative;
}
.sm svg { width: 14px; height: 14px; flex: none; }
.sm-aura {
position: absolute;
inset: -150px -170px auto -170px;
height: 520px;
z-index: 0;
pointer-events: none;
background:
radial-gradient(52% 62% at 14% 8%, color-mix(in srgb, var(--sm-aura-1) 62%, transparent), transparent 68%),
radial-gradient(46% 56% at 78% 0%, color-mix(in srgb, var(--sm-aura-2) 42%, transparent), transparent 70%),
radial-gradient(40% 50% at 48% 22%, color-mix(in srgb, var(--sm-aura-3) 46%, transparent), transparent 72%);
-webkit-mask-image: radial-gradient(76% 80% at 50% 4%, black 0%, transparent 78%);
mask-image: radial-gradient(76% 80% at 50% 4%, black 0%, transparent 78%);
filter: blur(16px);
opacity: 0.8;
animation: smAura 19s ease-in-out infinite;
}
.sm { overflow-x: clip; }
.sm > *:not(.sm-aura) { position: relative; z-index: 1; }
@keyframes smAura {
0%, 100% { transform: translate3d(-2%, 0, 0) scale(1); opacity: 0.64; }
35% { transform: translate3d(3%, -1.4%, 0) scale(1.08); opacity: 1; }
70% { transform: translate3d(-1%, 1.2%, 0) scale(1.03); opacity: 0.8; }
}
.sm-ph { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.sm-ph__t { font-size: 31px; font-weight: 850; letter-spacing: -0.045em; margin: 0; line-height: 1.02; color: var(--text); }
.sm-ph__t em {
font-style: normal;
background: linear-gradient(100deg, var(--primary), var(--accent-2));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.sm-ph__s { font-size: 13px; color: var(--text-secondary); margin: 7px 0 0; line-height: 1.5; font-weight: 600; }
.sm-ph__s b { color: var(--text); font-weight: 800; }
.sm-ph__a { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sm-week {
display: inline-flex; align-items: center; gap: 7px;
font-size: 11.5px; font-weight: 850; letter-spacing: 0.02em; white-space: nowrap;
color: var(--text-inverse); background: linear-gradient(135deg, var(--primary), var(--accent-2));
padding: 5px 12px; border-radius: var(--radius-full); box-shadow: var(--sm-glow);
}
.sm-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
height: 36px; padding: 0 15px; border-radius: var(--radius-full);
border: 1px solid var(--border); background: var(--surface); color: var(--text);
font: inherit; font-size: 12.5px; font-weight: 800; white-space: nowrap; text-decoration: none;
box-shadow: var(--shadow-sm);
transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.18s ease, background 0.18s ease;
}
.sm-btn svg { width: 14px; height: 14px; flex: none; }
.sm-btn:hover, .sm-btn:focus-visible, .sm-btn:active { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.sm-btn--p {
background: linear-gradient(135deg, var(--primary), var(--accent-2));
border-color: transparent; color: var(--text-inverse); box-shadow: var(--sm-glow);
}
.sm-btn--p:hover, .sm-btn--p:focus-visible {
box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--primary) 60%, transparent);
}
.sm-btn--sm { height: 29px; padding: 0 11px; font-size: 11.5px; }
.sm-btn--icon { width: 36px; padding: 0; }
.sm-btn--pill { border-radius: var(--radius-full); }
.sm-switch {
display: inline-flex; gap: 3px; padding: 4px; flex-wrap: wrap;
background: color-mix(in srgb, var(--surface) 74%, transparent);
border: 1px solid var(--border-light); border-radius: var(--radius-full);
box-shadow: var(--shadow-sm);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.sm-switch button {
display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; cursor: pointer;
padding: 6px 13px 6px 6px; border-radius: var(--radius-full); font: inherit;
font-size: 12.5px; font-weight: 750; color: var(--text-secondary); white-space: nowrap;
transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}
.sm-switch button:hover, .sm-switch button:focus-visible { color: var(--text); background: var(--surface-active); }
.sm-switch button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), 0 0 0 1px var(--border-light); }
.sm-mono {
width: 21px; height: 21px; flex: none; border-radius: 7px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 9.5px; font-weight: 850; letter-spacing: -0.02em;
background: var(--surface-active); color: var(--text-secondary); border: 1px solid var(--border-light);
}
.sm-mono svg { width: 11px; height: 11px; }
.sm-switch button.on .sm-mono {
background: linear-gradient(135deg, var(--primary), var(--accent-2));
color: var(--text-inverse); border-color: transparent;
}
.sm-mono--lg { width: 27px; height: 27px; font-size: 11px; border-radius: 9px; }
.sm-mono--pg,
.sm-switch button.on .sm-mono--pg,
.sm-switch__pg.on .sm-mono {
background: var(--pg-soft, var(--surface-active));
color: var(--pg-ink, var(--text-secondary));
border-color: color-mix(in srgb, var(--pg, var(--border-light)) 38%, transparent);
}
.sm-switch__pg.on {
box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--pg) 42%, transparent);
}
.sm-card {
background: color-mix(in srgb, var(--surface) 82%, transparent);
border: 1px solid var(--border-light); border-radius: var(--sm-r-l); padding: 17px;
box-shadow: var(--shadow-md);
-webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
}
.sm-card--flush { padding: 0; overflow: hidden; }
.sm-card--tint {
background: linear-gradient(150deg, var(--primary-soft), color-mix(in srgb, var(--surface) 88%, transparent) 62%);
}
.sm-card__h { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; flex-wrap: wrap; }
.sm-card__t { font-size: 14px; font-weight: 850; letter-spacing: -0.02em; margin: 0; color: var(--text); }
.sm-card__sub { font-size: 11.5px; color: var(--text-muted); font-weight: 700; }
.sm-card__a { margin-left: auto; display: flex; gap: 7px; align-items: center; }
.sm-lbl { font-size: 9.5px; font-weight: 850; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-muted); }
.sm-grid { display: grid; gap: 14px; }
.sm-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sm-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sm-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sm-g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sm-g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.sm-g-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.sm-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sm-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sm-st {
display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-full);
padding: 3px 10px; font-size: 11px; font-weight: 800; white-space: nowrap;
}
.sm-st svg { width: 12px; height: 12px; }
.sm-dot { width: 7px; height: 7px; border-radius: var(--radius-full); flex: none; background: currentColor; }
.sm-st--idea { background: var(--surface-active); color: var(--text-secondary); }
.sm-st--brief { background: var(--info-soft); color: var(--info-text); }
.sm-st--prod { background: var(--warning-soft); color: var(--warning-text); }
.sm-st--ready { background: var(--success-soft); color: var(--success-text); }
.sm-st--sched { background: var(--primary-soft); color: var(--primary-hover); }
.sm-st--posted { background: var(--surface-active); color: var(--text-muted); }
.sm-st--stuck { background: var(--danger-soft); color: var(--danger-text); }
.sm-chip {
display: inline-flex; align-items: center; gap: 5px; border-radius: var(--radius-full);
padding: 3px 9px; font-size: 10.5px; font-weight: 750; white-space: nowrap;
background: var(--surface-active); color: var(--text-secondary);
}
.sm-chip svg { width: 11px; height: 11px; }
.sm-ch {
width: 22px; height: 22px; flex: none; border-radius: 7px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--surface-active); color: var(--text-secondary); border: 1px solid var(--border-light);
}
.sm-ch svg { width: 12px; height: 12px; }
.sm-ch--on { background: linear-gradient(135deg, var(--primary), var(--accent-2)); color: var(--text-inverse); border-color: transparent; }
.sm-ava {
width: 24px; height: 24px; flex: none; border-radius: var(--radius-full);
display: inline-flex; align-items: center; justify-content: center;
font-size: 9.5px; font-weight: 850; color: var(--text-inverse);
background: linear-gradient(135deg, var(--primary), var(--accent-2));
box-shadow: 0 0 0 2px var(--surface);
}
.sm-ava--n { background: var(--surface-active); color: var(--text-muted); border: 1px dashed var(--border); box-shadow: none; }
.sm-ava--lg { width: 32px; height: 32px; font-size: 12px; }
.sm-kpi {
display: flex; flex-direction: column; gap: 8px; min-height: 104px; padding: 15px 16px;
border-radius: var(--sm-r-l); border: 1px solid var(--border-light);
background: color-mix(in srgb, var(--surface) 84%, transparent);
box-shadow: var(--shadow-md); text-decoration: none; color: inherit;
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
position: relative; overflow: hidden;
transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.2s ease;
}
.sm-kpi:hover, .sm-kpi:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-xl); }
.sm-kpi__l {
font-size: 10px; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--text-muted); display: flex; align-items: center; gap: 6px;
}
.sm-kpi__l svg { width: 13px; height: 13px; }
.sm-kpi__v { font-size: 34px; font-weight: 850; letter-spacing: -0.05em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.sm-kpi__d { font-size: 11.5px; font-weight: 700; color: var(--text-muted); margin-top: auto; line-height: 1.4; }
.sm-kpi--alert {
background: linear-gradient(140deg, var(--danger-soft), color-mix(in srgb, var(--surface) 86%, transparent) 58%);
border-color: color-mix(in srgb, var(--danger) 32%, var(--border-light));
}
.sm-kpi--alert .sm-kpi__v, .sm-kpi--alert .sm-kpi__l { color: var(--danger-text); }
.sm-kpi--good .sm-kpi__v { color: var(--success-text); }
.sm-spark svg { width: 100%; height: 30px; overflow: visible; }
.sm-spark path {
fill: none; stroke: var(--primary); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 300; stroke-dashoffset: 300; animation: smDraw 1.7s cubic-bezier(0.3, 0.7, 0.3, 1) 0.35s forwards;
}
@keyframes smDraw { to { stroke-dashoffset: 0; } }
.sm-strip {
display: flex; flex-wrap: wrap; border-radius: var(--sm-r-l); overflow: hidden;
border: 1px solid var(--border-light); background: color-mix(in srgb, var(--surface) 84%, transparent);
box-shadow: var(--shadow-md);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.sm-strip > * {
flex: 1 1 168px; padding: 14px 16px; border-right: 1px solid var(--border-light);
display: flex; flex-direction: column; gap: 4px; min-width: 0;
text-decoration: none; color: inherit;
transition: background 0.2s ease;
}
.sm-strip > *:last-child { border-right: 0; }
.sm-strip a:hover, .sm-strip a:focus-visible { background: var(--surface-hover); }
.sm-strip .sm-kpi__v { font-size: 28px; }
.sm-strip__alert { background: linear-gradient(140deg, var(--danger-soft), transparent 70%); }
.sm-strip__alert .sm-kpi__v, .sm-strip__alert .sm-kpi__l { color: var(--danger-text); }
.sm-funnel { display: flex; gap: 5px; align-items: stretch; padding: 2px 0; }
.sm-fn {
flex: var(--sm-w, 1); min-width: 90px; position: relative; overflow: hidden;
display: flex; flex-direction: column; gap: 5px; justify-content: center;
padding: 15px 12px 15px 22px; text-decoration: none; color: var(--text-inverse);
background: linear-gradient(135deg, var(--sm-c), color-mix(in srgb, var(--sm-c) 62%, black));
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
box-shadow: var(--shadow-md);
transition: filter 0.2s ease, transform 0.2s ease;
}
.sm-fn:first-child {
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
border-radius: var(--sm-r) 0 0 var(--sm-r); padding-left: 15px;
}
.sm-fn:last-child {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%);
border-radius: 0 var(--sm-r) var(--sm-r) 0;
}
.sm-fn:hover, .sm-fn:focus-visible { filter: brightness(1.08); transform: translateY(-2px); }
.sm-fn::after {
content: ''; position: absolute; inset: 0; width: 28%;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 30%, transparent), transparent);
animation: smShine 6s ease-in-out infinite;
}
.sm-fn__n { font-size: 26px; font-weight: 850; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; position: relative; z-index: 2; }
.sm-fn__l { font-size: 9.5px; font-weight: 800; letter-spacing: 0.03em; opacity: 0.94; position: relative; z-index: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes smShine { 0% { transform: translateX(-140%); } 55%, 100% { transform: translateX(260%); } }
.sm-c-idea { --sm-c: var(--sm-idea); }
.sm-c-brief { --sm-c: var(--info); }
.sm-c-prod { --sm-c: var(--warning); }
.sm-c-ready { --sm-c: var(--success); }
.sm-c-sched { --sm-c: var(--primary); }
.sm-c-posted { --sm-c: var(--sm-posted); }
.sm-bars { display: flex; flex-direction: column; gap: 6px; }
.sm-bar { display: grid; grid-template-columns: minmax(92px, 132px) minmax(0, 1fr) auto; align-items: center; gap: 11px; }
.sm-bar__l { font-size: 11.5px; font-weight: 800; color: var(--text-secondary); display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-bar__t { height: 26px; border-radius: var(--sm-r-s); background: var(--surface-active); overflow: hidden; }
.sm-bar__f {
display: block; height: 100%; border-radius: var(--sm-r-s); position: relative; overflow: hidden;
background: linear-gradient(90deg, color-mix(in srgb, var(--sm-c, var(--primary)) 78%, transparent), var(--sm-c, var(--primary)));
animation: smGrow 1.5s cubic-bezier(0.2, 0.72, 0.28, 1) both;
}
.sm-bar__f::after {
content: ''; position: absolute; inset: 0; width: 35%;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 45%, transparent), transparent);
animation: smShine 4.5s ease-in-out infinite;
}
.sm-bar__v { font-size: 13px; font-weight: 850; font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; color: var(--text); }
.sm-bar--none { --sm-c: var(--text-muted); }
@keyframes smGrow { from { width: 0; } }
.sm-art {
display: block; position: relative; overflow: hidden;
background-color: var(--surface-active);
background-size: cover; background-position: center;
}
.sm-art::after {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(58% 58% at 28% 18%, rgba(255, 255, 255, 0.42), transparent 62%),
radial-gradient(50% 50% at 82% 86%, rgba(0, 0, 0, 0.24), transparent 62%);
}
.sm-art--photo::after { display: none; }
.sm-art > * { position: relative; z-index: 2; }
.sm-art b {
position: absolute; left: 7px; bottom: 6px; font-size: 8.5px; font-weight: 850;
letter-spacing: 0.1em; text-transform: uppercase; color: white;
background: rgba(0, 0, 0, 0.32); border-radius: var(--radius-full);
padding: 2px 7px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sm-art i {
position: absolute; right: 6px; top: 6px; width: 19px; height: 19px; border-radius: 6px;
display: grid; place-items: center; color: white;
background: rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sm-art i svg { width: 11px; height: 11px; }
.sm-art--1 { background-image: var(--sm-art-1); }
.sm-art--2 { background-image: var(--sm-art-2); }
.sm-art--3 { background-image: var(--sm-art-3); }
.sm-art--4 { background-image: var(--sm-art-4); }
.sm-art--5 { background-image: var(--sm-art-5); }
.sm-art--6 { background-image: var(--sm-art-6); }
.sm-art--7 { background-image: var(--sm-art-7); }
.sm-art--8 { background-image: var(--sm-art-8); }
.sm-art--9 { background-image: var(--sm-art-9); }
.sm-art--10 { background-image: var(--sm-art-10); }
.sm-tile {
display: flex; flex-direction: column; border-radius: var(--sm-r); overflow: hidden;
background: var(--surface); border: 1px solid var(--border-light); box-shadow: var(--shadow-sm);
text-decoration: none; color: inherit;
transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.sm-tile:hover, .sm-tile:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border); }
.sm-tile .sm-art { aspect-ratio: 4 / 3; }
.sm-tile__b { padding: 9px 10px 10px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sm-tile__t {
font-size: 12px; font-weight: 750; line-height: 1.32; color: var(--text);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sm-tile__m { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.sm-tile__m .sm-ava { margin-left: auto; }
.sm-tile__d { font-size: 10.5px; font-weight: 700; color: var(--text-muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.sm-tile--stuck { border-color: color-mix(in srgb, var(--danger) 45%, var(--border-light)); box-shadow: 0 0 0 3px var(--danger-soft); }
.sm-post {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px;
padding: 8px 11px 8px 8px; border-radius: var(--sm-r); background: var(--surface);
border: 1px solid var(--border-light); box-shadow: var(--shadow-sm);
text-decoration: none; color: inherit; position: relative; overflow: hidden;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.sm-post::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sm-rail, var(--border)); }
.sm-post:hover, .sm-post:focus-visible { transform: translateX(3px); box-shadow: var(--shadow-md); border-color: var(--border); }
.sm-post__art { width: 40px; height: 40px; border-radius: var(--sm-r-s); flex: none; margin-left: 4px; }
.sm-post__t { font-size: 12.5px; font-weight: 750; line-height: 1.3; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.sm-post__m { font-size: 10.5px; font-weight: 650; color: var(--text-muted); margin-top: 2px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.sm-post__m b { color: var(--danger-text); }
.sm-post__r { display: flex; align-items: center; gap: 7px; }
.sm-post--ghost { border-style: dashed; background: none; box-shadow: none; }
.sm-post--ghost .sm-post__t { color: var(--text-muted); font-weight: 700; }
.sm-r-idea { --sm-rail: var(--sm-idea); }
.sm-r-brief { --sm-rail: var(--info); }
.sm-r-prod { --sm-rail: var(--warning); }
.sm-r-ready { --sm-rail: var(--success); }
.sm-r-sched { --sm-rail: var(--primary); }
.sm-r-posted { --sm-rail: var(--sm-posted); }
.sm-r-stuck { --sm-rail: var(--danger); }
.sm-post--pg { border-left: 3px solid var(--pg); padding-left: 9px; }
.sm-acc { display: inline-flex; align-items: center; gap: 5px; font-weight: 800;
color: var(--pg-ink, var(--text-secondary)); }
.sm-acc__d { width: 7px; height: 7px; border-radius: 50%; background: var(--pg, var(--text-muted)); flex: none; }
.sm-kan { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: start; }
.sm-kan__col {
background: color-mix(in srgb, var(--surface) 46%, transparent); border: 1px solid var(--border-light);
border-radius: var(--sm-r-l); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 150px;
}
.sm-kan__h { display: flex; align-items: center; gap: 7px; padding-bottom: 8px; border-bottom: 1px solid var(--border-light); }
.sm-kan__t { font-size: 11.5px; font-weight: 850; color: var(--text); }
.sm-kan__n { margin-left: auto; font-size: 11px; font-weight: 850; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sm-kan__bar { height: 3px; border-radius: var(--radius-full); background: var(--surface-active); overflow: hidden; }
.sm-kan__bar i { display: block; height: 100%; border-radius: var(--radius-full); background: var(--sm-c, var(--primary)); animation: smGrow 1.4s cubic-bezier(0.2, 0.72, 0.28, 1) both; }
.sm-comp { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.sm-field { display: flex; flex-direction: column; gap: 5px; }
.sm-field > label { font-size: 9.5px; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.sm-in {
border: 1px solid var(--border); border-radius: var(--sm-r); background: var(--surface); color: var(--text);
font: inherit; font-size: 13px; padding: 9px 12px; width: 100%; box-shadow: var(--shadow-xs);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.sm-in:focus, .sm-in:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.sm-in::placeholder { color: var(--text-muted); }
.sm-in--t { min-height: 132px; resize: vertical; line-height: 1.55; }
.sm-in--big { font-size: 17px; font-weight: 800; letter-spacing: -0.025em; }
.sm-help { font-size: 11px; color: var(--text-muted); font-weight: 650; }
.sm-count { font-size: 10.5px; font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sm-count--over { color: var(--danger-text); }
.sm-var { display: flex; min-width: 0; gap: 4px; padding: 4px; background: var(--surface-active); border: 1px solid var(--border-light); border-radius: var(--radius-full); flex-wrap: wrap; }
.sm-var button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; cursor: pointer; padding: 5px 12px 5px 5px; border-radius: var(--radius-full); font: inherit; font-size: 12px; font-weight: 750; color: var(--text-secondary); }
.sm-var button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), 0 0 0 1px var(--border-light); }
.sm-var button.add { color: var(--text-muted); border: 1px dashed var(--border); padding: 5px 11px; }
.sm-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.sm-tag { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--radius-full); padding: 3px 9px; font-size: 11px; font-weight: 800; background: var(--info-soft); color: var(--info-text); }
.sm-tag--at { background: var(--primary-soft); color: var(--primary-hover); }
.sm-phone {
border-radius: 24px; border: 1px solid var(--border); background: var(--surface); overflow: hidden;
box-shadow: var(--shadow-xl); animation: smBob 7s ease-in-out infinite;
}
@keyframes smBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.sm-ig__h { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--border-light); }
.sm-ig__n { font-size: 12px; font-weight: 850; color: var(--text); }
.sm-ig__n span { display: block; font-size: 10px; font-weight: 650; color: var(--text-muted); }
.sm-ig__img { aspect-ratio: 4 / 5; }
.sm-ig__acts { display: flex; gap: 13px; padding: 10px 12px 5px; color: var(--text-secondary); }
.sm-ig__acts svg { width: 20px; height: 20px; }
.sm-ig__cap { padding: 2px 12px 14px; font-size: 12px; line-height: 1.55; color: var(--text); white-space: pre-line; }
.sm-ig__cap b { font-weight: 850; }
.sm-ig__cap em { font-style: normal; color: var(--info-text); font-weight: 700; }
.sm-thread { display: flex; flex-direction: column; gap: 12px; }
.sm-msg { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; }
.sm-msg__w { font-size: 10.5px; font-weight: 800; color: var(--text-muted); margin-bottom: 3px; }
.sm-msg__b { background: var(--surface-active); border-radius: var(--sm-r); padding: 9px 11px; font-size: 12px; line-height: 1.55; color: var(--text); }
.sm-asset {
display: flex; flex-direction: column; border-radius: var(--sm-r); overflow: hidden;
border: 1px solid var(--border-light); background: var(--surface); box-shadow: var(--shadow-sm);
text-decoration: none; color: inherit;
transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.2s ease;
}
.sm-asset:hover, .sm-asset:focus-visible { transform: translateY(-4px) scale(1.015); box-shadow: var(--shadow-xl); }
.sm-asset__i, .sm-asset .sm-art { aspect-ratio: 1; }
.sm-asset__i { position: relative; background: var(--surface-active); }
.sm-asset__i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-asset__m { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 9px; min-width: 0; }
.sm-asset__t { font-size: 11.5px; font-weight: 800; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-asset__s { font-size: 10.5px; font-weight: 650; color: var(--text-muted); }
.sm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sm-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sm-scroll .sm-tbl { min-width: 660px; }
.sm-tbl th { text-align: left; font-size: 9.5px; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); padding: 10px 13px; border-bottom: 1px solid var(--border-light); background: var(--surface-active); }
.sm-tbl td { padding: 11px 13px; border-bottom: 1px solid var(--border-light); color: var(--text); vertical-align: middle; }
.sm-tbl tbody tr { transition: background 0.18s ease; }
.sm-tbl tbody tr:hover { background: color-mix(in srgb, var(--primary-soft) 55%, transparent); }
.sm-tbl tr:last-child td { border-bottom: 0; }
.sm-tbl__n { font-weight: 800; }
.sm-tbl__num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }
.sm-steps { display: inline-flex; gap: 4px; }
.sm-step {
width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; font: inherit; font-size: 10px; font-weight: 850;
background: var(--surface-active); color: var(--text-muted); border: 1px solid var(--border-light);
}
.sm-step--on { background: linear-gradient(135deg, var(--success), color-mix(in srgb, var(--success) 65%, black)); color: var(--text-inverse); border-color: transparent; }
.sm-note {
display: block; border: 1.5px dashed var(--border); border-radius: var(--sm-r); padding: 11px 13px;
font-size: 11.5px; font-weight: 650; line-height: 1.55; color: var(--text-secondary);
background: color-mix(in srgb, var(--surface) 45%, transparent);
}
.sm-note::after { content: ''; display: block; clear: both; }
.sm-note svg { float: left; width: 14px; height: 14px; margin: 2px 8px 0 0; opacity: 0.75; }
.sm-note b { color: var(--text); }
.sm-note a { color: var(--primary); font-weight: 800; }
.sm-note--warn {
border-style: solid; border-color: color-mix(in srgb, var(--warning) 45%, transparent);
background: var(--warning-bg); color: var(--warning-text);
}
.sm-note--warn b { color: var(--warning-text); }
.sm-ring { width: 78px; height: 78px; flex: none; position: relative; display: grid; place-items: center; }
.sm-ring svg { width: 78px; height: 78px; transform: rotate(-90deg); }
.sm-ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.sm-ring .t { stroke: var(--surface-active); }
.sm-ring .v { stroke: var(--primary); stroke-dasharray: 100; stroke-dashoffset: 100; animation: smRing 1.8s cubic-bezier(0.2, 0.72, 0.28, 1) 0.35s forwards; }
@keyframes smRing { to { stroke-dashoffset: var(--sm-o); } }
.sm-ring b { position: absolute; font-size: 16px; font-weight: 850; letter-spacing: -0.04em; color: var(--text); text-align: center; }
.sm-ring b span { display: block; font-size: 8.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
@keyframes smRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sm-rise { animation: smRise 0.7s cubic-bezier(0.2, 0.72, 0.28, 1) both; }
.sm-rise:nth-child(1) { animation-delay: 0.03s; }
.sm-rise:nth-child(2) { animation-delay: 0.08s; }
.sm-rise:nth-child(3) { animation-delay: 0.13s; }
.sm-rise:nth-child(4) { animation-delay: 0.18s; }
.sm-rise:nth-child(5) { animation-delay: 0.23s; }
.sm-rise:nth-child(6) { animation-delay: 0.28s; }
@keyframes smPulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 55%, transparent); }
72% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--primary) 0%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent); }
}
.sm-livedot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--text-inverse); flex: none; animation: smPulse 2.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
.sm-rise, .sm-livedot, .sm-aura, .sm-phone,
.sm-fn::after, .sm-bar__f::after, .sm-bar__f, .sm-ring .v, .sm-spark path,
.cal-day.today .cal-daynum { animation: none !important; }
.sm-ring .v { stroke-dashoffset: var(--sm-o); }
.sm-spark path { stroke-dashoffset: 0; }
}
.sm-drawer-scrim { position: fixed; inset: 0; z-index: 35; background: color-mix(in srgb, var(--text) 32%, transparent); display: flex; justify-content: flex-end; }
.sm-drawer { width: min(620px, 100%); background: var(--bg); box-shadow: var(--shadow-xl); display: flex; flex-direction: column; }
.sm-drawer__h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--surface); border-bottom: 1px solid var(--border-light); }
.sm-drawer__h b { font-size: 15px; letter-spacing: -0.02em; margin-right: auto; color: var(--text); }
.sm-drawer__b { flex: 1; overflow-y: auto; padding: 16px 18px 40px; }
.cal-ev-ch { width: 13px; height: 13px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--ec); opacity: 0.95; }
.cal-ev-ch svg { width: 13px; height: 13px; }
.cal-ev.is-row .cal-ev-ch { width: 15px; height: 15px; }
.cal-ev.is-row .cal-ev-ch svg { width: 15px; height: 15px; }
.cal-ev.is-anchor { background: color-mix(in srgb, var(--ec) 14%, var(--surface)); font-weight: 700; }
.cal-ev.is-anchor .cal-ev-title { font-weight: 700; color: color-mix(in srgb, var(--ec) 72%, var(--text)); }
.cal-ev.is-stuck { box-shadow: inset 0 0 0 1.5px var(--danger); }
.cal-stagekey { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cal-stagekey b { font-size: 9.5px; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-right: 2px; }
.cal-sk { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-full); padding: 4px 10px; }
.cal-sk i { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--sc); flex: none; }
.cal-day.today .cal-daynum { animation: smPulse 2.6s ease-out infinite; }
.sm-card .sm-cal-host .cal-grid { border: none; box-shadow: none; border-radius: var(--sm-r); }
.sm-cal-host .cal-ev { text-decoration: none; }
.sm-cal-host .cal-ev.is-done .cal-ev-title { text-decoration: none; }
.sm-cal-host .cal-ev.is-done { opacity: 0.62; }
.sm-cal-host .cal-ag-items .cal-ev.is-row { flex-wrap: wrap; }
.sm-cal-host .cal-ag-items .cal-ev.is-row .cal-ev-title { flex: 1 1 auto; }
.sm-cal-host .cal-ag-items .cal-ev-meta { width: 100%; margin-left: 0; padding-left: 27px; white-space: normal; }
@media (max-width: 1180px) {
.sm-g4, .sm-g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sm-g-2-1, .sm-g-1-2, .sm-comp { grid-template-columns: minmax(0, 1fr); }
.sm-kan { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.sm-ph__t { font-size: 25px; }
.sm-ph__a { margin-left: 0; width: 100%; }
.sm-g2, .sm-g3, .sm-g4, .sm-g5, .sm-kan { grid-template-columns: minmax(0, 1fr); }
.sm-card { padding: 14px; }
.sm-funnel { flex-direction: column; }
.sm-fn, .sm-fn:first-child, .sm-fn:last-child { clip-path: none; border-radius: var(--sm-r); padding: 12px 14px; }
.sm-fn { flex: none; }
.sm-bar { grid-template-columns: minmax(84px, 1fr) minmax(0, 1.4fr) auto; }
.sm-cal-host .cal-ag-day { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
.sm-cal-host .cal-ev.is-row { flex-wrap: wrap; }
.sm-cal-host .cal-ev-meta { white-space: normal; margin-left: 0; }
}
.olami-app .sec-list-head {
display: flex;
justify-content: flex-end;
margin-bottom: 12px;
}
.olami-app .om-pill-muted {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
background: var(--surface-active);
color: var(--text-secondary);
}
.olami-app .om-subtab.sec-email-tab {
text-decoration: none;
color: #fff;
background: var(--primary);
font-weight: 600;
}
.olami-app .om-subtab.sec-email-tab:hover {
background: var(--primary);
filter: brightness(1.08);
color: #fff;
}
.olami-app .sec-analytics-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 18px;
}
.olami-app .sec-analytics-head h3 {
margin: 0 0 4px;
font-size: 18px;
color: var(--text);
font-weight: 700;
}
.olami-app .sec-analytics-head p {
margin: 0;
font-size: 12px;
color: var(--text-secondary);
}
.olami-app .sec-period-toggle {
display: flex;
gap: 4px;
background: var(--bg);
border-radius: 8px;
padding: 3px;
}
.olami-app .sec-period-btn {
padding: 5px 12px;
border: none;
background: transparent;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
font-family: inherit;
}
.olami-app .sec-period-btn.active {
background: var(--primary);
color: var(--text-inverse);
}
.olami-app .sec-fe-stats-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 16px;
}
.olami-app .sec-fe-stats-row.sec-stats-4 {
grid-template-columns: repeat(4, 1fr);
}
.olami-app .sec-fe-stat-card {
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 16px;
text-align: center;
}
.olami-app .sec-fe-stat-value {
font-size: 26px;
font-weight: 800;
color: var(--primary);
line-height: 1;
}
.olami-app .sec-fe-stat-label {
font-size: 10px;
color: var(--text-secondary);
text-transform: uppercase;
margin-top: 6px;
letter-spacing: 0.5px;
font-weight: 600;
}
.olami-app .sec-fe-section {
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
}
.olami-app .sec-fe-section-title {
font-size: 14px;
font-weight: 600;
color: var(--text);
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 8px;
}
.olami-app .sec-charts-2 {
margin-bottom: 0;
}
.olami-app .sec-charts-2 .sec-fe-section {
margin-bottom: 16px;
}
.olami-app .sec-fe-bar-chart {
display: flex;
flex-direction: column;
gap: 10px;
}
.olami-app .sec-fe-bar-item {
display: flex;
align-items: center;
gap: 10px;
}
.olami-app .sec-fe-bar-label {
width: 92px;
font-size: 12px;
color: var(--text-secondary);
flex-shrink: 0;
}
.olami-app .sec-fe-bar-track {
flex: 1;
height: 8px;
background: var(--border-light);
border-radius: 4px;
overflow: hidden;
}
.olami-app .sec-fe-bar-fill {
height: 100%;
background: var(--primary);
border-radius: 4px;
transition: width 0.4s ease;
}
.olami-app .sec-fe-bar-value {
width: 44px;
text-align: right;
font-size: 12px;
font-weight: 600;
color: var(--text);
flex-shrink: 0;
}
.olami-app .sec-trend-section {
padding: 12px 16px;
}
.olami-app .sec-trend-bars {
display: flex;
align-items: flex-end;
gap: 6px;
height: 56px;
}
.olami-app .sec-trend-col {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
height: 100%;
justify-content: flex-end;
}
.olami-app .sec-trend-bar {
width: 100%;
background: var(--primary);
opacity: 0.85;
border-radius: 3px;
min-height: 2px;
}
.olami-app .sec-trend-label {
font-size: 9px;
color: var(--text-muted);
}
.olami-app .sec-table-wrap {
overflow-x: auto;
}
.olami-app .sec-content-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.olami-app .sec-content-table thead tr {
border-bottom: 2px solid var(--border-light);
text-align: left;
}
.olami-app .sec-content-table th {
padding: 8px 10px;
color: var(--text-secondary);
font-weight: 600;
font-size: 11px;
}
.olami-app .sec-content-table th.ctr,
.olami-app .sec-content-table td.ctr {
text-align: center;
}
.olami-app .sec-content-table td {
padding: 8px 10px;
border-bottom: 1px solid var(--border-light);
color: var(--text);
}
.olami-app .sec-content-table .sec-td-title {
font-weight: 600;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.olami-app .sec-rate-pill {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
color: #fff;
}
.olami-app .sec-fe-activity-list {
max-height: 360px;
overflow-y: auto;
}
.olami-app .sec-fe-activity-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--border-light);
}
.olami-app .sec-fe-activity-item:last-child {
border-bottom: none;
}
.olami-app .sec-fe-activity-icon {
width: 28px;
height: 28px;
background: var(--border-light);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
}
.olami-app .sec-fe-activity-info {
flex: 1;
min-width: 0;
}
.olami-app .sec-fe-activity-text {
font-size: 12px;
color: var(--text);
}
.olami-app .sec-fe-activity-text strong {
font-weight: 600;
}
.olami-app .sec-fe-activity-time {
font-size: 10px;
color: var(--text-secondary);
}
.olami-app .sec-fe-empty {
text-align: center;
padding: 48px 20px;
background: var(--bg);
border-radius: 12px;
}
.olami-app .sec-fe-empty-icon {
font-size: 40px;
margin-bottom: 12px;
}
.olami-app .sec-fe-empty h4 {
margin: 0 0 8px;
font-size: 16px;
color: var(--text);
}
.olami-app .sec-fe-empty p {
margin: 0;
font-size: 13px;
color: var(--text-secondary);
}
.olami-app .ann-theme-picker {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.olami-app .theme-option {
cursor: pointer;
}
.olami-app .theme-option input {
display: none;
}
.olami-app .theme-preview {
display: inline-block;
padding: 8px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
border: 2px solid transparent;
transition: all 0.2s;
}
.olami-app .theme-preview.info { background: var(--info-bg); color: var(--info-text); }
.olami-app .theme-preview.success { background: var(--success-bg); color: var(--success-text); }
.olami-app .theme-preview.urgent { background: var(--warning-bg); color: var(--warning-text); }
.olami-app .theme-preview.critical { background: var(--danger-bg); color: var(--danger-text); }
.olami-app .theme-option input:checked + .theme-preview {
border-color: currentColor;
box-shadow: 0 0 0 2px currentColor;
}
.olami-app .ann-live-preview {
background: var(--bg);
border-radius: 10px;
padding: 16px;
}
.olami-app .preview-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
background: var(--info-bg);
border: 1px solid var(--info);
color: var(--info-text);
}
.olami-app .preview-bar.success { background: var(--success-bg); border-color: var(--success); color: var(--success-text); }
.olami-app .preview-bar.urgent { background: var(--warning-bg); border-color: var(--warning); color: var(--warning-text); }
.olami-app .preview-bar.critical { background: var(--danger-bg); border-color: var(--danger); color: var(--danger-text); }
.olami-app .preview-message {
flex: 1;
}
.olami-app .preview-cta {
background: var(--info);
color: var(--text-inverse);
padding: 4px 10px;
border-radius: 5px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.olami-app .preview-bar.success .preview-cta { background: var(--success); }
.olami-app .preview-bar.urgent .preview-cta { background: var(--warning); }
.olami-app .preview-bar.critical .preview-cta { background: var(--danger); }
.olami-app .preview-dismiss {
opacity: 0.6;
font-size: 16px;
}
.olami-app .ann-card-theme.theme-preview {
padding: 3px 10px;
font-size: 11px;
}
.olami-app .sec-poll-builder {
display: grid;
grid-template-columns: 1.4fr 0.9fr;
gap: 24px;
align-items: start;
}
.olami-app .sec-opt-row {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 6px;
}
.olami-app .sec-opt-row > .om-input {
flex: 1;
}
.olami-app .sec-preview-col {
position: sticky;
top: 10px;
}
.olami-app .sec-device-wrapper {
text-align: center;
}
.olami-app .sec-device-mockup {
background: var(--surface);
border-radius: 30px;
border: 8px solid var(--text);
overflow: hidden;
max-width: 450px;
margin: 0 auto;
position: relative;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
.olami-app .sec-device-mockup.scale-down {
width: 260px;
height: 480px;
border-radius: 40px;
border: 10px solid var(--text);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}
.olami-app .sec-device-notch {
width: 100px;
height: 22px;
background: var(--text);
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
z-index: 5;
}
.olami-app .sec-device-screen {
padding: 45px 15px 20px;
height: 100%;
overflow-y: auto;
background: var(--bg);
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
}
.olami-app .sec-poll-card {
background: var(--surface);
border-radius: 20px;
padding: 20px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}
.olami-app .sec-poll-card.preview-mode {
transform: scale(0.97);
}
.olami-app .sec-poll-q {
font-size: 16px;
font-weight: 700;
margin-bottom: 16px;
line-height: 1.4;
color: var(--text);
}
.olami-app .sec-poll-opt {
background: var(--bg);
padding: 12px 16px;
border-radius: 12px;
margin-bottom: 8px;
font-weight: 500;
color: var(--text);
border: 2px solid transparent;
transition: all 0.2s;
font-size: 14px;
}
.olami-app .sec-poll-opt:hover {
border-color: var(--primary);
background: var(--primary-soft);
}
.olami-app .sec-preview-hint {
font-size: 12px;
color: var(--text-secondary);
margin-top: 10px;
text-align: center;
}
.olami-app .sec-preview-label {
margin-top: 16px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-secondary);
}
.olami-app .sec-editor-modal .olami-db-modal-body {
max-height: 72vh;
overflow-y: auto;
}
.olami-app .sec-audience-block {
border-top: 1px solid var(--border-light);
padding-top: 16px;
margin-top: 4px;
}
@media (max-width: 900px) {
.olami-app .sec-poll-builder { grid-template-columns: 1fr; }
.olami-app .sec-preview-col { position: static; margin-top: 8px; }
.olami-app .sec-charts-2 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.olami-app .sec-fe-stats-row.sec-stats-4 { grid-template-columns: repeat(2, 1fr); }
.olami-app .sec-fe-bar-label { width: 78px; font-size: 11px; }
}
@media (max-width: 500px) {
.olami-app .sec-fe-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.olami-app .sec-fe-stats-row, .olami-app .sec-fe-stats-row.sec-stats-4 { grid-template-columns: repeat(2, 1fr) !important; }
.olami-app .sec-poll-builder { grid-template-columns: 1fr !important; }
}
[x-cloak] { display: none !important; }
.olami-app .intake-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 18px;
border-radius: var(--radius, 8px);
border: 1px solid var(--border-light, #e5e7eb);
background: var(--surface, #fff);
color: var(--text, #1d1d1f);
font-size: 14px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: var(--transition, all 0.2s ease);
min-height: 42px;
}
.olami-app .intake-btn:hover { background: var(--surface-hover, #fafafa); }
.olami-app .intake-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.olami-app .intake-btn-primary {
background: var(--primary, #e21b4d);
border-color: var(--primary, #e21b4d);
color: #fff;
}
.olami-app .intake-btn-primary:hover { background: var(--primary-hover, #b8163f); }
.olami-app .intake-btn-success {
background: var(--success, #34c759);
border-color: var(--success, #34c759);
color: #fff;
}
.olami-app .intake-btn-success:hover { filter: brightness(0.95); }
.olami-app .intake-btn-ghost {
background: transparent;
border-color: var(--border, #d2d2d7);
color: var(--text-secondary, #86868b);
}
.olami-app .intake-btn-ghost:hover { background: var(--surface-hover, #fafafa); }
.olami-app .intake-header {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding: 14px 16px;
margin: -8px -4px 16px;
background: var(--surface, #fff);
border: 1px solid var(--border-light, #e5e7eb);
border-radius: var(--radius-md, 12px);
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}
.olami-app .intake-header-main {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.olami-app .intake-back {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--radius-full, 9999px);
background: var(--surface-active, #f0f0f0);
color: var(--text, #1d1d1f);
font-size: 20px;
text-decoration: none;
flex-shrink: 0;
}
.olami-app .intake-back:hover { background: var(--border-light, #e5e7eb); }
.olami-app .intake-avatar {
width: 44px;
height: 44px;
border-radius: var(--radius-full, 9999px);
color: #fff;
font-weight: 700;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.olami-app .intake-who { min-width: 0; }
.olami-app .intake-name {
font-size: 18px;
font-weight: 700;
color: var(--text, #1d1d1f);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.olami-app .intake-sub {
font-size: 13px;
color: var(--text-secondary, #86868b);
display: flex;
align-items: center;
gap: 6px;
}
.olami-app .intake-dot { color: var(--text-muted, #9ca3af); }
.olami-app .intake-header-side {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.olami-app .intake-saved {
font-size: 13px;
font-weight: 600;
color: var(--success-text, #166534);
background: var(--success-soft, rgba(52, 199, 89, 0.1));
padding: 5px 10px;
border-radius: var(--radius-full, 9999px);
}
.olami-app .intake-ring {
position: relative;
width: 56px;
height: 56px;
flex-shrink: 0;
}
.olami-app .intake-ring-bg {
fill: none;
stroke: var(--border-light, #e5e7eb);
stroke-width: 6;
}
.olami-app .intake-ring-fg {
fill: none;
stroke: var(--primary, #e21b4d);
stroke-width: 6;
stroke-linecap: round;
transition: stroke-dashoffset 0.4s ease;
}
.olami-app .intake-ring-label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
color: var(--text, #1d1d1f);
}
.olami-app .intake-badge {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: var(--radius-full, 9999px);
font-size: 13px;
font-weight: 700;
color: var(--stage-color, #94a3b8);
background: color-mix(in srgb, var(--stage-color, #94a3b8) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--stage-color, #94a3b8) 35%, transparent);
white-space: nowrap;
}
.olami-app .intake-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.olami-app .intake-banner {
padding: 12px 16px;
border-radius: var(--radius, 8px);
font-size: 14px;
font-weight: 500;
margin-bottom: 16px;
border: 1px solid transparent;
}
.olami-app .intake-banner-amber {
background: var(--warning-bg, #fffbeb);
color: var(--warning-text, #92400e);
border-color: color-mix(in srgb, var(--warning, #ff9500) 30%, transparent);
}
.olami-app .intake-banner-green {
background: var(--success-bg, #dcfce7);
color: var(--success-text, #166534);
border-color: color-mix(in srgb, var(--success, #34c759) 30%, transparent);
}
.olami-app .intake-banner-red {
background: var(--danger-bg, #fef2f2);
color: var(--danger-text, #991b1b);
border-color: color-mix(in srgb, var(--danger, #ff3b30) 30%, transparent);
}
.olami-app .intake-pills {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 4px 2px 12px;
margin-bottom: 12px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.olami-app .intake-pill {
flex: 0 0 auto;
padding: 9px 16px;
border-radius: var(--radius-full, 9999px);
border: 1px solid var(--border-light, #e5e7eb);
background: var(--surface, #fff);
color: var(--text-secondary, #86868b);
font-size: 14px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
white-space: nowrap;
transition: var(--transition, all 0.2s ease);
min-height: 40px;
}
.olami-app .intake-pill:hover { background: var(--surface-hover, #fafafa); color: var(--text, #1d1d1f); }
.olami-app .intake-pill.active {
background: var(--primary, #e21b4d);
border-color: var(--primary, #e21b4d);
color: #fff;
}
.olami-app .intake-pill-staff { border-style: dashed; }
.olami-app .intake-pill-staff.active { border-style: solid; }
.olami-app .intake-pill-count {
display: inline-block;
margin-left: 7px;
padding: 1px 7px;
border-radius: 9999px;
font-size: 11px;
font-weight: 700;
background: color-mix(in srgb, var(--text, #1d1d1f) 8%, transparent);
color: var(--text-secondary, #86868b);
}
.olami-app .intake-pill.active .intake-pill-count { background: rgba(255, 255, 255, 0.25); color: #fff; }
.olami-app .intake-pill-count.is-full { background: color-mix(in srgb, #16a34a 18%, transparent); color: #15803d; }
.olami-app .intake-pill.active .intake-pill-count.is-full { background: rgba(255, 255, 255, 0.3); color: #fff; }
.olami-app .intake-chip-logged {
display: inline-flex;
align-items: center;
padding: 8px 14px;
border-radius: var(--radius-full, 9999px);
font-size: 13px;
font-weight: 700;
background: color-mix(in srgb, #16a34a 12%, transparent);
color: #15803d;
white-space: nowrap;
}
.olami-app .intake-section {
background: var(--surface, #fff);
border: 1px solid var(--border-light, #e5e7eb);
border-radius: var(--radius-md, 12px);
padding: 20px;
box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.03));
}
.olami-app .intake-section-note {
font-size: 13px;
font-weight: 600;
color: var(--text-secondary, #86868b);
background: var(--surface-active, #f0f0f0);
padding: 8px 12px;
border-radius: var(--radius, 8px);
margin-bottom: 16px;
}
.olami-app .intake-questions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 24px;
}
.olami-app .intake-q { display: flex; flex-direction: column; gap: 10px; }
.olami-app .intake-q-wfull { grid-column: 1 / -1; }
.olami-app .intake-q-whalf { grid-column: span 1; }
.olami-app .intake-q.is-locked { opacity: 0.85; }
.olami-app .intake-prompt {
font-size: 15px;
font-weight: 600;
color: var(--text, #1d1d1f);
line-height: 1.4;
}
.olami-app .intake-input,
.olami-app .intake-textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--border, #d2d2d7);
border-radius: var(--radius, 8px);
background: var(--surface, #fff);
color: var(--text, #1d1d1f);
font-size: 16px;
font-family: inherit;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.olami-app .intake-input:focus,
.olami-app .intake-textarea:focus {
outline: none;
border-color: var(--primary, #e21b4d);
box-shadow: 0 0 0 3px var(--primary-soft, rgba(226, 27, 77, 0.1));
}
.olami-app .intake-textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.olami-app .intake-input-num { max-width: 160px; }
.olami-app .intake-input-date { max-width: 220px; }
.olami-app .intake-input:disabled,
.olami-app .intake-textarea:disabled {
background: var(--surface-active, #f0f0f0);
color: var(--text-secondary, #86868b);
cursor: not-allowed;
}
.olami-app .intake-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.olami-app .intake-chip {
padding: 10px 16px;
border-radius: var(--radius-full, 9999px);
border: 1.5px solid var(--border, #d2d2d7);
background: var(--surface, #fff);
color: var(--text, #1d1d1f);
font-size: 15px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: var(--transition, all 0.2s ease);
min-height: 42px;
}
.olami-app .intake-chip:hover:not(:disabled) {
border-color: var(--primary, #e21b4d);
color: var(--primary, #e21b4d);
}
.olami-app .intake-chip.active {
background: var(--primary, #e21b4d);
border-color: var(--primary, #e21b4d);
color: #fff;
font-weight: 600;
}
.olami-app .intake-chip:disabled { opacity: 0.6; cursor: not-allowed; }
.olami-app .intake-toggle {
display: inline-flex;
border: 1.5px solid var(--border, #d2d2d7);
border-radius: var(--radius-full, 9999px);
overflow: hidden;
align-self: flex-start;
}
.olami-app .intake-toggle-opt {
padding: 10px 26px;
background: var(--surface, #fff);
color: var(--text-secondary, #86868b);
font-size: 15px;
font-weight: 600;
font-family: inherit;
border: none;
cursor: pointer;
min-height: 42px;
transition: var(--transition, all 0.2s ease);
}
.olami-app .intake-toggle-opt + .intake-toggle-opt { border-left: 1.5px solid var(--border, #d2d2d7); }
.olami-app .intake-toggle-opt.active { background: var(--primary, #e21b4d); color: #fff; }
.olami-app .intake-toggle-opt:disabled { opacity: 0.6; cursor: not-allowed; }
.olami-app .intake-rating { display: flex; flex-wrap: wrap; gap: 8px; }
.olami-app .intake-rating-dot {
width: 44px;
height: 44px;
border-radius: var(--radius, 8px);
border: 1.5px solid var(--border, #d2d2d7);
background: var(--surface, #fff);
color: var(--text-secondary, #86868b);
font-size: 15px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: var(--transition, all 0.2s ease);
}
.olami-app .intake-rating-dot:hover:not(:disabled) { border-color: var(--primary, #e21b4d); }
.olami-app .intake-rating-dot.filled {
background: var(--primary-soft, rgba(226, 27, 77, 0.1));
border-color: var(--primary, #e21b4d);
color: var(--primary, #e21b4d);
}
.olami-app .intake-rating-dot.active {
background: var(--primary, #e21b4d);
border-color: var(--primary, #e21b4d);
color: #fff;
}
.olami-app .intake-rating-dot:disabled { opacity: 0.6; cursor: not-allowed; }
.olami-app .intake-empty {
text-align: center;
padding: 64px 24px;
color: var(--text-secondary, #86868b);
}
.olami-app .intake-empty-icon { font-size: 48px; margin-bottom: 12px; }
.olami-app .intake-empty h3 { font-size: 18px; font-weight: 700; color: var(--text, #1d1d1f); margin-bottom: 6px; }
.olami-app .intake-empty p { margin-bottom: 16px; }
.olami-app .intake-modal-overlay {
position: fixed;
inset: 0;
z-index: 50;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.olami-app .intake-modal {
width: 100%;
max-width: 480px;
background: var(--surface, #fff);
border-radius: var(--radius-lg, 16px);
box-shadow: var(--shadow-xl, 0 25px 50px rgba(0, 0, 0, 0.12));
overflow: hidden;
}
.olami-app .intake-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border-light, #e5e7eb);
}
.olami-app .intake-modal-head h3 { font-size: 17px; font-weight: 700; color: var(--text, #1d1d1f); }
.olami-app .intake-modal-close {
background: none;
border: none;
font-size: 24px;
line-height: 1;
color: var(--text-muted, #9ca3af);
cursor: pointer;
}
.olami-app .intake-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.olami-app .intake-modal-foot {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 16px 20px;
border-top: 1px solid var(--border-light, #e5e7eb);
}
@media (max-width: 760px) {
.olami-app .intake-header { flex-direction: column; align-items: stretch; }
.olami-app .intake-header-side { justify-content: space-between; }
.olami-app .intake-questions { grid-template-columns: 1fr; }
.olami-app .intake-q-whalf { grid-column: 1 / -1; }
.olami-app .intake-actions { flex: 1; }
.olami-app .intake-actions .intake-btn { flex: 1; }
}
.olami-app .ix2-topwrap { position: sticky; top: 52px; z-index: 30; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 11px 16px; margin: -8px -4px 14px; background: rgba(255,255,255,0.85);
backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
border: 1px solid var(--border-light, #e5e7eb); border-radius: var(--radius-md, 12px); box-shadow: var(--shadow-sm); }
.olami-app .ix2-top, .olami-app .ix2-topacts { display: contents; }
.olami-app .ix2-top-avatar { width: 42px; height: 42px; flex: none; border-radius: var(--radius-full, 9999px); color: #fff;
font-weight: 700; font-size: 15px; display: grid; place-items: center; }
.olami-app .ix2-top-who { min-width: 0; margin-right: auto; }
.olami-app .ix2-top-name { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olami-app .ix2-top-sub { font-size: 12.5px; color: var(--text-secondary, #86868b); display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.olami-app .ix2-saved { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--success, #34c759); }
.olami-app .ix2-saved .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success, #34c759); }
.olami-app .ix2-shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 24px; align-items: start; }
.olami-app .ix2-rail { position: sticky; top: 120px; background: var(--surface, #fff); border: 1px solid var(--border, #d2d2d7);
border-radius: var(--radius-md, 12px); padding: 10px; box-shadow: var(--shadow-sm); max-height: calc(100vh - 140px); overflow: auto; }
.olami-app .ix2-rail-top { padding: 6px 8px 10px; }
.olami-app .ix2-rail-top-row { display: flex; justify-content: space-between; align-items: baseline; }
.olami-app .ix2-rail-top-row span { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted, #9ca3af); }
.olami-app .ix2-rail-top-row b { font-size: 16px; font-weight: 800; letter-spacing: -0.5px; }
.olami-app .ix2-pbar { height: 6px; border-radius: var(--radius-full, 9999px); background: var(--border-light, #e5e7eb); overflow: hidden; margin-top: 8px; }
.olami-app .ix2-pbar > i { display: block; height: 100%; background: var(--primary, #e21b4d); border-radius: inherit; transition: width 0.3s; }
.olami-app .ix2-rail-sub { font-size: 11px; color: var(--text-muted, #9ca3af); margin-top: 6px; }
.olami-app .ix2-rail-label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted, #9ca3af); padding: 8px 10px 4px; }
.olami-app .ix2-rail-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; font-size: 13px; font-weight: 500;
color: var(--text, #1d1d1f); border-radius: var(--radius, 8px); margin-bottom: 1px; cursor: pointer; text-decoration: none; transition: background 0.12s, color 0.12s; }
.olami-app .ix2-rail-item:hover { background: var(--border-light, #e5e7eb); }
.olami-app .ix2-rail-item.active { background: var(--primary-soft, rgba(226,27,77,0.1)); color: var(--primary, #e21b4d); font-weight: 600; }
.olami-app .ix2-rail-item .ico { font-size: 14px; line-height: 1; flex: none; }
.olami-app .ix2-rail-lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olami-app .ix2-rail-ct { font-size: 10.5px; font-weight: 600; color: var(--text-muted, #9ca3af); }
.olami-app .ix2-rail-item.active .ix2-rail-ct { color: var(--primary, #e21b4d); }
.olami-app .ix2-rail-ct.done { color: #1f9d4d; }
.olami-app .ix2-rail-divider { height: 1px; background: var(--border, #d2d2d7); margin: 8px 4px; }
.olami-app .ix2-rail-save { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-secondary, #86868b);
padding: 8px 10px; background: var(--surface-hover, #fafafa); border-radius: var(--radius, 8px); border: 1px dashed var(--border, #d2d2d7); }
.olami-app .ix2-rail-save .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success, #34c759); }
.olami-app .ix2-main { min-width: 0; }
.olami-app .ix2-sec { background: var(--surface, #fff); border: 1px solid var(--border-light, #e5e7eb); border-radius: var(--radius-lg, 16px);
box-shadow: var(--shadow-sm); margin-bottom: 18px; scroll-margin-top: 120px; overflow: hidden; }
.olami-app .ix2-sec-head { display: flex; align-items: center; gap: 12px; padding: 17px 22px; border-bottom: 1px solid var(--border-light, #e5e7eb); }
.olami-app .ix2-sec-ic { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; font-size: 18px; background: var(--primary-soft, rgba(226,27,77,0.1)); }
.olami-app .ix2-sec-title { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; }
.olami-app .ix2-sec-sub { font-size: 12px; color: var(--text-secondary, #86868b); }
.olami-app .ix2-sec-count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-secondary, #86868b); background: var(--surface-active, #f0f0f0); padding: 5px 11px; border-radius: var(--radius-full, 9999px); }
.olami-app .ix2-fields { padding: 16px 22px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.olami-app .ix2-fld { min-width: 0; }
.olami-app .ix2-fld.wide { grid-column: 1 / -1; }
.olami-app .ix2-script { border: 1px dashed var(--ix-line, #d8dee9); border-radius: 10px; background: var(--ix-soft, #f8fafc); }
.olami-app .ix2-script > summary { cursor: pointer; padding: 10px 12px; font-size: 13px; font-weight: 700; list-style: none; }
.olami-app .ix2-script > summary::-webkit-details-marker { display: none; }
.olami-app .ix2-script > summary::before { content: '▸ '; opacity: .6; }
.olami-app .ix2-script[open] > summary::before { content: '▾ '; }
.olami-app .ix2-script-body { padding: 0 12px 12px; font-size: 13px; line-height: 1.6; color: var(--ix-soft-ink, #475569); white-space: normal; }
.olami-app .ix2-fld-lbl { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.olami-app .ix2-fld-hint { font-weight: 500; color: var(--text-muted, #9ca3af); }
.olami-app .ix2-auto { font-size: 10px; font-weight: 700; color: var(--primary, #e21b4d); background: var(--primary-soft, rgba(226,27,77,0.1)); border-radius: var(--radius-full, 9999px); padding: 2px 8px; }
.olami-app .ix2-fields textarea.intake-input, .olami-app .ix2-goal-body textarea.intake-input { min-height: 56px; resize: vertical; line-height: 1.5; }
.olami-app .ix2-note-btn { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--text-secondary, #86868b); background: none; border: none; cursor: pointer; padding: 2px 0; font-family: inherit; }
.olami-app .ix2-note-btn:hover { color: var(--primary, #e21b4d); }
.olami-app .ix2-note { margin-top: 8px; }
.olami-app .ix2-sec-goal { border-color: rgba(22,163,74,0.35); }
.olami-app .ix2-sec-goal .ix2-sec-head { background: linear-gradient(90deg, rgba(22,163,74,0.07), transparent); }
.olami-app .ix2-sec-goal .ix2-sec-ic { background: rgba(22,163,74,0.14); }
.olami-app .ix2-sec-goal .ix2-sec-count { background: rgba(22,163,74,0.14); color: #1f9d4d; }
.olami-app .ix2-goal-body { padding: 16px 22px 22px; display: flex; flex-direction: column; gap: 16px; }
.olami-app .ix2-goal-current { background: var(--surface-hover, #fafafa); border: 1px solid var(--border-light, #e5e7eb); border-radius: var(--radius, 8px); padding: 12px 14px; }
.olami-app .ix2-goal-current-h { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted, #9ca3af); margin-bottom: 8px; }
.olami-app .ix2-goal-link { color: var(--primary, #e21b4d); text-decoration: none; text-transform: none; letter-spacing: 0; }
.olami-app .ix2-goal-row { font-size: 13.5px; padding: 3px 0; }
.olami-app .ix2-goal-or { display: flex; align-items: center; gap: 12px; color: var(--text-muted, #9ca3af); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.olami-app .ix2-goal-or::before, .olami-app .ix2-goal-or::after { content: ""; flex: 1; height: 1px; background: var(--border-light, #e5e7eb); }
.olami-app .ix2-goal-compose { display: flex; gap: 10px; }
.olami-app .ix2-goal-compose .intake-input { flex: 1; }
.olami-app .ix2-goal-hint { font-size: 12.5px; color: #166534; background: rgba(22,163,74,0.08); border: 1px solid rgba(22,163,74,0.25); border-radius: var(--radius, 8px); padding: 10px 13px; }
.olami-app .ix2-foot { text-align: center; color: var(--text-muted, #9ca3af); font-size: 12px; padding: 20px 0 50px; }
@media (max-width: 1024px) {
.olami-app .ix2-shell { grid-template-columns: 1fr; }
.olami-app .ix2-rail { position: static; top: auto; max-height: none; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; align-items: center; margin-bottom: 14px; }
.olami-app .ix2-rail-top, .olami-app .ix2-rail-label, .olami-app .ix2-rail-divider, .olami-app .ix2-rail-save, .olami-app .ix2-rail-ct { display: none; }
.olami-app .ix2-rail-item { flex: none; }
.olami-app .ix2-fields { grid-template-columns: 1fr; }
.olami-app .ix2-goal-compose { flex-direction: column; }
}
@media (max-width: 640px) {
.olami-app .ix2-topwrap { display: contents; }
.olami-app .ix2-top { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
position: sticky; top: 56px; z-index: 30; padding: 9px 12px; margin: -4px 0 0;
background: rgba(255,255,255,0.92);
backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
border: 1px solid var(--border-light, #e5e7eb); border-radius: var(--radius-md, 12px); box-shadow: var(--shadow-sm); }
.olami-app .ix2-topacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.olami-app .ix2-topacts .intake-btn { flex: 1 1 auto; justify-content: center; }
.olami-app .ix2-top-avatar { width: 34px; height: 34px; font-size: 13px; }
.olami-app .ix2-top-who { flex: 1 1 auto; }
.olami-app .ix2-top-name { font-size: 15px; }
.olami-app .ix2-top-sub { flex-wrap: nowrap; overflow: hidden; }
.olami-app .ix2-top .intake-ring { flex: none; }
.olami-app .ix2-top .intake-ring svg { width: 38px; height: 38px; }
.olami-app .ix2-top .ix2-saved { display: none !important; }
.olami-app .ix2-sec { scroll-margin-top: 128px; }
.olami-app .ix2-fields, .olami-app .ix2-goal-body { padding: 14px 14px 18px; gap: 14px; }
.olami-app .ix2-sec-head { padding: 14px 14px; gap: 10px; }
.olami-app .ix2-sec-ic { width: 32px; height: 32px; font-size: 15px; }
.olami-app .ix2-sec { margin-bottom: 14px; }
.olami-app .intake-back { min-width: 40px; min-height: 40px; }
.olami-app .ix2-rail-item { min-height: 40px; }
.olami-app .intake-chip { min-height: 40px; }
}
@media print {
.olami-app .ix2-topwrap, .olami-app .ix2-rail, .olami-app .ix2-saved, .olami-app .ix2-foot, .olami-app .ix2-note-btn, .olami-app .intake-banner { display: none !important; }
.olami-app .ix2-shell { grid-template-columns: 1fr; }
.olami-app .ix2-sec { box-shadow: none; border-color: #ccc; break-inside: avoid; margin-bottom: 12px; }
.olami-app .ix2-note { display: block !important; }
}
* {
scrollbar-width: thin;
scrollbar-color: var(--border, #d2d2d7) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: var(--border, #d2d2d7);
border-radius: 8px;
border: 2px solid transparent;
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--border-hover, #b0b0b5); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }
.fi-body {
background-color: var(--bg);
font-family: var(--font-sans);
color: var(--text);
}
.fi-main-ctn { background-color: var(--bg); }
.fi-main {
padding: 12px 28px max(40px, var(--omm-zone-ai, 0px));
max-width: var(--shell-max-width, 1800px);
margin-inline: auto;
}
.fi-page-header-main-ctn { padding-block: 0 !important; }
.fi-page-main { gap: calc(var(--spacing, 0.25rem) * 4) !important; }
.fi-page-header-main-ctn:not(:has(*)) { display: none !important; }
.fi-sidebar.fi-main-sidebar {
background-color: var(--surface);
border-inline-end: 1px solid var(--border-light);
box-shadow: none;
}
.fi-sidebar-header {
background-color: var(--surface);
border-bottom: 1px solid var(--border-light);
box-shadow: none;
height: 52px;
flex: none;
}
.fi-sidebar-header-logo-ctn {
gap: 0.55rem;
font-weight: 700;
letter-spacing: -0.02em;
flex-wrap: nowrap;
white-space: nowrap;
}
.fi-sidebar-header-logo-ctn::before {
content: "";
width: 26px;
height: 26px;
flex: none;
border-radius: 7px;
background: linear-gradient(135deg, var(--primary), #5856d6);
}
.fi-sidebar .fi-logo { white-space: nowrap; font-size: 13px; }
.fi-sidebar-nav { padding: 8px 6px; row-gap: 4px; overflow-x: hidden; scrollbar-gutter: auto; }
.fi-sidebar-nav-groups { row-gap: 6px; margin-inline: 0; }
.fi-sidebar-group { row-gap: 1px; }
.fi-sidebar-group-items { row-gap: 1px; }
.fi-sidebar-group-label {
font-size: 0.5625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--text-muted);
white-space: nowrap;
}
.fi-sidebar-group + .fi-sidebar-group { margin-top: 0.375rem; }
.fi-sidebar-item-btn {
border-radius: var(--radius-sm);
padding: 7px 10px;
column-gap: 10px;
font-size: 12.5px;
font-weight: 500;
color: var(--text-secondary);
background-color: transparent;
min-height: 32px;
white-space: nowrap;
}
.fi-sidebar-item-btn:hover { background-color: var(--surface-active); color: var(--text); }
.fi-sidebar-item-icon { color: var(--text-muted); width: 1.25rem; height: 1.25rem; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
background-color: var(--primary-soft);
color: var(--primary);
font-weight: 600;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon { color: var(--primary); }
.fi-sidebar-footer { border-top: 1px solid var(--border-light); background-color: var(--surface); }
nav.fi-topbar {
background-color: var(--surface);
border-bottom: 1px solid var(--border-light);
box-shadow: none;
min-height: 52px;
}
.fi-topbar .fi-logo,
.fi-topbar-ctn .fi-logo { display: none; }
.omm-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border-radius: var(--radius);
font-size: 13px;
font-weight: 600;
border: 1px solid var(--border-light);
background: var(--surface);
color: var(--text);
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: var(--transition);
}
.omm-btn:hover { background: var(--surface-hover); }
.omm-btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.omm-btn-primary:hover { background: var(--primary-hover); color: #fff; }
.omm-topbar-actions { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: 8px; }
.omm-breadcrumb { font-size: 12px; color: var(--text-secondary); font-weight: 500; white-space: nowrap; }
[x-cloak] { display: none !important; }
.omm-topbar-start { display: inline-flex; align-items: center; gap: 14px; }
.omm-tenant { position: relative; }
.omm-tenant > summary { list-style: none; cursor: pointer; }
.omm-tenant > summary::-webkit-details-marker { display: none; }
.omm-tenant > summary::marker { content: ""; }
.omm-tenant[open] { z-index: var(--z-dropdown, 1000); }
.omm-tenant[open] .omm-tenant-caret { transform: rotate(180deg); }
.omm-tenant-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid var(--border-light);
border-radius: var(--radius);
padding: 4px 10px 4px 4px;
background: var(--surface);
cursor: pointer;
font: inherit;
}
.omm-tenant-trigger:hover { background: var(--surface-hover); }
.omm-tenant-trigger--static { cursor: default; }
.omm-tenant-trigger--static:hover { background: var(--surface); }
.omm-tenant-avatar {
width: 24px;
height: 24px;
flex: none;
border-radius: 6px;
background: #1d1d1f;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
}
.omm-tenant-name { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
.omm-tenant-caret { color: var(--text-muted); font-size: 10px; }
.omm-tenant-dropdown {
position: fixed;
top: 0;
inset-inline-start: 0;
min-width: 210px;
max-width: calc(100vw - 16px);
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 6px;
z-index: var(--z-dropdown, 1000);
}
.omm-tenant-item {
display: block;
padding: 8px 10px;
border-radius: var(--radius-sm);
font-size: 13px;
color: var(--text);
text-decoration: none;
white-space: nowrap;
}
.omm-tenant-item:hover { background: var(--surface-hover); }
.omm-tenant-item.is-current { color: var(--primary); font-weight: 600; }
.omm-tenant-item--external { border-top: 1px solid var(--border, #e5e7eb); color: var(--text-secondary, #6b7280); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.omm-tenant-item--external + .omm-tenant-item--external { border-top: 0; }
.omm-tenant-item--external span { opacity: .55; font-size: 11px; }
.fi-sidebar .fi-tenant-menu { display: none; }
.fi-sidebar-group-btn { padding: 4px 10px 2px; min-height: 0; pointer-events: none; }
@media (min-width: 1024px) {
.fi-topbar-ctn { position: sticky; top: 0; z-index: 40; }
.fi-sidebar-header-ctn { display: none; }
.fi-sidebar.fi-main-sidebar {
position: fixed;
top: 52px;
bottom: 0;
inset-inline-start: 0;
width: 52px !important;
height: calc(100vh - 52px);
overflow: hidden;
z-index: 30;
display: flex;
flex-direction: column;
transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.fi-sidebar.fi-main-sidebar:hover { width: 200px !important; box-shadow: var(--shadow-lg); }
.fi-sidebar.fi-main-sidebar .fi-sidebar-item-btn,
.fi-sidebar.fi-main-sidebar .fi-sidebar-group-btn { justify-content: flex-start; padding-inline: 10px; column-gap: 10px; }
.fi-sidebar.fi-main-sidebar .fi-sidebar-item-icon { flex: none; }
.fi-sidebar.fi-main-sidebar:not(:hover) .fi-sidebar-item-label,
.fi-sidebar.fi-main-sidebar:not(:hover) .fi-sidebar-group-label,
.fi-sidebar.fi-main-sidebar:not(:hover) .fi-sidebar-item-badge-ctn { opacity: 0; }
.fi-sidebar-nav { flex: 1; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.fi-sidebar-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
.fi-main-ctn { margin-inline-start: 52px; }
}
.fi-header-heading {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.3px;
color: var(--text);
}
.fi-header-subheading { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.fi-breadcrumbs-item-label { color: var(--text-secondary); }
.fi-breadcrumbs-item-label:hover { color: var(--text); }
.fi-ta-ctn,
.fi-ta-content-ctn {
background-color: var(--surface);
border-radius: var(--radius-md);
border-color: var(--border-light);
box-shadow: var(--shadow-sm);
}
.fi-ta-header-ctn, .fi-ta-header, .fi-ta-header-toolbar {
background-color: var(--surface);
border-color: var(--border-light);
}
.fi-ta-header-heading { font-size: 14px; font-weight: 700; color: var(--text); }
.fi-ta-table { font-size: 13px; }
.fi-ta-header-cell {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
background-color: var(--surface-hover);
white-space: nowrap;
}
.fi-ta-header-cell .fi-ta-header-cell-label { color: var(--text-muted); }
.fi-ta-cell { font-size: 13px; color: var(--text); }
.fi-ta-row { transition: background 0.15s; }
.fi-ta-row:hover { background-color: var(--surface-hover); }
.fi-section {
background-color: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.fi-section-header-heading { font-size: 14px; font-weight: 700; color: var(--text); }
.fi-fo-field-label,
.fi-fo-field-label-content {
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.fi-input-wrp {
border-radius: var(--radius-sm);
border-color: var(--border);
background-color: var(--surface);
}
.fi-input-wrp:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-soft);
}
.fi-input { font-size: 13px; color: var(--text); }
.fi-btn { border-radius: var(--radius); font-weight: 600; }
.fi-btn.fi-color-primary {
background-color: var(--primary) !important;
color: #fff !important;
}
.fi-btn.fi-color-primary:hover { background-color: var(--primary-hover) !important; }
.fi-btn.fi-color-danger { background-color: var(--danger) !important; color: #fff !important; }
.fi-btn.fi-color-success { background-color: var(--success) !important; color: #fff !important; }
.fi-badge { border-radius: var(--radius-full); font-weight: 600; }
.fi-badge.fi-color-primary { background-color: var(--primary-soft) !important; color: var(--primary) !important; }
.fi-badge.fi-color-success { background-color: var(--success-soft) !important; color: var(--success-text) !important; }
.fi-badge.fi-color-danger { background-color: var(--danger-soft) !important; color: var(--danger-text) !important; }
.fi-badge.fi-color-warning { background-color: var(--warning-soft) !important; color: var(--warning-text) !important; }
.fi-badge.fi-color-info { background-color: var(--info-soft) !important; color: var(--info-text) !important; }
.fi-tabs-item.fi-active { color: var(--primary) !important; }
.fi-tabs-item.fi-active .fi-tabs-item-label { color: var(--primary) !important; }
.fi-pagination-overview { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.omm-emoji { font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.fi-sidebar-item-icon:has(.omm-emoji) { color: inherit; }
.omm-foot {
display: flex;
align-items: center;
gap: 8px;
padding: 10px;
border-top: 1px solid var(--border-light);
white-space: nowrap;
}
.omm-foot-avatar {
width: 28px;
height: 28px;
flex: none;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), #5856d6);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
.omm-foot-info { min-width: 0; overflow: hidden; }
.omm-foot-name { font-size: 11px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.omm-foot-role { font-size: 9px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
.fi-global-search { display: none; }
@media (min-width: 1024px) {
.fi-sidebar.fi-main-sidebar:not(:hover) .omm-foot-info { opacity: 0; }
}
@media (max-width: 1023px) {
nav.fi-topbar {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 8px;
padding: 6px 10px;
min-height: 56px;
}
.fi-topbar .fi-topbar-open-sidebar-btn,
.fi-topbar .fi-topbar-close-sidebar-btn { order: -2; flex: none; }
.fi-topbar .omm-topbar-start { order: -1; min-width: 0; flex: 1 1 auto; gap: 8px; overflow: visible; }
.fi-topbar .omm-tenant-trigger { max-width: 100%; min-width: 0; overflow: hidden; }
.fi-topbar .omm-tenant-name { min-width: 0; flex: 0 1 auto; }
.fi-topbar .omm-topbar-start .omm-breadcrumb { display: none; }
.fi-topbar .omm-tenant { min-width: 0; }
.fi-topbar .omm-tenant-trigger { min-height: 40px; max-width: 52vw; }
.fi-topbar .omm-tenant-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
.fi-topbar .omm-tenant-dropdown { max-width: calc(100vw - 24px); }
.fi-topbar .fi-topbar-start { flex: 0 0 auto; min-width: 0; padding: 0; }
.fi-topbar .fi-topbar-end { order: 5; margin-inline-start: auto; flex: none; }
.fi-topbar .omm-topbar-actions { order: 6; flex: none; margin-inline-start: 0; gap: 6px; }
.fi-topbar .omm-topbar-actions .omm-btn { min-height: 40px; padding: 0 14px; }
.fi-topbar .fi-icon-btn,
.fi-topbar .fi-dropdown-trigger > button,
.fi-topbar button { min-height: 40px; }
}
@media (max-width: 480px) {
.fi-topbar .omm-topbar-actions .omm-btn { padding: 0 12px; font-size: 0; }
.fi-topbar .omm-topbar-actions .omm-btn--phone-hide { display: none; }
.fi-topbar .omm-topbar-actions .omm-btn::before { content: attr(data-omm-icon); font-size: 18px; font-weight: 700; }
.fi-topbar .omm-tenant-trigger { max-width: 100%; }
}
@media (min-width: 481px) {
.fi-user-menu .omm-phone-only { display: none; }
}
@media (max-width: 1023px) {
.fi-sidebar.fi-main-sidebar { z-index: var(--z-sidebar, 1100) !important; }
.fi-sidebar-close-overlay { z-index: var(--z-sidebar-scrim, 1090) !important; }
.fi-topbar .omm-tenant-dropdown { z-index: var(--z-dropdown, 1000); }
}
@media (max-width: 1023px) {
.fi-main { padding: 16px 14px max(36px, var(--omm-zone-ai, 0px), var(--omm-zone-nav, 0px)); }
.fi-sidebar-item-btn { min-height: 44px; }
.omm-btn,
.fi-btn,
.olami-app .btn,
.rc-v2-btn { min-height: 40px; }
.olami-app .olami-db-search-box input,
.olami-app .olami-db-filter,
.olami-settings .om-input,
.olami-settings .om-select,
.olami-settings .om-textarea,
.sf-sync .sf-select { font-size: 16px; min-height: 40px; }
}
@media (max-width: 768px) {
.olami-app .olami-db-toolbar { padding: 10px 12px; gap: 8px; }
.olami-app .olami-db-search-box { flex: 1 1 100%; max-width: none; }
.olami-app .olami-db-filter-sep { display: none; }
.olami-app .olami-db-filter-group { flex: 1 1 calc(50% - 8px); justify-content: space-between; }
.olami-app .olami-db-filter { flex: 1; min-height: 40px; }
.olami-app .olami-db-stats { gap: 6px; }
.olami-app .olami-db-stat { flex: 0 0 auto; }
.olami-app .olami-target-dot { width: 18px; height: 18px; }
}
@media (max-width: 768px) {
.olami-settings .om-row { gap: 14px; }
.olami-settings .om-card { padding: 18px 16px; }
.olami-settings .om-save-bar { flex-direction: column; gap: 10px; align-items: stretch; }
.olami-settings .om-save-bar .om-btn { width: 100%; min-height: 44px; }
.sf-sync .sf-filters { gap: 10px; }
.sf-sync .sf-field { flex: 1 1 100%; }
.sf-sync .sf-select { width: 100%; }
.sf-sync .sf-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not(.olami-edit-input),
select:not(.olami-edit-input),
textarea:not(.olami-edit-input),
[contenteditable]:not([contenteditable="false"]) {
font-size: 16px !important;
}
}
@media (max-width: 768px) {
:root:has(.otb) { --omm-zone-nav: calc(84px + env(safe-area-inset-bottom, 0px)); }
.otb {
position: fixed; z-index: var(--z-tabbar); left: 0; right: 0; bottom: 0;
display: grid; grid-template-columns: repeat(var(--n-tabs, 4), 1fr); gap: 2px;
padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
background: color-mix(in srgb, var(--surface) 90%, transparent);
-webkit-backdrop-filter: saturate(1.7) blur(16px); backdrop-filter: saturate(1.7) blur(16px);
border-top: 1px solid var(--border-light);
font-family: var(--font); -webkit-tap-highlight-color: transparent;
transition: translate .38s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
}
.otb-i {
position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px; min-height: 50px; padding: 5px 2px 4px; border-radius: var(--radius-md);
color: var(--text-secondary); font-size: 10.5px; font-weight: 650; letter-spacing: .01em; text-decoration: none;
transition: color .25s ease;
}
.otb-i .e { display: block; font-size: 22px; line-height: 1; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.otb-i .l { white-space: nowrap; }
.otb-i:active .e { transform: scale(.86); }
.otb-i.is-on { color: var(--primary); }
.otb-i.is-on .e { transform: translateY(-1px) scale(1.08); }
.otb-i:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.otb-b {
position: absolute; top: 1px; left: calc(50% + 5px); min-width: 17px; height: 17px; padding: 0 5px;
border-radius: var(--radius-full); background: var(--primary); color: var(--text-inverse);
font-size: 10px; font-weight: 800; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--surface);
}
.otb-ind {
position: absolute; top: 6px; left: 8px; height: 50px; border-radius: var(--radius-md); background: var(--primary-soft);
width: calc((100% - 16px - (var(--n-tabs, 4) - 1) * 2px) / var(--n-tabs, 4));
translate: calc(var(--i, 0) * (100% + 2px)) 0;
transition: translate .3s cubic-bezier(.2, .8, .2, 1);
}
.otb.is-glide .otb-ind { animation: otbGlide .42s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes otbGlide { from { translate: calc(var(--from, 0) * (100% + 2px)) 0; } }
:root:has(.otb.is-app) { --omm-zone-nav: calc(96px + env(safe-area-inset-bottom, 0px)); }
.otb.is-app { padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)); }
body:has(.osm-overlay) .otb,
body:has(.odw.is-open) .otb,
body:has(.fi-sidebar.fi-sidebar-open) .otb,
body:has(.olami-db-bulk-bar:not([style*="none"]):not([x-cloak])) .otb,
body:has(.cst-bulk:not([style*="none"]):not([x-cloak])) .otb,
body:has(main input:focus, main textarea:focus, main select:focus, main [contenteditable="true"]:focus) .otb {
translate: 0 calc(100% + 30px); opacity: 0; pointer-events: none;
}
}
@media (max-width: 768px) and (display-mode: standalone) {
:root:has(.otb) { --omm-zone-nav: calc(96px + env(safe-area-inset-bottom, 0px)); }
.otb { padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 769px) {
.otb { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.otb, .otb *, .otb-ind { animation: none !important; transition: none !important; }
}
.onp {
position: fixed; z-index: var(--z-modal-top); top: 0; left: 0; right: 0; height: 3px;
overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .18s ease;
}
.onp::before {
content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 42%;
border-radius: 0 var(--radius-full) var(--radius-full) 0; background: var(--primary);
box-shadow: 0 0 8px rgba(var(--primary-rgb), .5); transform: translateX(-100%);
}
html.is-leaving .onp { opacity: 1; }
html.is-leaving .onp::before { animation: onpRun 1.1s cubic-bezier(.45, .05, .25, 1) infinite; }
@keyframes onpRun { to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) {
html.is-leaving .onp::before { animation: none; width: 100%; transform: none; }
}
.onp-ghost { display: none; }
.fi-main > :not(.onp-ghost) { transition: opacity .12s ease; }
html.is-leaving .fi-main { position: relative; }
html.is-leaving .fi-main > :not(.onp-ghost) { opacity: 0; pointer-events: none; }
html.is-leaving .onp-ghost {
display: block; position: absolute; left: 0; right: 0; top: var(--onp-top, 0px);
padding: inherit; padding-bottom: 0; pointer-events: none;
animation: onpGhostIn .16s ease-out backwards;
}
.onp-g-h { height: 26px; width: min(46%, 320px); border-radius: var(--radius); margin: 4px 0 20px; }
.onp-g-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-bottom: 14px; }
.onp-g-c { height: 128px; border-radius: var(--radius-lg); }
.onp-g-c.is-wide { height: 180px; margin-bottom: 14px; }
.onp-g-c.is-short { height: 72px; }
.onp-g-h, .onp-g-c {
background: linear-gradient(90deg, var(--surface-active) 0%, var(--surface-hover) 40%, var(--surface-active) 80%);
background-size: 300% 100%;
animation: onpShimmer 1.1s linear infinite;
}
@keyframes onpGhostIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes onpShimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
@media (prefers-reduced-motion: reduce) {
.onp-g-h, .onp-g-c { animation: none; }
html.is-leaving .onp-ghost { animation: none; }
@view-transition { navigation: none; }
}
.dark .olami-app {
--bg: #0e1117;
--surface: #181b21;
--surface-hover: #20242c;
--surface-active: #272c35;
--surface-alt: #1f232b;
--canvas: #0e1117;
--text: #e6e8ec;
--text-secondary: #a3a9b3;
--text-muted: #757c89;
--border: #2c323d;
--border-light: #232830;
--border-hover: #3a414e;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow-md: 0 4px 24px rgba(0, 0, 0, 0.55);
}
.dark .pm-v2,
.dark .rc-v2 {
--v2-surface: #181b21;
--v2-surface-soft: #1f232b;
--v2-bg: #0e1117;
--v2-border: #2c323d;
--v2-border-soft: #232830;
--v2-text: #e6e8ec;
--v2-text-muted: #a3a9b3;
--v2-text-faint: #757c89;
--v2-accent: #16c4b0;
--v2-accent-50: rgba(20, 184, 166, 0.12);
--v2-accent-100: rgba(20, 184, 166, 0.22);
--v2-accent-700: #2dd4bf;
--v2-danger: #f87171;
--v2-warn: #fbbf24;
--v2-success: #4ade80;
}
.dark .pm-v2 .pm-comment:focus,
.dark .pm-v2 .pm-rsvp-btn,
.dark .pm-v2 .pm-list-chip,
.dark .pm-v2 .pm-staff-select:focus,
.dark .pm-v2 .pm-option-select:focus,
.dark .pm-v2 .pm-v2-bulk-select option,
.dark .pm-v2 .pm-phase-input:focus,
.dark .pm-v2 .pm-wa-btn,
.dark .pm-v2 .pm-modal,
.dark .pm-v2 .pm-settings-textarea,
.dark .pm-v2 .pm-merge-tags code,
.dark .pm-v2 .pm-elig-makeup-list,
.dark .pm-v2 .pm-elig-add-form,
.dark .pm-v2 .pm-rooming-pool__count,
.dark .pm-v2 .pm-rooming-pool__search,
.dark .pm-v2 .pm-rooming-chip,
.dark .pm-v2 .pm-rooming-room,
.dark .pm-v2 .pm-rooming-room__gender,
.dark .pm-v2 .pm-rooming-room__count,
.dark .pm-v2 .pm-rooming-room__capacity,
.dark .pm-v2 .pm-rooming-room__delete,
.dark .pm-v2 .pm-rooming-room__occ {
background: var(--v2-surface);
color: var(--v2-text);
}
.dark .pm-v2 .pm-v2-bulk-btn:hover { background: var(--v2-surface-soft); border-color: var(--v2-border); }
.dark .pm-v2 [class*="pm-rooming"] { border-color: var(--v2-border); }
.dark .pm-v2 .pm-rooming-pool__count,
.dark .pm-v2 .pm-rooming-room__count { color: var(--v2-text-muted); }
.dark .pm-v2 .pm-elig-add-form { border-color: var(--v2-border); }
.dark .pm-v2 .pm-rooming-pool__section--unknown { background: rgba(255, 149, 0, 0.1); border-color: rgba(255, 149, 0, 0.3); }
.dark .pm-v2 .pm-rooming-room--partial { background: rgba(255, 149, 0, 0.1); border-color: rgba(255, 149, 0, 0.35); }
.dark .olami-ee2-shell {
--bg: #0e1117;
--surface: #181b21;
--surface-hover: #20242c;
--text: #e6e8ec;
--text-secondary: #a3a9b3;
--text-faint: #757c89;
--border: #2c323d;
--border-soft: #232830;
--success-bg: rgba(34, 197, 94, 0.16);
--success-text: #4ade80;
--warning-bg: rgba(245, 158, 11, 0.16);
--warning-text: #fbbf24;
--danger-bg: rgba(220, 38, 38, 0.16);
--info-bg: rgba(59, 130, 246, 0.16);
}
.dark .olami-app input[style*="#fff"],
.dark .olami-app select,
.dark .olami-app textarea {
background-color: var(--surface);
color: var(--text);
border-color: var(--border);
}
.dark .olami-app option { background: var(--surface); color: var(--text); }
.dark .olami-app [style*="background:#fff"],
.dark .olami-app [style*="background: #fff"],
.dark .olami-app [style*="background:#FFF"],
.dark .olami-app [style*="background:white"],
.dark .olami-app [style*="background: white"],
.dark .olami-app [style*="background:#fafafa"],
.dark .olami-app [style*="background:#f9fafb"],
.dark .olami-app [style*="background:#f5f5f7"],
.dark .olami-app [style*="background:#f8"],
.dark .olami-app [style*="background-color:#fff"],
.dark .olami-app [style*="background-color: #fff"],
.dark .olami-app [style*="background-color:white"] {
background-color: var(--surface) !important;
}
.dark .olami-app [style*="color:#1d1d1f"],
.dark .olami-app [style*="color: #1d1d1f"],
.dark .olami-app [style*="color:#111"],
.dark .olami-app [style*="color:#000"],
.dark .olami-app [style*="color:#1f2937"],
.dark .olami-app [style*="color:#374151"] {
color: var(--text) !important;
}
.dark .olami-app [style*="border:1px solid #e"],
.dark .olami-app [style*="border: 1px solid #e"],
.dark .olami-app [style*="border-color:#e"] {
border-color: var(--border) !important;
}
.dark .mlib,
.dark .mcomp {
--ink: #e6e8ec;
--muted: #a3a9b3;
--line: #2c323d;
--card: #181b21;
--brand-soft: rgba(226, 27, 77, 0.16);
--wa-bg: rgba(37, 211, 102, 0.16);
--email-bg: rgba(37, 99, 235, 0.18);
--push-bg: rgba(124, 58, 237, 0.2);
--shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.45);
}
.dark .mcomp .email { background: #ffffff; color: #1a1725; }
.dark .pm-ed {
--ed-bg: #0e1117;
--ed-card: #181b21;
--ed-line: #2c323d;
--ed-ink: #e6e8ec;
--ed-muted: #757c89;
}
.dark .olami-app [style*="background:#fff"],
.dark .olami-app [style*="background: #fff"],
.dark .olami-app [style*="background:#FFF"],
.dark .olami-app [style*="background:white"],
.dark .olami-app [style*="background: white"],
.dark .olami-app [style*="background:#fafafa"],
.dark .olami-app [style*="background:#f9fafb"],
.dark .olami-app [style*="background:#f5f5f7"],
.dark .olami-app [style*="background:#f8"],
.dark .olami-app [style*="background-color:#fff"],
.dark .olami-app [style*="background-color: #fff"],
.dark .olami-app [style*="background-color:white"],
.dark .olami-ee2-shell [style*="background:#fff"],
.dark .olami-ee2-shell [style*="background: #fff"],
.dark .olami-ee2-shell [style*="background:#FFF"],
.dark .olami-ee2-shell [style*="background:white"],
.dark .olami-ee2-shell [style*="background: white"],
.dark .olami-ee2-shell [style*="background:#fafafa"],
.dark .olami-ee2-shell [style*="background:#f9fafb"],
.dark .olami-ee2-shell [style*="background:#f5f5f7"],
.dark .olami-ee2-shell [style*="background:#f8"],
.dark .olami-ee2-shell [style*="background-color:#fff"],
.dark .olami-ee2-shell [style*="background-color: #fff"],
.dark .olami-ee2-shell [style*="background-color:white"],
.dark .pm-v2 [style*="background:#fff"],
.dark .pm-v2 [style*="background: #fff"],
.dark .pm-v2 [style*="background:#FFF"],
.dark .pm-v2 [style*="background:white"],
.dark .pm-v2 [style*="background: white"],
.dark .pm-v2 [style*="background:#fafafa"],
.dark .pm-v2 [style*="background:#f9fafb"],
.dark .pm-v2 [style*="background:#f5f5f7"],
.dark .pm-v2 [style*="background:#f8"],
.dark .pm-v2 [style*="background-color:#fff"],
.dark .pm-v2 [style*="background-color: #fff"],
.dark .pm-v2 [style*="background-color:white"],
.dark .rc-v2 [style*="background:#fff"],
.dark .rc-v2 [style*="background: #fff"],
.dark .rc-v2 [style*="background:#FFF"],
.dark .rc-v2 [style*="background:white"],
.dark .rc-v2 [style*="background: white"],
.dark .rc-v2 [style*="background:#fafafa"],
.dark .rc-v2 [style*="background:#f9fafb"],
.dark .rc-v2 [style*="background:#f5f5f7"],
.dark .rc-v2 [style*="background:#f8"],
.dark .rc-v2 [style*="background-color:#fff"],
.dark .rc-v2 [style*="background-color: #fff"],
.dark .rc-v2 [style*="background-color:white"],
.dark .pm-ed [style*="background:#fff"],
.dark .pm-ed [style*="background: #fff"],
.dark .pm-ed [style*="background:#FFF"],
.dark .pm-ed [style*="background:white"],
.dark .pm-ed [style*="background: white"],
.dark .pm-ed [style*="background:#fafafa"],
.dark .pm-ed [style*="background:#f9fafb"],
.dark .pm-ed [style*="background:#f5f5f7"],
.dark .pm-ed [style*="background:#f8"],
.dark .pm-ed [style*="background-color:#fff"],
.dark .pm-ed [style*="background-color: #fff"],
.dark .pm-ed [style*="background-color:white"],
.dark .mlib [style*="background:#fff"],
.dark .mlib [style*="background: #fff"],
.dark .mlib [style*="background:#FFF"],
.dark .mlib [style*="background:white"],
.dark .mlib [style*="background: white"],
.dark .mlib [style*="background:#fafafa"],
.dark .mlib [style*="background:#f9fafb"],
.dark .mlib [style*="background:#f5f5f7"],
.dark .mlib [style*="background:#f8"],
.dark .mlib [style*="background-color:#fff"],
.dark .mlib [style*="background-color: #fff"],
.dark .mlib [style*="background-color:white"],
.dark .mcomp [style*="background:#fff"],
.dark .mcomp [style*="background: #fff"],
.dark .mcomp [style*="background:#FFF"],
.dark .mcomp [style*="background:white"],
.dark .mcomp [style*="background: white"],
.dark .mcomp [style*="background:#fafafa"],
.dark .mcomp [style*="background:#f9fafb"],
.dark .mcomp [style*="background:#f5f5f7"],
.dark .mcomp [style*="background:#f8"],
.dark .mcomp [style*="background-color:#fff"],
.dark .mcomp [style*="background-color: #fff"],
.dark .mcomp [style*="background-color:white"],
.dark .ecv2 [style*="background:#fff"],
.dark .ecv2 [style*="background: #fff"],
.dark .ecv2 [style*="background:#FFF"],
.dark .ecv2 [style*="background:white"],
.dark .ecv2 [style*="background: white"],
.dark .ecv2 [style*="background:#fafafa"],
.dark .ecv2 [style*="background:#f9fafb"],
.dark .ecv2 [style*="background:#f5f5f7"],
.dark .ecv2 [style*="background:#f8"],
.dark .ecv2 [style*="background-color:#fff"],
.dark .ecv2 [style*="background-color: #fff"],
.dark .ecv2 [style*="background-color:white"] {
background-color: var(--surface, #181b21) !important;
}
.dark .olami-app [style*="color:#1d1d1f"],
.dark .olami-app [style*="color: #1d1d1f"],
.dark .olami-app [style*="color:#111"],
.dark .olami-app [style*="color:#000"],
.dark .olami-app [style*="color:#1f2937"],
.dark .olami-app [style*="color:#374151"],
.dark .olami-ee2-shell [style*="color:#1d1d1f"],
.dark .olami-ee2-shell [style*="color: #1d1d1f"],
.dark .olami-ee2-shell [style*="color:#111"],
.dark .olami-ee2-shell [style*="color:#000"],
.dark .olami-ee2-shell [style*="color:#1f2937"],
.dark .olami-ee2-shell [style*="color:#374151"],
.dark .pm-v2 [style*="color:#1d1d1f"],
.dark .pm-v2 [style*="color: #1d1d1f"],
.dark .pm-v2 [style*="color:#111"],
.dark .pm-v2 [style*="color:#000"],
.dark .pm-v2 [style*="color:#1f2937"],
.dark .pm-v2 [style*="color:#374151"],
.dark .rc-v2 [style*="color:#1d1d1f"],
.dark .rc-v2 [style*="color: #1d1d1f"],
.dark .rc-v2 [style*="color:#111"],
.dark .rc-v2 [style*="color:#000"],
.dark .rc-v2 [style*="color:#1f2937"],
.dark .rc-v2 [style*="color:#374151"],
.dark .pm-ed [style*="color:#1d1d1f"],
.dark .pm-ed [style*="color: #1d1d1f"],
.dark .pm-ed [style*="color:#111"],
.dark .pm-ed [style*="color:#000"],
.dark .pm-ed [style*="color:#1f2937"],
.dark .pm-ed [style*="color:#374151"],
.dark .mlib [style*="color:#1d1d1f"],
.dark .mlib [style*="color: #1d1d1f"],
.dark .mlib [style*="color:#111"],
.dark .mlib [style*="color:#000"],
.dark .mlib [style*="color:#1f2937"],
.dark .mlib [style*="color:#374151"],
.dark .mcomp [style*="color:#1d1d1f"],
.dark .mcomp [style*="color: #1d1d1f"],
.dark .mcomp [style*="color:#111"],
.dark .mcomp [style*="color:#000"],
.dark .mcomp [style*="color:#1f2937"],
.dark .mcomp [style*="color:#374151"],
.dark .ecv2 [style*="color:#1d1d1f"],
.dark .ecv2 [style*="color: #1d1d1f"],
.dark .ecv2 [style*="color:#111"],
.dark .ecv2 [style*="color:#000"],
.dark .ecv2 [style*="color:#1f2937"],
.dark .ecv2 [style*="color:#374151"] {
color: var(--text, #e6e8ec) !important;
}
.dark .olami-app [style*="border:1px solid #e"],
.dark .olami-app [style*="border: 1px solid #e"],
.dark .olami-app [style*="border-color:#e"],
.dark .olami-ee2-shell [style*="border:1px solid #e"],
.dark .olami-ee2-shell [style*="border: 1px solid #e"],
.dark .olami-ee2-shell [style*="border-color:#e"],
.dark .pm-v2 [style*="border:1px solid #e"],
.dark .pm-v2 [style*="border: 1px solid #e"],
.dark .pm-v2 [style*="border-color:#e"],
.dark .rc-v2 [style*="border:1px solid #e"],
.dark .rc-v2 [style*="border: 1px solid #e"],
.dark .rc-v2 [style*="border-color:#e"],
.dark .pm-ed [style*="border:1px solid #e"],
.dark .pm-ed [style*="border: 1px solid #e"],
.dark .pm-ed [style*="border-color:#e"],
.dark .mlib [style*="border:1px solid #e"],
.dark .mlib [style*="border: 1px solid #e"],
.dark .mlib [style*="border-color:#e"],
.dark .mcomp [style*="border:1px solid #e"],
.dark .mcomp [style*="border: 1px solid #e"],
.dark .mcomp [style*="border-color:#e"],
.dark .ecv2 [style*="border:1px solid #e"],
.dark .ecv2 [style*="border: 1px solid #e"],
.dark .ecv2 [style*="border-color:#e"] {
border-color: var(--border, #2c323d) !important;
}