:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #182230;
  background: #f4f6f8;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #182230;
  --muted: #718096;
  --line: #e1e7ee;
  --soft-line: #edf1f5;
  --blue: #2d75d6;
  --navy: #17212b;
  --green: #2f9a68;
  --amber: #b7791f;
  --purple: #7355c7;
  --red: #c85050;
  --panel: #fff;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #f4f6f8; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .65; }
#app { min-height: 100vh; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 242px; flex: 0 0 242px; padding: 26px 16px 18px; display: flex; flex-direction: column; background: var(--navy); color: #d7e0e8; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 26px; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: white; background: linear-gradient(135deg, #3989eb, #285bb9); font-weight: 800; }
.brand strong { display: block; color: white; font-size: 16px; letter-spacing: -.2px; }
.brand small { display: block; margin-top: 3px; color: #8ea0b2; font-size: 10px; }
.sidebar-period { margin: 0 10px 10px; color: #8ea0b2; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main-nav { display: grid; gap: 3px; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 11px; border: 0; border-radius: 8px; color: #b8c6d2; background: transparent; text-align: left; font-size: 13px; transition: .18s ease; }
.nav-item:hover { color: white; background: #243340; }
.nav-item.is-active { color: white; background: #2c73d5; box-shadow: 0 7px 16px rgba(22, 79, 162, .22); }
.nav-icon { display: inline-grid; place-items: center; width: 18px; color: currentColor; font-size: 16px; }
.sidebar-divider { height: 1px; margin: 24px 10px 15px; background: #30404d; }
.nav-caption { padding: 0 11px 8px; color: #75899a; font-size: 11px; }
.sidebar-bottom { display: flex; align-items: center; gap: 7px; margin: auto 10px 0; padding-top: 22px; color: #718697; font-size: 10px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #44b97c; box-shadow: 0 0 0 3px rgba(68, 185, 124, .12); }
.main-area { min-width: 0; flex: 1; }
.topbar { min-height: 82px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 34px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.9); }
.eyebrow { display: block; color: #8290a0; font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.topbar-left { display: flex; align-items: center; gap: 13px; min-width: 0; }
.period-switcher { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.period-select { max-width: 240px; padding: 4px 26px 4px 0; border: 0; color: var(--ink); background: transparent; font-weight: 750; font-size: 16px; outline: none; }
.topbar-actions, .page-actions, .detail-actions { display: flex; align-items: center; gap: 9px; }
.content-area { max-width: 1440px; margin: 0 auto; padding: 34px; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 26px; }
.page-heading h1 { margin: 6px 0 5px; color: var(--ink); font-size: 29px; line-height: 1.1; letter-spacing: -.035em; }
.page-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 37px; padding: 0 14px; border: 1px solid transparent; border-radius: 8px; color: white; background: var(--navy); font-size: 12px; font-weight: 700; transition: .16s ease; }
.button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(24,34,48,.12); }
.button-primary { background: var(--blue); }
.button-dark { background: var(--navy); }
.button-light { color: #415165; border-color: #d8e0e8; background: #fff; }
.button-link { min-height: auto; padding: 0; border: 0; color: var(--blue); background: transparent; font-size: 12px; }
.button-danger-ghost { min-height: auto; padding: 0; color: var(--red); border: 0; background: transparent; }
.button-icon { width: 32px; min-height: 32px; padding: 0; color: #708091; border-color: #dfe5eb; background: white; font-size: 18px; }
.month-nav { display: inline-flex; align-items: center; gap: 12px; min-height: 37px; padding: 0 8px; border: 1px solid #dce3ea; border-radius: 8px; color: #45566a; background: white; font-size: 12px; font-weight: 700; }
.month-nav .button { border: 0; box-shadow: none; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 18px; }
.stat-card { min-height: 126px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 4px 14px rgba(35,49,64,.025); }
.stat-card > span { display: block; color: #7c8997; font-size: 12px; }
.stat-card strong { display: block; margin: 12px 0 8px; color: var(--ink); font-size: 28px; letter-spacing: -.04em; }
.stat-card small { color: #98a5b1; font-size: 11px; }
.stat-card .blue { color: var(--blue); }.stat-card .green { color: var(--green); }.stat-card .green-text { color: var(--green); font-size: 16px; letter-spacing: 0; }.stat-card .amber-text { color: var(--amber); font-size: 16px; letter-spacing: 0; }
.overview-grid, .split-layout, .delivery-layout, .score-layout, .members-layout { display: grid; grid-template-columns: 1.18fr .82fr; gap: 16px; }
.split-layout { grid-template-columns: minmax(310px, .42fr) minmax(0, 1.58fr); }
.delivery-layout { grid-template-columns: minmax(250px, .36fr) minmax(0, 1.64fr); }
.score-layout { grid-template-columns: minmax(265px, .38fr) minmax(0, 1.62fr); }
.members-layout { grid-template-columns: 1.25fr .75fr; }
.panel { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 4px 14px rgba(35,49,64,.025); }
.panel-title, .list-toolbar, .section-title, .detail-header, .form-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.panel-title h2, .detail-header h2, .form-heading h2 { margin: 0 0 5px; color: var(--ink); font-size: 16px; letter-spacing: -.02em; }
.panel-title p, .form-heading p, .detail-header p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.panel-title > div:first-child { min-width: 0; }
.progress-panel, .ranking-preview { min-height: 330px; }
.progress-row { display: grid; grid-template-columns: 74px 1fr 47px; align-items: center; gap: 14px; margin: 26px 0; color: #526274; font-size: 12px; }
.progress-row strong { color: #4c5c6d; font-size: 12px; text-align: right; }
.progress-track { height: 8px; overflow: hidden; border-radius: 20px; background: #edf1f5; }.progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2d75d6, #5c9cec); }
.notice { display: flex; flex-direction: column; gap: 4px; margin-top: 20px; padding: 12px 13px; border: 1px solid; border-radius: 9px; font-size: 12px; line-height: 1.5; }.notice strong { font-size: 12px; }.notice span { color: inherit; opacity: .8; }.notice-warning { color: #805b17; border-color: #f3dfad; background: #fffaf0; }.notice-success { color: #236a48; border-color: #c9ead8; background: #f0fbf5; }.notice-info { color: #2c5e91; border-color: #cfe2f8; background: #f2f8ff; }.warning-list { display: grid; gap: 7px; margin-top: 17px; padding: 12px; border-radius: 8px; color: #8a5e12; background: #fff9e9; font-size: 11px; }
.panel-footer-link { margin-top: 20px; color: var(--blue); font-size: 12px; font-weight: 700; cursor: pointer; }.muted { color: #8a97a5; font-size: 12px; }
.mini-row { display: grid; grid-template-columns: 35px 1fr 52px 40px; align-items: center; gap: 7px; padding: 12px 0; border-bottom: 1px solid var(--soft-line); font-size: 12px; }.mini-row:last-of-type { border-bottom: 0; }.mini-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-weight: 700; }.mini-name small { color: #97a4b2; font-size: 10px; font-weight: 500; }.mini-row > strong { text-align: right; }.rank-number { color: #8794a1; font-size: 12px; font-weight: 800; }.rank-1 { color: #bd8425; }.grade { display: inline-grid; place-items: center; min-width: 32px; height: 23px; border-radius: 6px; font-size: 11px; font-weight: 800; }.grade-A { color: #9b6810; background: #fff1c8; }.grade-BPlus { color: #2868b9; background: #e9f2ff; }.grade-B { color: #506174; background: #eff2f5; }.grade-C { color: #b14646; background: #fdecec; }
.list-toolbar { align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--soft-line); }.list-toolbar strong { font-size: 14px; }.list-toolbar span { color: #8b99a6; font-size: 11px; }
.project-list-item, .score-member { display: flex; align-items: center; gap: 11px; width: 100%; padding: 13px 8px; border: 0; border-bottom: 1px solid var(--soft-line); color: var(--ink); background: transparent; text-align: left; }.project-list-item:hover, .score-member:hover, .project-list-item.is-selected, .score-member.is-selected { border-radius: 8px; background: #f1f6fd; }.project-list-item.is-selected, .score-member.is-selected { box-shadow: inset 3px 0 var(--blue); }.project-avatar, .avatar-sm { display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #2e67a6; background: #e8f1fc; font-weight: 800; }.project-avatar { width: 34px; height: 34px; font-size: 14px; }.avatar-sm { width: 30px; height: 30px; font-size: 12px; }.project-list-copy, .score-member > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }.project-list-copy strong, .score-member strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }.project-list-copy small, .score-member small { color: #94a1ae; font-size: 10px; }.project-list-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }.project-list-meta small { color: #7e8d9b; font-size: 10px; }.chevron { color: #8c99a6; font-size: 20px; }.status { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; border-radius: 5px; color: #586878; background: #eff2f5; font-size: 10px; font-weight: 750; white-space: nowrap; }.status-active, .status-scoring { color: #2b6cb0; background: #e9f3ff; }.status-completed { color: #27734e; background: #e7f8ef; }.status-locked { color: #6d4ca9; background: #f0e9ff; }.status-paused { color: #986921; background: #fff3d5; }
.detail-panel, .delivery-form-panel, .score-detail { min-height: 600px; }.detail-header { padding-bottom: 19px; border-bottom: 1px solid var(--soft-line); }.detail-header > div:first-child { min-width: 0; }.detail-kicker { margin-bottom: 8px; color: #8391a0; font-size: 10px; }.detail-header h2 { font-size: 24px; }.tag-row { display: flex; flex-wrap: wrap; gap: 7px; padding: 16px 0 6px; }.tag { display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px; border-radius: 5px; color: #657487; background: #f0f3f6; font-size: 10px; }.tag-purple { color: #6c4fb1; background: #f0eaff; }.tag-green { color: #27734e; background: #e7f8ef; }.detail-section { padding-top: 21px; }.section-title { align-items: center; margin-bottom: 11px; }.section-title h3 { margin: 0; font-size: 13px; }.section-title > span { color: #8a98a5; font-size: 10px; }.metric-table { overflow: hidden; border: 1px solid var(--soft-line); border-radius: 8px; }.metric-head, .metric-row { display: grid; grid-template-columns: 1.45fr .8fr .5fr .65fr; gap: 10px; align-items: center; padding: 10px 12px; font-size: 11px; }.metric-head { color: #96a2ae; background: #fafbfc; font-size: 10px; }.metric-row { border-top: 1px solid var(--soft-line); }.metric-row > span { color: #6f7f8f; }.people-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.person-chip, .member-row { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px; border: 1px solid var(--soft-line); border-radius: 8px; }.person-chip > div, .member-row > div:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }.person-chip strong, .member-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }.person-chip small, .member-row small { color: #8b98a5; font-size: 10px; line-height: 1.5; }.evidence-copy { margin: 0; padding: 11px 12px; border-radius: 8px; color: #607082; background: #f8fafc; font-size: 12px; line-height: 1.7; }
.form-heading { padding-bottom: 20px; border-bottom: 1px solid var(--soft-line); }.form-heading > div:first-child { min-width: 0; }.member-picker select { min-width: 180px; }.form-section { padding: 21px 0; border-bottom: 1px solid var(--soft-line); }.form-section:last-of-type { border-bottom: 0; }.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: #68788a; font-size: 11px; }.field > span { color: #718091; font-size: 11px; font-weight: 650; }.field input, .field select, .field textarea, .editor-row input, .editor-row select, .participant-editor-row input, .participant-editor-row select, .settings-inline input, .calibration-input { width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid #dce3ea; border-radius: 7px; outline: none; color: var(--ink); background: #fff; font-size: 12px; }.field textarea { resize: vertical; line-height: 1.5; }.field input:focus, .field select:focus, .field textarea:focus { border-color: #72a4e5; box-shadow: 0 0 0 3px rgba(45,117,214,.1); }.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.delivery-table { display: grid; gap: 11px; }.delivery-row { display: grid; grid-template-columns: 1.15fr .7fr 1fr 1.1fr; gap: 10px; padding: 13px; border: 1px solid var(--soft-line); border-radius: 8px; background: #fbfcfd; }.delivery-row > div:first-child { display: flex; flex-direction: column; gap: 4px; padding-top: 22px; }.delivery-row strong { font-size: 12px; }.delivery-row small { color: #8c99a5; font-size: 10px; }.delivery-row .field input, .delivery-row .field textarea { background: white; }.personal-delivery-list { display: grid; gap: 9px; }.personal-row { display: grid; grid-template-columns: 1.15fr .52fr .56fr 1fr 1.15fr 32px; gap: 9px; align-items: end; padding: 11px; border: 1px solid var(--soft-line); border-radius: 8px; }.personal-row .field { gap: 5px; }.icon-button { width: 30px; height: 30px; border: 0; border-radius: 7px; color: #80909e; background: #f0f3f6; font-size: 17px; }.icon-button.danger { color: var(--red); background: #fff0f0; }.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding-top: 19px; }.inline-help { margin-top: 8px; color: #8a98a5; font-size: 10px; line-height: 1.5; }
.score-member { padding: 12px 8px; }.score-member > b { color: #25374b; font-size: 14px; }.warning-dot { display: inline-grid; place-items: center; min-width: 15px; height: 15px; margin-right: 3px; border-radius: 50%; color: #925d0b; background: #ffedb9; font-style: normal; }.score-hero { display: flex; flex-direction: column; align-items: flex-end; }.score-hero strong { color: var(--blue); font-size: 35px; letter-spacing: -.05em; }.score-hero small { color: #8b98a5; font-size: 10px; }.score-breakdown { display: grid; gap: 10px; padding-top: 20px; }.score-project-row { display: flex; justify-content: space-between; gap: 14px; padding: 13px; border: 1px solid var(--soft-line); border-radius: 8px; background: #fbfcfd; }.score-project-row > div:first-child { display: flex; flex-direction: column; gap: 4px; }.score-project-row strong { font-size: 12px; }.score-project-row small { color: #8a98a5; font-size: 10px; }.score-calc { display: flex; align-items: center; gap: 8px; color: #85919e; font-size: 12px; white-space: nowrap; }.score-calc em { color: var(--green); font-style: normal; }.score-calc > strong { color: var(--ink); font-size: 14px; }.score-calc > small { color: var(--blue); }.score-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 17px; }.score-summary > div { display: flex; flex-direction: column; gap: 7px; padding: 13px; border-radius: 8px; background: #f6f8fa; }.score-summary span { color: #7e8b98; font-size: 10px; }.score-summary strong { font-size: 16px; }.score-total { color: white; background: var(--navy) !important; }.score-total span { color: #aebdca; }.score-total strong { color: white; }.attendance-form { display: grid; grid-template-columns: 1fr 1fr 1.3fr auto; align-items: end; gap: 10px; margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--soft-line); }.green-text { color: var(--green) !important; }.score-rule { color: #81909e; font-size: 11px; }
.distribution-panel { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 16px; }.distribution-panel h2 { margin: 5px 0 0; font-size: 17px; }.distribution-grid { display: grid; grid-template-columns: repeat(4, 100px); gap: 8px; }.distribution-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border-radius: 8px; background: #f6f8fa; }.distribution-card strong { font-size: 18px; }.distribution-card span { color: #7f8d9b; font-size: 10px; }.distribution-card b { font-size: 11px; }.grade-card-A strong { color: #b57d1b; }.grade-card-BPlus strong { color: var(--blue); }.grade-card-B strong { color: #667686; }.grade-card-C strong { color: var(--red); }.ranking-panel { padding-bottom: 14px; }.ranking-legend { color: #91a0ad; font-size: 11px; }.table-wrap { overflow-x: auto; margin-top: 15px; }.table-wrap table { width: 100%; min-width: 850px; border-collapse: collapse; font-size: 12px; }.table-wrap th { padding: 11px 10px; color: #8c99a6; background: #fafbfc; font-size: 10px; font-weight: 650; text-align: left; }.table-wrap td { padding: 12px 10px; border-top: 1px solid var(--soft-line); vertical-align: middle; }.table-wrap td > strong, .table-wrap td > small { display: block; }.table-wrap td > small { margin-top: 3px; color: #8d9aa7; font-size: 10px; }.score-number { color: var(--blue); font-size: 14px; }.settings-inline { display: grid; grid-template-columns: 1.25fr repeat(4, .7fr) auto; align-items: end; gap: 9px; padding-top: 16px; border-top: 1px solid var(--soft-line); }.settings-inline .field > span { white-space: nowrap; }
.member-table { display: grid; gap: 8px; }.member-row { min-height: 58px; }.member-row > div:last-child { display: flex; gap: 10px; }.member-participation { min-width: 90px; }.settings-card { align-self: start; }.setting-line { display: flex; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--soft-line); color: #738191; font-size: 12px; }.setting-line strong { color: var(--ink); font-size: 12px; text-align: right; }
.backup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.backup-card { min-height: 255px; }.backup-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 10px; color: var(--blue); background: #eaf3ff; font-size: 22px; font-weight: 750; }.backup-card h2 { margin: 0 0 9px; font-size: 16px; }.backup-card p { min-height: 55px; margin: 0 0 20px; color: var(--muted); font-size: 12px; line-height: 1.7; }.demo-card .backup-icon { color: #9a6b17; background: #fff2cf; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 280px; padding: 26px; text-align: center; }.empty-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 13px; color: var(--blue); background: #eaf3ff; font-size: 25px; }.empty-state h3 { margin: 0 0 7px; font-size: 16px; }.empty-state p { max-width: 330px; margin: 0 0 17px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.modal-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(17, 28, 39, .5); backdrop-filter: blur(4px); }.modal { width: min(560px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 22px; border: 1px solid #dce4eb; border-radius: 14px; background: #fff; box-shadow: 0 22px 80px rgba(14, 26, 40, .28); }.modal-small { width: min(430px, 100%); }.modal-large { width: min(960px, 100%); }.modal-header { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 18px; }.modal-header h2 { margin: 5px 0; font-size: 21px; }.modal-header p { margin: 0; color: var(--muted); font-size: 12px; }.editor-list { display: grid; gap: 8px; }.editor-row { display: grid; grid-template-columns: 1.25fr .9fr .55fr .75fr 32px; gap: 8px; align-items: center; }.participant-editor-row { display: grid; grid-template-columns: 1.1fr .55fr 1.35fr 32px; gap: 8px; align-items: center; }.editor-row input, .editor-row select, .participant-editor-row input, .participant-editor-row select { min-width: 0; }.difficulty-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 13px; }.difficulty-option input { position: absolute; opacity: 0; }.difficulty-option span { display: flex; flex-direction: column; gap: 5px; padding: 11px; border: 1px solid #e1e7ed; border-radius: 8px; cursor: pointer; }.difficulty-option input:checked + span { color: #315e96; border-color: #82afe6; background: #f0f6ff; box-shadow: inset 0 0 0 1px #82afe6; }.difficulty-option strong { font-size: 11px; }.difficulty-option small { color: #8896a4; font-size: 10px; }
.toast { position: fixed; z-index: 30; right: 24px; bottom: 24px; max-width: min(420px, calc(100vw - 48px)); padding: 12px 15px; border: 1px solid #c9ead8; border-radius: 9px; color: #246b49; background: #effbf4; box-shadow: 0 10px 30px rgba(29, 67, 47, .15); font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .18s ease; }.toast.is-visible { opacity: 1; transform: translateY(0); }.toast-error { color: #9e3737; border-color: #f0c9c9; background: #fff1f1; }

.guide-page { display: grid; gap: 16px; }
.guide-section { display: grid; gap: 13px; }
.guide-section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; }
.guide-section-heading h2 { margin: 6px 0 5px; color: var(--ink); font-size: 20px; letter-spacing: -.025em; }
.guide-section-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.guide-hero { padding: 28px 30px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #17304a, #286fc8); box-shadow: 0 12px 30px rgba(31, 86, 151, .14); }
.guide-hero h2 { margin: 8px 0 9px; font-size: 26px; letter-spacing: -.035em; }
.guide-hero p { max-width: 760px; margin: 0; color: #d7e7f8; font-size: 13px; line-height: 1.75; }
.guide-hero-note { display: flex; align-items: center; gap: 10px; margin-top: 20px; color: #bad6f2; font-size: 11px; }.guide-hero-note strong { color: #fff; font-size: 12px; }
.guide-flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.guide-step { min-height: 145px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 4px 14px rgba(35,49,64,.025); }
.guide-step-number { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.guide-step h3 { margin: 16px 0 6px; color: var(--ink); font-size: 13px; }.guide-step p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.guide-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.guide-rule-card { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 4px 14px rgba(35,49,64,.025); }
.guide-rule-card-wide { min-height: 154px; }.guide-rule-card h3 { margin: 0 0 10px; color: var(--ink); font-size: 13px; }.guide-rule-card p { margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }.guide-rule-card p strong { color: var(--ink); }.guide-rule-callout { display: flex; flex-direction: column; gap: 4px; margin-top: 11px; padding: 9px 10px; border-left: 3px solid var(--blue); color: #526b83; background: #f5f9fe; font-size: 10px; line-height: 1.55; }.guide-rule-callout strong { color: #2d5d92; font-size: 11px; }
.guide-formula { margin: 10px 0; padding: 10px; border-radius: 7px; color: #2d5d92; background: #f1f7ff; font-size: 12px; font-weight: 750; line-height: 1.6; }
.guide-rule-table { display: grid; overflow: hidden; border: 1px solid var(--soft-line); border-radius: 7px; }.guide-rule-table div { display: flex; justify-content: space-between; gap: 8px; padding: 7px 9px; border-bottom: 1px solid var(--soft-line); color: #647486; font-size: 10px; }.guide-rule-table div:last-child { border-bottom: 0; }.guide-rule-table strong { color: var(--blue); font-size: 11px; }
.guide-example-layout, .guide-calculator-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 16px; }.guide-example, .guide-calculator { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 4px 14px rgba(35,49,64,.025); }
.guide-example-label { margin-bottom: 10px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.guide-example h3 { margin: 0 0 9px; color: var(--ink); font-size: 17px; }.guide-example p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }.guide-example-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 18px; }.guide-example-facts div { padding: 10px; border-radius: 8px; background: #f6f8fa; }.guide-example-facts span, .guide-example-facts strong { display: block; }.guide-example-facts span { color: #82909e; font-size: 10px; }.guide-example-facts strong { margin-top: 5px; color: var(--ink); font-size: 13px; }.guide-example-facts div:last-child strong { font-size: 11px; }
.guide-example-calc { display: grid; gap: 8px; }.guide-example-line { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 9px; padding: 10px 0; border-bottom: 1px solid var(--soft-line); }.guide-example-line > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }.guide-example-line strong { color: var(--ink); font-size: 11px; }.guide-example-line small { overflow: hidden; color: #8a98a5; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.guide-example-line b { color: var(--blue); font-size: 13px; white-space: nowrap; }.guide-example-summary { display: grid; gap: 5px; margin-top: 9px; padding: 13px; border-radius: 8px; color: #fff; background: var(--navy); }.guide-example-summary span { color: #aebdca; font-size: 10px; }.guide-example-summary strong { font-size: 16px; }.guide-example-summary small { color: #c3d0da; font-size: 10px; line-height: 1.55; }
.guide-live-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 25px; padding: 0 9px; border: 1px solid #c9ead8; border-radius: 6px; color: #28734e; background: #f0fbf5; font-size: 10px; font-weight: 700; white-space: nowrap; }.guide-live-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.guide-card-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding-bottom: 15px; border-bottom: 1px solid var(--soft-line); }.guide-card-title h3 { margin: 0 0 5px; color: var(--ink); font-size: 15px; }.guide-card-title p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }.guide-preview-grade { display: inline-grid; place-items: center; min-width: 38px; height: 28px; border-radius: 7px; color: #2868b9; background: #e9f2ff; font-size: 13px; font-weight: 800; }
.guide-calc-form { display: grid; gap: 15px; }.guide-calc-form .field input, .guide-calc-form .field select { background: #fbfcfd; }.guide-calc-form { grid-template-columns: repeat(2, 1fr); }.guide-field-wide { grid-column: 1 / -1; }.guide-responsibility-editor { padding-top: 14px; border-top: 1px solid var(--soft-line); }.guide-subtitle { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }.guide-subtitle strong { color: var(--ink); font-size: 11px; }.guide-subtitle span { color: #8a98a5; font-size: 10px; }.guide-responsibility-row { display: grid; grid-template-columns: 1.6fr .8fr; gap: 9px; align-items: end; margin-top: 8px; }.guide-responsibility-row select { width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid #dce3ea; border-radius: 7px; outline: none; color: var(--ink); background: #fbfcfd; font-size: 12px; }.guide-responsibility-row .field { gap: 5px; }.guide-responsibility-row .field > span { font-size: 10px; }
.guide-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }.guide-result-item { min-width: 0; padding: 11px; border-radius: 8px; background: #f6f8fa; }.guide-result-item span, .guide-result-item small { display: block; color: #7d8b99; font-size: 10px; line-height: 1.4; }.guide-result-item strong { display: block; margin-top: 6px; color: var(--ink); font-size: 16px; letter-spacing: -.02em; }.guide-result-item small { margin-top: 5px; }.guide-result-total { color: #fff; background: var(--navy); }.guide-result-total span, .guide-result-total small { color: #b7c6d2; }.guide-result-total strong { color: #fff; }.guide-result-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; color: #82909e; font-size: 10px; }.guide-result-foot strong.is-valid { color: var(--green); }.guide-result-foot strong.is-error { color: var(--red); }.guide-calculator-note { display: flex; flex-direction: column; gap: 4px; margin-top: 17px; padding: 11px 12px; border-radius: 8px; color: #5d6f81; background: #f5f8fb; font-size: 10px; line-height: 1.6; }.guide-calculator-note strong { color: var(--ink); font-size: 11px; }
.guide-calculation-chain { display: grid; gap: 0; margin-top: 16px; overflow: hidden; border: 1px solid #dbe6f1; border-radius: 9px; background: #fbfdff; }.guide-chain-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid #dbe6f1; background: #f2f7fd; }.guide-chain-heading strong { color: #2d5d92; font-size: 11px; }.guide-chain-heading span { color: #8092a4; font-size: 10px; }.guide-chain-row { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--soft-line); font-size: 10px; line-height: 1.55; }.guide-chain-row > b { color: var(--ink); font-size: 10px; }.guide-chain-row > span { color: #5d6f81; }.guide-chain-row > div { display: grid; gap: 4px; min-width: 0; }.guide-chain-row code { overflow-wrap: anywhere; color: #2d5d92; font-family: inherit; font-size: 10px; font-weight: 750; }.guide-chain-row small { color: #82909e; font-size: 9px; line-height: 1.55; }.guide-chain-final { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px; color: white; background: var(--navy); }.guide-chain-final span { color: #b7c6d2; font-size: 10px; }.guide-chain-final strong { color: white; font-size: 12px; text-align: right; }

@media (max-width: 1080px) { .sidebar { width: 210px; flex-basis: 210px; }.content-area { padding: 26px; }.overview-grid, .members-layout { grid-template-columns: 1fr; }.distribution-panel { align-items: flex-start; flex-direction: column; }.settings-inline { grid-template-columns: repeat(3, 1fr); }.settings-inline .button { grid-column: 1 / -1; justify-self: end; } }
@media (max-width: 760px) { .app-shell { display: block; }.sidebar { width: 100%; padding: 15px 14px 12px; }.brand { padding-bottom: 13px; }.sidebar-period, .sidebar-divider, .nav-caption, .sidebar-bottom { display: none; }.main-nav { display: flex; overflow-x: auto; gap: 5px; }.nav-item { width: auto; flex: 0 0 auto; padding: 9px 10px; white-space: nowrap; }.nav-item .nav-icon { display: none; }.topbar { align-items: flex-start; flex-direction: column; padding: 17px 18px; }.topbar-actions { width: 100%; }.topbar-actions .button { flex: 1; }.content-area { padding: 20px 15px 30px; }.page-heading { align-items: flex-start; flex-direction: column; }.page-actions { width: 100%; flex-wrap: wrap; }.page-actions .button { flex: 1; }.stat-grid { grid-template-columns: 1fr 1fr; }.split-layout, .delivery-layout, .score-layout { grid-template-columns: 1fr; }.detail-panel, .delivery-form-panel, .score-detail { min-height: auto; }.two-col, .people-grid, .backup-grid { grid-template-columns: 1fr; }.delivery-row { grid-template-columns: 1fr 1fr; }.personal-row { grid-template-columns: 1fr 1fr; }.personal-row > div:first-child, .personal-row > div:nth-child(5) { grid-column: 1 / -1; }.score-summary { grid-template-columns: 1fr 1fr; }.attendance-form { grid-template-columns: 1fr 1fr; }.attendance-form .button { grid-column: 1 / -1; }.settings-inline { grid-template-columns: 1fr 1fr; }.settings-inline .button { grid-column: 1 / -1; }.editor-row, .participant-editor-row { grid-template-columns: 1fr 1fr; }.editor-row .icon-button, .participant-editor-row .icon-button { justify-self: end; }.difficulty-options { grid-template-columns: 1fr 1fr; }.modal-backdrop { padding: 10px; }.modal { max-height: calc(100vh - 20px); padding: 17px; }.form-heading { flex-direction: column; }.member-picker { width: 100%; }.member-picker select { width: 100%; }.guide-flow, .guide-rules, .guide-example-layout, .guide-calculator-layout { grid-template-columns: 1fr; }.guide-calc-form, .guide-result-grid { grid-template-columns: 1fr 1fr; }.guide-step { min-height: auto; }.guide-hero { padding: 22px 20px; }.guide-hero h2 { font-size: 23px; }.guide-section-heading { align-items: flex-start; flex-direction: column; }.guide-live-badge { align-self: flex-start; }.guide-example-facts { grid-template-columns: 1fr 1fr; }.guide-example-facts div:last-child { grid-column: 1 / -1; }.guide-result-foot { align-items: flex-start; flex-direction: column; }.guide-chain-heading, .guide-chain-final { align-items: flex-start; flex-direction: column; }.guide-chain-final strong { text-align: left; } }

.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.challenge-goal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.challenge-goal-grid > div { display: flex; flex-direction: column; gap: 5px; padding: 11px; border-radius: 8px; background: #f6f8fa; }
.challenge-goal-grid span, .milestone-list span { color: #82909e; font-size: 10px; }
.challenge-goal-grid strong { color: var(--ink); font-size: 12px; line-height: 1.5; }
.milestone-list { display: grid; gap: 6px; margin-top: 9px; }
.milestone-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--soft-line); border-radius: 7px; }
.milestone-list strong { color: var(--blue); font-size: 11px; }
.challenge-metric-row { grid-template-columns: 1.25fr .9fr .55fr .75fr .85fr 32px; }
.milestone-editor-row { grid-template-columns: 1.25fr .55fr 1fr 32px; }
.metric-table.challenge-metric-table .metric-head, .metric-table.challenge-metric-table .metric-row { grid-template-columns: 1.45fr .8fr .5fr .65fr .65fr; }
.validation-row { background: #fbfdff; }

@media (max-width: 760px) {
  .three-col, .challenge-goal-grid { grid-template-columns: 1fr; }
  .challenge-metric-row, .milestone-editor-row { grid-template-columns: 1fr 1fr; }
  .metric-table.challenge-metric-table .metric-head, .metric-table.challenge-metric-table .metric-row { grid-template-columns: 1fr 1fr; }
}