:root {
  --op-ink: #1e1930;
  --op-muted: #736f85;
  --op-page: #f7f6fb;
  --op-card: #ffffff;
  --op-line: #e8e5f0;
  --op-lilac: #7c6cf2;
  --op-lilac-dark: #5946ce;
  --op-green: #7f9f54;
  --op-green-soft: #edf5e5;
  --op-purple: #8d5bc4;
  --op-purple-soft: #f4eafa;
  --op-blue: #5f99d8;
  --op-teal: #2ba99b;
  --op-rose: #d86d82;
  --op-cyan: #35b6d2;
  --op-danger: #d84d62;
  --op-warning: #c4831b;
  --op-shadow: 0 12px 32px rgba(45, 33, 81, .08);
}

* { box-sizing: border-box; }
body.opening-app { margin: 0; background: var(--op-page); color: var(--op-ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.opening-shell { min-height: 100vh; padding: 28px; }
.opening-shell.with-branch-sidebar { margin-left: 256px; padding: 24px 28px 40px; }
.opening-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; max-width: 1600px; margin: 0 auto 20px; }
.opening-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--op-lilac-dark); }
.opening-topbar h1 { margin: 6px 0 4px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.04em; }
.opening-topbar p { margin: 0; color: var(--op-muted); line-height: 1.45; }
.opening-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.op-button { min-height: 38px; border: 1px solid transparent; border-radius: 10px; padding: 8px 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; font-weight: 750; color: var(--op-ink); background: #fff; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.op-button:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(52, 39, 99, .12); }
.op-button:focus-visible, .op-icon-button:focus-visible, .op-task-row:focus-visible { outline: 3px solid rgba(124, 108, 242, .38); outline-offset: 2px; }
.op-button.primary { color: #fff; background: linear-gradient(135deg, var(--op-lilac), #a57eea); }
.op-button.secondary { border-color: #ddd7ee; background: #fff; }
.op-button.danger { color: #a62e43; background: #fff1f3; border-color: #f4c8d0; }
.op-button:disabled { opacity: .52; cursor: not-allowed; transform: none; box-shadow: none; }
.op-icon-button { border: 0; background: transparent; color: var(--op-muted); width: 34px; height: 34px; border-radius: 9px; }
.op-icon-button:hover { background: #f1eff8; color: var(--op-ink); }

.op-alert { max-width: 1600px; margin: 0 auto 16px; padding: 12px 14px; border-radius: 12px; background: #fff5df; border: 1px solid #f2d493; color: #77510b; font-size: 14px; display: none; }
.op-alert.visible { display: block; }
.op-alert.error { background: #fff0f2; border-color: #f4c2cb; color: #9f2940; }
.op-alert.success { background: #eff9f1; border-color: #bee8c6; color: #236c37; }

.op-layout { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 18px; align-items: start; }
.op-panel { background: var(--op-card); border: 1px solid rgba(115, 99, 162, .13); border-radius: 16px; box-shadow: var(--op-shadow); }
.op-list-panel { overflow: hidden; position: sticky; top: 18px; }
.op-list-head { padding: 17px; border-bottom: 1px solid var(--op-line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.op-list-head h2 { margin: 0; font-size: 15px; }
.op-list-filter { width: 100%; border: 1px solid var(--op-line); border-radius: 9px; padding: 9px 10px; color: var(--op-ink); background: #fbfafe; }
.op-list-filter-wrap { padding: 12px 14px; border-bottom: 1px solid var(--op-line); }
.op-project-list { max-height: calc(100vh - 230px); overflow: auto; padding: 8px; }
.op-project-list-item { width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 12px; color: var(--op-ink); }
.op-project-list-item:hover { background: #f8f6fd; }
.op-project-list-item.active { border-color: rgba(124,108,242,.33); background: linear-gradient(135deg,#f4f1ff,#fbfaff); }
.op-list-name { font-weight: 800; font-size: 13px; line-height: 1.3; }
.op-list-sub { font-size: 12px; color: var(--op-muted); margin-top: 4px; }
.op-list-progress { margin-top: 9px; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--op-muted); }
.op-progress-track { flex: 1; min-width: 50px; height: 6px; border-radius: 50px; background: #eae7f2; overflow: hidden; }
.op-progress-fill { height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--op-lilac), #a881e8); }

.op-project { min-width: 0; }
.op-hero { --op-depth-x: 0px; --op-depth-y: 0px; position: relative; isolation: isolate; overflow: hidden; padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; margin-bottom: 18px; background: linear-gradient(118deg, #fff 0%, #fcfbff 61%, #f0edff 100%); }
.op-hero::before, .op-hero::after { content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 999px; transition: transform .28s ease-out; }
.op-hero::before { width: 270px; height: 270px; right: -105px; top: -165px; background: radial-gradient(circle at 35% 35%, rgba(165,126,234,.24), rgba(124,108,242,.02) 68%); transform: translate3d(var(--op-depth-x), var(--op-depth-y), 0); }
.op-hero::after { width: 180px; height: 180px; left: 44%; bottom: -126px; background: radial-gradient(circle at 55% 45%, rgba(43,169,155,.13), rgba(43,169,155,0) 70%); transform: translate3d(calc(var(--op-depth-x) * -.7), calc(var(--op-depth-y) * -.7), 0); }
.op-hero > * { position: relative; z-index: 1; }
.op-hero-copy { min-width: 0; }
.op-hero h2 { margin: 0; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -.03em; }
.op-hero-meta { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 10px; color: var(--op-muted); font-size: 13px; }
.op-hero-meta span { display: inline-flex; gap: 5px; align-items: center; }
.op-hero-progress { align-self: stretch; min-width: 190px; padding: 15px 16px; border: 1px solid rgba(124,108,242,.16); border-radius: 14px; background: rgba(255,255,255,.68); display: flex; flex-direction: column; justify-content: center; }
.op-hero-progress-label { color: var(--op-lilac-dark) !important; font-size: 10px !important; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.op-hero-progress strong { font-size: 29px; letter-spacing: -.05em; }
.op-hero-progress span { font-size: 12px; color: var(--op-muted); margin: 2px 0 10px; }
.op-hero-progress .op-progress-track { flex: 0 0 auto; width: 100%; height: 8px; }
.op-hero-countdown { margin: 10px 0 0 !important; color: #514a62 !important; font-weight: 750; }

.op-stage-nav { margin: 0 0 14px; }
.op-phase-nav-label { display: block; margin: 0 0 7px 2px; color: var(--op-muted); font-size: 11px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.op-phase-stepper { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 8px; }
.op-stage-button { min-width: 0; min-height: 58px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--op-line); border-radius: 13px; background: #fff; color: #524d62; text-align: left; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.op-stage-button:hover { border-color: rgba(124,108,242,.38); background: #fcfbff; transform: translateY(-1px); box-shadow: 0 5px 12px rgba(52,39,99,.07); }
.op-stage-button:focus-visible, .op-attention-item:focus-visible, .op-overview-phase:focus-visible { outline: 3px solid rgba(124,108,242,.32); outline-offset: 2px; }
.op-stage-button.current { border-color: rgba(124,108,242,.48); background: linear-gradient(135deg, #f1efff, #fcfbff); color: var(--op-lilac-dark); }
.op-stage-button.complete { border-color: #c9e8cb; background: #f7fcf5; color: #2b7641; }
.op-stage-button.risk { border-color: rgba(216,77,98,.48); background: #fff8f8; }
.op-stage-order { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #f0edf7; color: #5e566e; font-size: 11px; font-weight: 900; }
.op-stage-button.current .op-stage-order { background: var(--op-lilac); color: #fff; }
.op-stage-button.complete .op-stage-order { background: #58a86f; color: #fff; }
.op-stage-button.risk .op-stage-order { background: #fff0f2; color: #a72c42; }
.op-stage-copy { min-width: 0; }
.op-stage-copy b { display: block; overflow: hidden; font-size: 12px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.op-stage-copy small { display: block; margin-top: 3px; overflow: hidden; color: var(--op-muted); font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }

.op-overview { margin: 0 0 14px; padding: 18px; border: 1px solid rgba(115,99,162,.15); border-radius: 16px; background: linear-gradient(135deg, #fff 0%, #fbfaff 100%); }
.op-overview-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.op-overview-kicker { display: block; color: var(--op-lilac-dark); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.op-overview-heading h3 { margin: 4px 0 3px; font-size: 18px; letter-spacing: -.025em; }
.op-overview-heading p { margin: 0; color: var(--op-muted); font-size: 12px; line-height: 1.45; }
.op-overview-updated { flex: 0 0 auto; margin-top: 2px; padding: 6px 8px; border: 1px solid transparent; border-radius: 999px; font-size: 11px; font-weight: 850; white-space: nowrap; }
.op-overview-updated.clear { border-color: #cbe6cf; background: #f2faef; color: #2f7344; }
.op-overview-updated.risk { border-color: #f2c5cc; background: #fff1f3; color: #a42d43; }
.op-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.op-kpi-card { min-width: 0; margin: 0; padding: 12px; border: 1px solid #e8e4f0; border-radius: 12px; background: rgba(255,255,255,.8); }
.op-kpi-card dt { overflow: hidden; color: var(--op-muted); font-size: 10px; font-weight: 850; letter-spacing: .055em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.op-kpi-card dd { margin: 5px 0 2px; overflow: hidden; color: var(--op-ink); font-size: 22px; font-weight: 900; letter-spacing: -.045em; text-overflow: ellipsis; white-space: nowrap; }
.op-kpi-card small { display: block; min-height: 29px; overflow: hidden; color: var(--op-muted); font-size: 11px; line-height: 1.35; }
.op-kpi-card.attention.has-risk { border-color: #f0c8cf; background: #fffafb; }
.op-kpi-card.attention.has-risk dd { color: #ae3048; }
.op-kpi-card.attention.is-clear { border-color: #cfe4d1; background: #fbfef9; }
.op-kpi-card.attention.is-clear dd { color: #367946; }
.op-kpi-meter { height: 5px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: #e9e6f0; }
.op-kpi-meter span { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--op-lilac), #a881e8); }
.op-overview-detail { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr); gap: 10px; margin-top: 10px; }
.op-overview-card { min-width: 0; padding: 13px; border: 1px solid #e8e4f0; border-radius: 13px; background: rgba(255,255,255,.68); }
.op-overview-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.op-overview-card-head strong { display: block; font-size: 13px; }
.op-overview-card-head span { display: block; margin-top: 3px; color: var(--op-muted); font-size: 11px; line-height: 1.35; }
.op-overview-phases { display: grid; gap: 7px; }
.op-overview-phase { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px; border: 1px solid transparent; border-radius: 10px; color: var(--op-ink); background: #fbfafe; text-align: left; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.op-overview-phase:hover { border-color: rgba(124,108,242,.3); background: #f7f5fd; transform: translateX(2px); }
.op-overview-phase.current { border-color: rgba(124,108,242,.35); background: #f3f1ff; }
.op-overview-phase.complete { background: #f7fcf5; }
.op-overview-phase.risk { border-color: rgba(216,77,98,.36); background: #fff9fa; }
.op-overview-phase-dot { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #ece9f3; color: #5c5669; font-size: 10px; font-weight: 900; }
.op-overview-phase.current .op-overview-phase-dot { background: var(--op-lilac); color: #fff; }
.op-overview-phase.complete .op-overview-phase-dot { background: #57a96f; color: #fff; }
.op-overview-phase.risk .op-overview-phase-dot { background: #fff0f2; color: #a82d44; }
.op-overview-phase strong { display: block; overflow: hidden; font-size: 12px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.op-overview-phase small { display: block; margin-top: 3px; overflow: hidden; color: var(--op-muted); font-size: 10px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.op-attention-list { display: grid; gap: 6px; }
.op-attention-item { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 9px; border: 1px solid transparent; border-radius: 10px; color: var(--op-ink); background: #fbfafe; text-align: left; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.op-attention-item:hover { border-color: rgba(124,108,242,.28); background: #f7f5fd; transform: translateX(2px); }
.op-attention-item.blocked, .op-attention-item.overdue { border-color: rgba(216,77,98,.28); background: #fffafa; }
.op-attention-copy { min-width: 0; }
.op-attention-copy strong { display: block; overflow: hidden; font-size: 11px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.op-attention-copy small { display: block; margin-top: 2px; overflow: hidden; color: var(--op-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.op-attention-date { max-width: 118px; color: #635d71; font-size: 10px; font-weight: 800; line-height: 1.25; text-align: right; }
.op-attention-item.blocked .op-attention-date, .op-attention-item.overdue .op-attention-date { color: #a42d43; }
.op-risk-legend { display: flex; flex-wrap: wrap; gap: 7px 10px; margin-top: 11px; color: #625d70; font-size: 10px; font-weight: 750; }
.op-risk-legend span, .op-gantt-legend span { display: inline-flex; align-items: center; gap: 5px; }
.op-risk-legend i, .op-gantt-legend i { width: 8px; height: 8px; display: inline-block; flex: 0 0 auto; border-radius: 50%; background: #b9b2c8; }
.op-risk-legend i.blocked { background: var(--op-danger); }
.op-risk-legend i.overdue { border: 2px solid var(--op-danger); background: #fff; }
.op-risk-legend i.complete { background: #55aa70; }
.op-responsibility { margin-top: 13px; padding-top: 11px; border-top: 1px solid #ebe8f1; }
.op-responsibility-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.op-responsibility-heading strong { font-size: 12px; }
.op-responsibility-heading span { color: var(--op-muted); font-size: 10px; }
.op-responsibility-row + .op-responsibility-row { margin-top: 7px; }
.op-responsibility-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #5d586a; font-size: 10px; }
.op-responsibility-label strong { color: var(--op-ink); font-size: 10px; }
.op-responsibility-track { height: 5px; margin-top: 4px; overflow: hidden; border-radius: 999px; background: #eae7f1; }
.op-responsibility-track span { display: block; height: 100%; min-width: 0; border-radius: inherit; background: #7185a8; }
.op-responsibility-row.partner .op-responsibility-track span { background: #8caa5c; }
.op-responsibility-row.franchisor .op-responsibility-track span { background: #a467c4; }
.op-overview-empty { margin: 6px 0; color: var(--op-muted); font-size: 12px; line-height: 1.45; }
.op-instructions { margin: 0 0 14px; padding: 0; }
.op-instructions summary { list-style: none; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; font-size: 13px; font-weight: 800; }
.op-instructions summary::-webkit-details-marker { display: none; }
.op-instructions summary::after { content: "⌄"; font-size: 16px; color: var(--op-muted); transition: transform .18s ease; }
.op-instructions[open] summary::after { transform: rotate(180deg); }
.op-instructions-body { padding: 0 16px 16px; white-space: pre-wrap; font-size: 13px; line-height: 1.6; color: #5e586b; }

.op-materials-summary { margin: 0 0 14px; padding: 16px; }
.op-materials-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.op-materials-head strong { display: block; font-size: 14px; }
.op-materials-head span { display: block; margin-top: 3px; color: var(--op-muted); font-size: 12px; }
.op-material-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.op-material-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; min-height: 96px; padding: 12px; text-align: left; color: var(--op-ink); background: #fbfaff; border: 1px solid var(--op-line); border-radius: 12px; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.op-material-card:hover { background: #f7f4ff; border-color: rgba(124,108,242,.35); box-shadow: 0 5px 12px rgba(52,39,99,.07); }
.op-material-card:focus-visible, .op-library-open:focus-visible { outline: 3px solid rgba(124,108,242,.3); outline-offset: 2px; }
.op-material-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: #eeeaff; color: var(--op-lilac-dark); font-size: 18px; line-height: 1; }
.op-material-icon.pdf { background: #fff0f2; color: #a42d43; font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.op-material-copy { min-width: 0; }
.op-material-copy strong { display: block; font-size: 12px; line-height: 1.3; }
.op-material-copy small { display: -webkit-box; margin-top: 5px; overflow: hidden; color: var(--op-muted); font-size: 11px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.op-material-open { grid-column: 2; align-self: end; color: var(--op-lilac-dark); font-size: 11px; font-weight: 800; }
.op-material-more { border: 1px dashed #cfc6e8; border-radius: 11px; background: #fff; color: var(--op-lilac-dark); font-size: 12px; font-weight: 750; }
.op-material-empty { padding: 16px; border: 1px dashed #d8d2e5; border-radius: 10px; color: var(--op-muted); font-size: 13px; line-height: 1.45; }
.op-library-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.op-library-intro strong { font-size: 14px; }
.op-library-intro p { max-width: 58ch; margin: 5px 0 0; color: var(--op-muted); font-size: 12px; line-height: 1.45; }
.op-library-draft { border-radius: 999px; padding: 5px 8px; color: #5d576b; background: #f1eff6; white-space: nowrap; font-size: 11px; font-weight: 800; }
.op-library-list { display: grid; gap: 9px; }
.op-library-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px; border: 1px solid var(--op-line); border-radius: 12px; }
.op-library-item.draft { background: #fbfafe; border-style: dashed; }
.op-library-open { display: flex; flex: 1; align-items: flex-start; gap: 9px; min-width: 0; padding: 0; border: 0; color: var(--op-ink); text-align: left; background: transparent; }
.op-library-open strong { display: block; font-size: 13px; }
.op-library-open small { display: -webkit-box; max-width: 52ch; margin-top: 4px; overflow: hidden; color: var(--op-muted); font-size: 12px; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.op-library-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.op-document-viewer { min-height: 0; }
.op-document-meta { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 11px; color: var(--op-muted); font-size: 11px; font-weight: 700; }
.op-document-description { margin: 0 0 12px; color: #5e586b; font-size: 13px; line-height: 1.5; }
.op-document-reader { max-height: calc(94vh - 210px); overflow: auto; padding: 18px 19px; border: 1px solid #e4e0ed; border-radius: 12px; background: #fbfaff; color: #3d3749; font-size: 14px; line-height: 1.7; }
.op-document-reader:focus-visible { outline: 3px solid rgba(124,108,242,.25); outline-offset: 2px; }
.op-pdf-viewer { min-height: min(68vh, 760px); overflow: hidden; border: 1px solid #e4e0ed; border-radius: 12px; background: #fbfaff; }
.op-pdf-frame { display: block; width: 100%; height: min(68vh, 760px); border: 0; background: #fff; }
.op-pdf-loading, .op-pdf-error { min-height: min(68vh, 760px); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: var(--op-muted); font-size: 13px; text-align: center; }
.op-pdf-error { flex-wrap: wrap; color: #8d3145; }
.op-onboarding { color: #4b4558; font-size: 14px; line-height: 1.6; }
.op-onboarding p { margin: 0 0 12px; }
.op-onboarding p:last-child { margin-bottom: 0; }
.op-onboarding-note { color: var(--op-muted); font-size: 13px; }

.op-gantt-card { overflow: hidden; }
.op-gantt-toolbar { padding: 14px 16px; display: flex; justify-content: space-between; gap: 10px; align-items: center; border-bottom: 1px solid var(--op-line); }
.op-gantt-toolbar strong { font-size: 14px; }
.op-gantt-toolbar .op-toolbar-caption { font-size: 12px; color: var(--op-muted); }
.op-gantt-legend { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 7px; color: #625d70; font-size: 10px; font-weight: 750; }
.op-gantt-legend i.partner { background: #9bbb59; }
.op-gantt-legend i.franchisor { background: #b769ce; }
.op-gantt-legend i.shared { background: #7185a8; }
.op-gantt-legend i.risk { border: 2px solid var(--op-danger); background: #fff; }
.op-zoom-buttons { display: flex; align-items: center; gap: 5px; }
.op-segment { border: 1px solid #dfdaea; background: #fff; color: #5d576b; font-weight: 750; font-size: 12px; padding: 7px 10px; }
.op-segment:first-child { border-radius: 8px 0 0 8px; }
.op-segment:last-child { border-radius: 0 8px 8px 0; }
.op-segment.active { background: var(--op-lilac); border-color: var(--op-lilac); color: #fff; }

.op-gantt-scroll { overflow: auto; max-height: calc(100vh - 230px); background: #fff; }
.op-gantt { min-width: 980px; }
.op-gantt-head { display: grid; grid-template-columns: 365px minmax(540px, 1fr); position: sticky; top: 0; z-index: 6; border-bottom: 1px solid #312b3c; }
.op-left-head { background: #2f2b36; color: #f9f8ff; padding: 10px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.op-calendar-head { background: #2f2b36; color: #f9f8ff; overflow: hidden; }
.op-week-row, .op-day-row { display: grid; grid-auto-flow: column; grid-auto-columns: var(--op-col, 30px); }
.op-week-cell { min-height: 22px; padding: 4px 6px; border-left: 1px solid rgba(255,255,255,.18); font-size: 10px; color: rgba(255,255,255,.72); white-space: nowrap; }
.op-day-cell { min-height: 38px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; padding: 3px 0 4px; border-left: 1px solid rgba(255,255,255,.13); color: rgba(255,255,255,.85); }
.op-day-cell span { color: rgba(255,255,255,.72); font-size: 9px; font-weight: 750; line-height: 1; }
.op-day-cell strong { color: #fff; font-size: 12px; font-weight: 850; line-height: 1; }
.op-day-cell.compact span { font-size: 8px; }
.op-day-cell.compact strong { font-size: 10px; }
.op-day-cell.weekend { color: #f8b6bd; background: rgba(255,255,255,.04); }
.op-day-cell.weekend span, .op-day-cell.weekend strong { color: #f8b6bd; }
.op-day-cell.today { color: #fff; background: rgba(225, 73, 92, .35); box-shadow: inset 2px 0 #ff7a86; font-weight: 900; }
.op-day-cell.today span, .op-day-cell.today strong { color: #fff; }

.op-stage-row { display: grid; grid-template-columns: 365px minmax(540px, 1fr); border-bottom: 1px solid var(--op-line); }
.op-stage-label { position: sticky; left: 0; z-index: 3; padding: 9px 14px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 850; color: #fff; }
.op-stage-label.blue { background: var(--op-blue); }
.op-stage-label.teal { background: var(--op-teal); }
.op-stage-label.rose { background: var(--op-rose); }
.op-stage-label.cyan { background: var(--op-cyan); }
.op-stage-track { position: relative; min-height: 36px; background: linear-gradient(90deg, rgba(247,246,251,.72), rgba(255,255,255,.8)); }

.op-task-row { display: grid; grid-template-columns: 365px minmax(540px, 1fr); min-height: 59px; border-bottom: 1px solid #eeebf3; background: #fff; }
.op-task-row:hover .op-task-main { background: #fcfbff; }
.op-task-row:focus { outline: none; }
.op-task-main { position: sticky; left: 0; z-index: 2; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 8px 12px; background: #fff; border-right: 1px solid #ece9f2; cursor: pointer; transition: background .15s ease; }
.op-task-row.is-risk .op-task-main { box-shadow: inset 3px 0 0 rgba(216,77,98,.82); }
.op-task-row.is-overdue .op-task-main { background: #fffdfd; }
.op-task-check { width: 19px; height: 19px; border: 2px solid #cfc9db; border-radius: 6px; display: grid; place-items: center; background: #fff; color: #fff; font-size: 12px; flex: 0 0 auto; }
.op-task-check.done { background: #55aa70; border-color: #55aa70; }
.op-task-copy { min-width: 0; }
.op-task-title { font-size: 12px; font-weight: 750; line-height: 1.32; }
.op-task-sub { margin-top: 3px; display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--op-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.op-chip { border-radius: 999px; padding: 3px 7px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.op-chip.partner { background: var(--op-green-soft); color: #4d722e; }
.op-chip.franchisor { background: var(--op-purple-soft); color: #6b348d; }
.op-chip.shared { background: #edf0f5; color: #536074; }
.op-task-overdue { color: #a42d43; font-weight: 800; }
.op-task-percent { color: var(--op-muted); font-size: 11px; font-weight: 750; }

.op-track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: var(--op-col, 30px); background-color: #fff; background-image: linear-gradient(90deg, #efedf4 1px, transparent 1px); background-size: var(--op-col, 30px) 100%; }
.op-track::after { content: ""; position: absolute; left: var(--op-today-x, -100px); top: 0; bottom: 0; width: 2px; background: #e4515d; z-index: 4; pointer-events: none; }
.op-track .op-weekend-cell { background: rgba(246,244,250,.62); }
.op-task-bar { align-self: center; height: 21px; grid-row: 1; border-radius: 6px; margin: 0 2px; position: relative; min-width: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); z-index: 3; }
.op-task-bar.partner { background: linear-gradient(90deg, #b7d286, #98b95d); }
.op-task-bar.franchisor { background: linear-gradient(90deg, #d1a0e2, #b96ace); }
.op-task-bar.shared { background: linear-gradient(90deg, #96a7c2, #7185a8); }
.op-task-bar .op-bar-progress { height: 100%; min-width: 0; box-shadow: inset -1px 0 0 rgba(255,255,255,.4); }
.op-task-bar.partner .op-bar-progress { background: linear-gradient(90deg, rgba(57,92,29,.72), rgba(57,92,29,.56)); }
.op-task-bar.franchisor .op-bar-progress { background: linear-gradient(90deg, rgba(91,42,120,.73), rgba(91,42,120,.56)); }
.op-task-bar.shared .op-bar-progress { background: linear-gradient(90deg, rgba(53,69,99,.74), rgba(53,69,99,.57)); }
.op-task-bar.done .op-bar-progress { filter: saturate(1.08); }
.op-task-bar.blocked { outline: 2px solid rgba(216,77,98,.72); outline-offset: -2px; }
.op-task-bar.overdue { outline: 2px dashed rgba(216,77,98,.82); outline-offset: -2px; }
.op-gantt-touch-hint { display: none; }

.op-empty { padding: 38px 22px; text-align: center; color: var(--op-muted); }
.op-empty h3 { margin: 0 0 6px; color: var(--op-ink); font-size: 16px; }
.op-empty p { margin: 0; font-size: 13px; line-height: 1.5; }
.op-loading { padding: 45px; color: var(--op-muted); text-align: center; }

.op-modal-backdrop { position: fixed; z-index: 1000; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(30,24,45,.48); padding: 18px; }
.op-modal-backdrop.open { display: flex; }
.op-modal { width: min(720px, 100%); max-height: min(760px, 94vh); overflow: auto; background: #fff; border-radius: 18px; box-shadow: 0 24px 70px rgba(18,15,30,.3); }
.op-modal.op-modal-pdf { width: min(1120px, 100%); max-height: 94vh; }
.op-modal-head { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--op-line); position: sticky; top: 0; background: #fff; z-index: 2; }
.op-modal-head h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.op-modal-body { padding: 18px 20px 22px; }
.op-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--op-line); position: sticky; bottom: 0; background: #fff; }
.op-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.op-field { display: flex; flex-direction: column; gap: 6px; }
.op-field.full { grid-column: 1 / -1; }
.op-field label { color: #5d586b; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.op-field input, .op-field textarea, .op-field select { border: 1px solid #dcd7e7; border-radius: 9px; background: #fff; color: var(--op-ink); padding: 9px 10px; font-size: 13px; }
.op-field textarea { min-height: 104px; resize: vertical; line-height: 1.45; }
.op-field input:focus, .op-field textarea:focus, .op-field select:focus { outline: 3px solid rgba(124,108,242,.18); border-color: var(--op-lilac); }
.op-detail-note { margin: 14px 0; padding: 11px 12px; border-radius: 10px; background: #f7f5fc; color: #625d70; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.op-detail-section { margin-top: 20px; }
.op-detail-section h4 { margin: 0 0 9px; font-size: 13px; }
.op-comments { display: grid; gap: 8px; }
.op-comment { border: 1px solid var(--op-line); border-radius: 10px; padding: 10px; }
.op-comment-meta { color: var(--op-muted); font-size: 11px; margin-bottom: 5px; font-weight: 700; }
.op-comment-body { font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.op-comment.question { border-left: 3px solid var(--op-warning); }
.op-inline-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
.op-inline-form textarea { min-height: 56px; }
.op-people { display: flex; flex-wrap: wrap; gap: 7px; }
.op-person { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 9px; background: #f6f4fb; color: #504b5c; font-size: 11px; }
.op-person button { border: 0; background: transparent; color: #9c6070; font-size: 15px; line-height: 1; padding: 0; }
.op-team-copy { margin: 0 0 10px; color: var(--op-muted); font-size: 12px; line-height: 1.45; }
.op-team-empty { padding: 10px; border: 1px dashed #d8d2e5; border-radius: 10px; color: var(--op-muted); font-size: 12px; }
.op-invite-list { display: grid; gap: 8px; }
.op-invite-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 11px; border: 1px solid var(--op-line); border-radius: 12px; background: #fbfaff; }
.op-invite-row strong { display: block; color: var(--op-ink); font-size: 12px; line-height: 1.3; }
.op-invite-row small { display: block; margin-top: 3px; color: var(--op-muted); font-size: 11px; line-height: 1.35; }
.op-invite-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.op-invite-actions .op-button { min-height: 31px; padding: 5px 8px; border-radius: 8px; font-size: 11px; }
.op-invite-status { padding: 4px 7px; border-radius: 999px; font-size: 10px; font-weight: 850; white-space: nowrap; }
.op-invite-status.pending { color: #866012; background: #fff4d9; }
.op-invite-status.accepted { color: #2b7540; background: #edf8ee; }
.op-invite-status.expired { color: #9b3449; background: #fff0f2; }

.opening-guest-shell { max-width: 1360px; margin: 0 auto; padding-top: 36px; }
.opening-guest-topbar { max-width: none; }
.opening-guest .op-hero::after { background: radial-gradient(circle at 55% 45%, rgba(43,169,155,.11), rgba(43,169,155,0) 70%); }

.op-calendar-view { padding: 18px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.op-calendar-weekday { color: var(--op-muted); font-size: 10px; text-align: center; text-transform: uppercase; font-weight: 800; padding-bottom: 2px; }
.op-calendar-day { min-height: 88px; padding: 7px; border-radius: 11px; border: 1px solid var(--op-line); background: #fff; }
.op-calendar-day.empty { background: transparent; border-color: transparent; }
.op-calendar-day.today { border-color: var(--op-lilac); box-shadow: inset 0 0 0 1px rgba(124,108,242,.2); }
.op-calendar-date { font-size: 11px; color: var(--op-muted); margin-bottom: 5px; font-weight: 800; }
.op-calendar-event { display: block; width: 100%; border: 0; margin: 3px 0 0; border-radius: 5px; padding: 3px 5px; font-size: 9px; text-align: left; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.op-calendar-event.partner { background: #88aa63; }
.op-calendar-event.franchisor { background: #9f69bf; }
.op-calendar-event.shared { background: #7185a8; }

.op-public { max-width: 1360px; margin: 0 auto; padding: 28px; }
.op-public-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 850; color: #5d4cba; font-size: 14px; margin-bottom: 20px; }
.op-public-brand img { width: 34px; height: 34px; object-fit: contain; }
.op-public .op-layout { grid-template-columns: 1fr; }
.op-public .op-stage-nav { display: none; }

@keyframes op-reveal-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes op-kpi-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes op-hero-halo {
  from { opacity: .7; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .op-reveal { animation: op-reveal-in .34s cubic-bezier(.2,.75,.3,1) both; }
  .op-kpi-card { animation: op-kpi-in .34s cubic-bezier(.2,.75,.3,1) both; }
  .op-kpi-card:nth-child(2) { animation-delay: .04s; }
  .op-kpi-card:nth-child(3) { animation-delay: .08s; }
  .op-kpi-card:nth-child(4) { animation-delay: .12s; }
  .op-hero::before { animation: op-hero-halo 5.5s ease-in-out infinite alternate; }
  .op-progress-fill, .op-kpi-meter span, .op-responsibility-track span, .op-task-bar .op-bar-progress { transition: width .42s cubic-bezier(.2,.75,.3,1); }
  .op-task-bar .op-bar-progress.is-animating { will-change: width; }
}

@media (prefers-reduced-motion: reduce) {
  .opening-shell *, .opening-shell *::before, .opening-shell *::after, .op-public *, .op-public *::before, .op-public *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .op-hero::before, .op-hero::after { transform: none !important; }
}

@media (max-width: 920px) {
  .op-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-overview-detail { grid-template-columns: 1fr; }
}

@media (max-width: 1050px) {
  .opening-shell.with-branch-sidebar { margin-left: 0; padding-top: 72px; }
  .op-layout { grid-template-columns: 1fr; }
  .op-list-panel { position: static; }
  .op-project-list { max-height: 220px; display: flex; gap: 7px; overflow-x: auto; padding: 10px; }
  .op-project-list-item { min-width: 220px; }
  .op-hero { grid-template-columns: 1fr; }
  .op-hero-progress { min-width: 0; padding: 14px 15px; border: 1px solid rgba(124,108,242,.16); }
}

@media (max-width: 680px) {
  .opening-shell, .op-public { padding: 16px; }
  .opening-shell.with-branch-sidebar { padding: 72px 14px 28px; }
  .opening-topbar { flex-direction: column; gap: 12px; }
  .opening-toolbar { justify-content: flex-start; }
  .op-hero { padding: 17px; }
  .op-overview { padding: 14px; }
  .op-overview-heading { flex-direction: column; gap: 9px; }
  .op-overview-updated { margin-top: 0; }
  .op-kpi-grid { gap: 7px; }
  .op-kpi-card { padding: 10px; }
  .op-kpi-card dd { font-size: 20px; }
  .op-kpi-card small { min-height: 28px; }
  .op-phase-stepper { grid-template-columns: 1fr; }
  .op-attention-date { max-width: 104px; }
  .op-gantt-toolbar { align-items: flex-start; flex-direction: column; }
  .op-gantt-legend { margin-top: 8px; }
  .op-gantt-touch-hint { display: inline; }
  .op-gantt-scroll { max-height: min(68vh, 620px); overflow: auto; -webkit-overflow-scrolling: touch; }
  .op-gantt { min-width: 800px; }
  .op-gantt-head, .op-stage-row, .op-task-row { grid-template-columns: 258px minmax(540px, 1fr); }
  .op-left-head { padding: 10px 11px; font-size: 10px; }
  .op-stage-label { padding: 9px 11px; }
  .op-task-row { min-height: 60px; }
  .op-task-main { grid-template-columns: auto minmax(0,1fr) auto; min-height: 60px; padding: 8px 10px; }
  .op-task-title { font-size: 12px; }
  .op-stage-track, .op-track { display: grid; }
  .op-detail-grid { grid-template-columns: 1fr; }
  .op-field.full { grid-column: auto; }
  .op-inline-form { grid-template-columns: 1fr; }
  .op-calendar-view { grid-template-columns: repeat(7, minmax(38px, 1fr)); overflow: auto; }
  .op-calendar-day { min-height: 68px; padding: 5px; }
  .op-calendar-event { font-size: 8px; }
  .op-material-grid { grid-template-columns: 1fr; }
  .op-materials-head, .op-library-intro, .op-library-item { align-items: flex-start; flex-direction: column; }
  .op-library-actions { justify-content: flex-start; }
  .op-invite-row { align-items: flex-start; flex-direction: column; }
  .op-invite-actions { justify-content: flex-start; }
  .op-document-meta { flex-direction: column; gap: 3px; }
  .op-document-reader { max-height: calc(94vh - 240px); padding: 14px; font-size: 13px; }
}