/* NEXWORKER — URETILMIS DOSYA (aile cam). Kaynak: assets/css, derleme: php tools/build-css.php */
.zone-page > .detail-zone > .zone-head .zone-tag { line-height: 1.45; letter-spacing: 0.045em; font-variant-numeric: tabular-nums; }
.challenge-journal-shell { gap: 22px; }
.challenge-journal-editor { gap: 16px; padding: clamp(18px, 2vw, 28px); border: 1px solid color-mix(in srgb, var(--gold) 27%, var(--frame)); border-radius: 18px; background:
linear-gradient(135deg, color-mix(in srgb, var(--gold) 7%, transparent), transparent 42%),
color-mix(in srgb, var(--plate-1) 86%, var(--sunk)); }
.challenge-journal-editor > header, .challenge-journal-page > header { gap: 16px; }
.challenge-journal-editor h3 { margin-top: 5px; color: var(--ink); font-size: clamp(1.2rem, 1.45vw, 1.65rem); }
.challenge-journal-editor label { gap: 8px; color: var(--ink-2); font-weight: 750; }
.challenge-journal-editor textarea { border-radius: 15px; padding: 16px 18px; font-size: clamp(1rem, 0.92vw, 1.12rem); line-height: 1.7; color: var(--ink); background: color-mix(in srgb, var(--sunk) 78%, var(--plate-2)); border-color: color-mix(in srgb, var(--gold) 18%, var(--channel)); }
.challenge-journal-history { gap: 12px; }
.challenge-journal-history > .card-head { margin-top: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.challenge-journal-history > .card-head b { font-family: var(--mono); color: var(--gold); }
.challenge-journal-page { gap: 14px; padding: 18px 20px; border-radius: 15px; border: 1px solid var(--hair); background: color-mix(in srgb, var(--plate-2) 86%, var(--sunk)); }
.challenge-journal-page.is-current { border-color: color-mix(in srgb, var(--gold) 42%, var(--frame)); box-shadow: inset 3px 0 0 var(--gold); }
.challenge-journal-page header span { font-family: var(--mono); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.13em; color: var(--gold); }
.challenge-journal-page h4 { margin-top: 3px; color: var(--ink); font-size: 1.06rem; }
.challenge-journal-page header a { color: var(--cyan); text-decoration: none; font-weight: 800; }
.challenge-journal-page p { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.75; }
@media (max-width: 680px) {
.challenge-journal-editor { padding: 16px 14px; }
.challenge-journal-page { padding: 16px 14px; }
}
.page-wrap { margin:0 auto; }
.form-grid { margin-top:22px; }
.form-grid input, .form-grid select, .form-grid textarea, .form-stack input, .compact-settings input, .adjustment-form input, .mini-form input, .complete-inline input { padding:0 12px; }
.form-grid textarea { padding-top:11px; }
.stage-chip { margin-left:5px; }
.unit-row { gap:12px; padding:7px 14px; }
.unit-row.completed { opacity:.72; }
.complete-inline { gap:6px; }
.funnel-flow { gap:5px; margin:32px 0; padding:18px 0; }
.funnel-step { padding:8px 5px; }
.funnel-step strong { margin:6px 0 3px; }
.kpi-cards div { padding:13px; }
.kpi-cards strong { margin-top:6px; }
.data-panel { margin-top:18px; }
.financial-strip { gap:0; margin-top:18px; padding:0; }
.financial-strip div { padding:20px 16px; }
.financial-strip strong { margin-top:6px; }
.table-scroll { margin:18px -24px -24px; }
.report-grid { gap:18px; }
.bar-chart { gap:7px; padding-top:30px; }
.bar-column { gap:7px; }
.bar-stack i { transition:height .85s cubic-bezier(.18,.82,.22,1) var(--bar-delay,0ms); }
.category-report { gap:4px; }
.category-report .panel-head { margin-bottom:15px; }
.category-score { gap:9px; padding:12px 0; padding-bottom:13px; }
.settings-section { gap:30px; }
.settings-section h2 { margin:0; }
.theme-option { padding:10px; }
.theme-option input { opacity:0; }
.theme-option i { gap:3px; padding:5px; }
.theme-option i b { opacity:.9; }
.theme-option i b:nth-child(2) { opacity:.6; }
.theme-option strong { margin-top:7px; }
.adjustment-form { gap:8px; }
.auth-card .brand-mark { margin-bottom:28px; }
.form-stack { margin-top:22px; }
.dashboard-wrap { margin:0 auto; gap:18px; }
.welcome-copy { margin:8px 0 0; margin-top:10px; }
.panel { animation:kinetic-enter .42s cubic-bezier(.2,.8,.2,1) both; }
.panel-head { column-gap:16px; }
.score-body { margin-top:22px; }
.score-ring { padding-right:24px; padding:0; animation:kinetic-breathe 2.8s ease-in-out infinite; }
.score-ring span { margin-top:6px; }
.task-item { gap:12px; padding:11px 12px; transition:.18s; margin:7px 0; }
.task-points span { margin-top:3px; }
.quote-panel p { margin:0 0 11px; }
.page-wrap, .dashboard-wrap { padding:36px 34px 56px; padding-top:clamp(32px,3vw,54px); }
.form-panel, .list-panel, .data-panel, .settings-panel, .funnel-panel, .chart-panel, .category-report { padding:24px; }
.kinetic-score-burst { gap:2px; padding:12px 15px; animation:kinetic-burst .9s cubic-bezier(.18,.8,.22,1) forwards; }
.field-label, .form-grid label, .form-stack label, .compact-settings label { gap:7px; }
.button, .secondary-button { padding:10px 15px; }
.pwa-toast { gap:3px; padding:14px 16px; animation:kinetic-toast .45s cubic-bezier(.2,1.2,.3,1); }
.login-shell input:not([type="checkbox"]):not([type="radio"]) { padding:12px 15px; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,transform .18s ease; }
.mission-v4-page .panel-head p { margin:6px 0 0; }
.is-loading { opacity:.74; }
.kpi-toolbelt, .data-action-grid, .data-control-grid { gap:18px; }
.kpi-toolbelt { padding:24px; }
.kpi-toolbelt > div:last-child { gap:10px; }
.kpi-toolbelt form { gap:8px; }
.quick-record-links { gap:0; }
.quick-record-links > a { padding:14px; }
.data-action-card { gap:7px; padding:24px; }
.data-control-grid { margin-top:18px; }
.premium-form-panel, .correction-list, .trash-center, .audit-log, .kpi-control-v4 > .panel { padding:24px; }
.correction-list article, .trash-center article, .audit-log article { gap:12px; padding:12px 0; }
.correction-list article div { gap:4px; }
.trash-center, .audit-log { margin-top:18px; }
.notification-settings-grid { gap:12px; }
.notification-settings-grid > label:has(input[type="checkbox"]) { gap:9px; padding:12px; }
.detail-cta { margin-top:auto; }
.notification-item.read { opacity:.56; }
.day-transition-v3 form { gap:10px; }
.day-close-metrics { margin-top:15px; }
.day-close-metrics span { gap:3px; padding:9px 11px; }
.creative-timeline, .creative-status-control, .creative-checklist, .creative-kpi-mini, .creative-versions { padding:26px; }
.creative-stage-row { gap:13px; padding:15px 0; }
.creative-stage-row > div { gap:4px; }
.drive-launch { padding:13px; }
.creative-checklist form { gap:9px; }
.creative-checklist label { gap:11px; padding:12px; }
.mini-metric-grid div { gap:5px; padding:13px; }
.version-grid { gap:11px; }
.version-grid > article, .version-add-card { gap:8px; padding:16px; }
.creative-meta-editor { margin-top:20px; padding:0; }
.creative-meta-editor summary { padding:18px 23px; }
.creative-meta-editor form { padding:0 23px 23px; }
.schedule-history { gap:0; margin-top:20px; padding:25px; }
.schedule-history > div:not(.panel-head) { gap:15px; padding:12px 0; }
.mission-filters { gap:8px; margin:-8px 0 18px; }
.mission-filters a { padding:10px 15px; }
.mission-pulse-grid { margin-bottom:18px; }
.mission-pulse-grid article { gap:5px; padding:16px; }
.mission-v3-layout { gap:20px; }
.reschedule-dialog form { gap:14px; padding:25px; }
.time-grid { gap:20px; }
.time-grid > article, .day-history { padding:25px; }
.time-type-list > div { gap:14px; padding:13px 0; }
.time-type-list span { gap:3px; }
.hour-heatmap { gap:9px; }
.hour-heatmap div { gap:4px; padding:14px; }
.day-summary-grid { gap:10px; }
.day-summary-grid article { gap:6px; padding:15px; }
.day-summary-grid p { margin:5px 0 0; }
.category-time-panel { margin:20px 0; padding:25px; }
.category-time-grid { gap:10px; }
.category-time-grid article { gap:5px; padding:15px; }
.challenge-bars { padding-top:20px; }
.ads-kpi-v3 .funnel-panel-v3 { margin-bottom:24px; }
.calculated-kpi-panel-v3 { padding:22px; }
.calculated-kpi-panel-v3 .calculated-kpi-grid { gap:8px; }
.calculated-kpi-panel-v3 .calculated-kpi-grid article { padding:12px; }
.kpi-table-v3 { margin-top:26px; }
.funnel-panel-v3 + .kpi-entry-v3 { margin-top:0; }
.device-settings-controls { gap:14px; }
.current-device-card { gap:13px; padding:16px 17px; }
.device-pulse { animation:kinetic-pulse 1.45s ease-in-out infinite; }
.current-device-card strong { margin-top:3px; }
.current-device-card div span { margin-top:2px; }
.current-device-card > b { padding:6px 9px; }
.device-fields { gap:12px; }
.device-fields label { gap:7px; }
.device-fields input, .device-fields select { padding:11px 13px; }
.session-expiry { gap:3px; padding:13px 15px; }
.day-transition-banner { gap:24px; margin:22px clamp(28px,3vw,60px) 0; padding:18px 20px; }
.day-transition-banner h2 { margin:3px 0; }
.day-transition-banner p { margin:0; }
.production-layout, .kpi-entry-layout, .finance-layout { gap:22px; }
.production-card-grid { gap:14px; margin-top:18px; }
.production-card { gap:11px; }
.production-card > div:first-child { gap:10px; }
.production-card h3 { margin:0; }
.production-card p { margin:0; }
.production-progress i { animation:kinetic-flow 3s linear infinite; }
.compact-unit-page { padding-top:0; }
.active-unit-list { gap:9px; margin-top:16px; }
.active-unit-row { gap:14px; padding:11px 12px; }
.active-unit-row small { margin-top:4px; }
.unit-quick-actions { gap:8px; }
.unit-quick-actions form { gap:8px; }
.unit-quick-actions input[type="url"] { padding:8px 10px; }
.locked-unit { padding:7px 10px; }
.inline-creator form, .inline-vendor-form { gap:10px; }
.gantt-scroll { padding-bottom:9px; }
.gantt-header > span { padding:12px; }
.gantt-days b { gap:3px; }
.gantt-label { gap:11px; padding:10px 12px; }
.gantt-label small { margin-top:3px; }
.dashboard-section { gap:16px; margin-bottom:28px; }
.section-band { gap:13px; }
.today-dashboard-grid { gap:18px; }
.category-kpi-grid { gap:12px; }
.category-kpi-grid article, .lifetime-category-list article { gap:7px; padding:17px; }
.kpi-hub-grid { gap:18px; }
.kpi-hub-grid > a { gap:7px 18px; transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.sub-tabs { gap:8px; margin:-7px 0 20px; }
.sub-tabs a { padding:10px 15px; }
.filter-bar { gap:10px; margin-bottom:18px; padding:15px; }
.content-table input, .content-table select { padding:8px 10px; }
.finance-detail { margin-top:20px; }
.calculated-kpi-grid { gap:10px; margin-top:15px; }
.calculated-kpi-grid article { gap:7px; padding:14px; padding-left:20px; }
.inline-vendor-form { margin-top:18px; padding-top:18px; }
.api-key-grid, .api-provider-list, .session-device-list { gap:11px; }
.api-provider-card, .session-device-card { gap:12px; padding:15px; }
.api-provider-card > div, .session-device-card > div { gap:3px; }
.url-preview-popover { padding:11px 13px; }
.home-dashboard-v2 { gap:20px; }
.home-quote { padding:30px 34px; }
.home-quote p { margin:0 0 18px; }
.unit-drive-link { margin-top:5px; }
.settings-addon-wrap { padding-top:0; }
.beta02-settings { margin-top:0; }
.profile-upload-form { gap:13px; }
.profile-upload-form input[type="file"] { padding:10px; }
.record-safety-wrap, .finance-control-v4, .campaign-safety-v4 { padding-top:0; }
.destructive-strip { gap:12px; margin-top:18px; padding:20px; }
.panel-head > div:first-child { padding-left:1px; }
.kpi-control-v4 .kpi-toolbelt { margin-top:34px; }
.funnel-detail-page { gap:30px; }
.funnel-detail-page .detail-identity.panel { margin:0; padding:12px 4px 22px 22px; }
.funnel-detail-page .detail-control-grid, .funnel-detail-page .funnel-step-layout { gap:28px; margin:0; }
.funnel-detail-page .funnel-step-list { padding:28px; }
.funnel-detail-page .funnel-step-layout > .premium-form-panel { padding:28px; }
.beta05-quality-gate { padding:28px; }
.quality-check-grid { gap:10px; margin-bottom:18px; }
.quality-check-grid input { opacity:0; }
.quality-check-grid span { gap:11px; padding:12px 14px; }
.quality-settings-grid { gap:20px; }
.quality-area-manager { padding:20px; }
.quality-area-manager > header { margin-bottom:18px; padding-left:20px; }
.quality-area-manager > header h3 { margin:5px 0 0; }
.quality-template-card { gap:13px; margin-top:16px; padding:16px; }
.quality-template-card > div { gap:10px; }
.quality-setting-item { gap:10px; }
.settings-section-heading { column-gap:18px; }
.work-component-panel { padding:28px; }
.work-component-groups { margin-top:22px; }
.work-component-group > header > div { gap:4px; }
.work-component-group > header h3 { margin:0; }
.component-row { gap:13px; margin:0; }
.component-row > span:nth-child(2) { gap:4px; }
.bulk-list-head { gap:14px; margin:0 0 12px; padding:10px 12px; border:1px solid var(--hair); border-radius:13px; background:color-mix(in srgb,var(--area-color,var(--creative)) 4%,var(--sunk)); }
.bulk-list-head>small { font-family:var(--mono); color:var(--ink-3); }
.bulk-list-head>small b { color:var(--area-color,var(--creative)); }
.bulk-master-select, .bulk-record-select { gap:9px; }
.bulk-master-select input, .bulk-record-select input { opacity:0; }
.bulk-master-select span, .bulk-record-select span { border:1px solid var(--channel); border-radius:9px; background:var(--sunk); color:transparent; font-size:.86rem; font-weight:900; transition:border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease; }
.bulk-master-select input:focus-visible+span, .bulk-record-select input:focus-visible+span { outline:2px solid var(--blue); outline-offset:2px; }
.bulk-master-select input:checked+span, .bulk-record-select input:checked+span { border-color:var(--area-color,var(--creative)); background:color-mix(in srgb,var(--area-color,var(--creative)) 22%,var(--sunk)); color:var(--ink); box-shadow:0 0 18px -7px var(--area-color,var(--creative)); }
.bulk-master-select input:indeterminate+span { border-color:var(--area-color,var(--creative)); color:transparent; }
.bulk-master-select input:indeterminate+span::after { content:''; border-radius:2px; background:var(--area-color,var(--creative)); }
.bulk-delete-modal { padding:20px; background:rgba(0,0,0,.72); backdrop-filter:blur(9px); }
.bulk-delete-dialog { gap:18px; padding:24px; border:1px solid color-mix(in srgb,var(--bad) 38%,var(--frame)); border-radius:20px; background:linear-gradient(180deg,var(--plate-raise),var(--plate-2)); box-shadow:inset 0 1px 0 var(--lip),0 30px 90px rgba(0,0,0,.7); }
.bulk-delete-dialog>header { gap:18px; }
.bulk-delete-dialog h2 { margin:4px 0 0; }
.bulk-delete-dialog h2 b { color:var(--bad); }
.bulk-delete-dialog>p { margin:0; color:var(--ink-2); line-height:1.55; }
.bulk-delete-dialog label { gap:8px; }
.modal-close { padding:0; border:1px solid var(--channel); border-radius:11px; background:var(--sunk); color:var(--ink-2); font-size:1.4rem; }
.bulk-dialog-actions { gap:10px; }
@media (max-width: 760px) {
.task-item { padding:12px 15px; }
.form-panel, .list-panel, .data-panel, .settings-panel, .funnel-panel, .chart-panel, .category-report { padding:17px; }
.funnel-flow { padding-bottom:8px; }
.table-scroll { margin:15px -17px -17px; }
.settings-section { gap:15px; }
}
@media (max-width: 760px) {
.page-wrap, .dashboard-wrap { padding:27px 15px 42px; }
.score-ring { padding:0; }
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
@media (min-width:1700px) {
.page-wrap, .dashboard-wrap { margin-inline:auto; }
}
@media (max-width:760px) {
.page-wrap, .dashboard-wrap { padding-right:max(15px,env(safe-area-inset-right)); padding-left:max(15px,env(safe-area-inset-left)); }
.funnel-flow { padding-bottom:10px; }
}
@media (min-width:2200px) {
.calculated-kpi-panel-v3 .calculated-kpi-grid article { padding:16px; }
}
@media (max-width:760px) {
.schedule-history > div:not(.panel-head) { gap:4px; }
}
@media (prefers-reduced-motion:reduce) {
.bar-stack i { transition:none; }
}
@media (min-width:2200px) {
.page-wrap, .dashboard-wrap { padding:52px clamp(58px,3.3vw,90px) 82px; }
.dashboard-wrap { gap:25px; }
.score-body { margin-top:30px; }
.task-item { padding:15px 17px; }
.report-grid { gap:25px; }
.form-panel, .list-panel, .data-panel, .settings-panel, .funnel-panel, .chart-panel, .category-report { padding:34px; }
.device-fields input, .device-fields select { padding:13px 15px; }
.button, .secondary-button { padding:12px 18px; }
.settings-section { gap:42px; }
.current-device-card { padding:20px; }
}
@media (min-width:2200px) {
.production-layout, .kpi-entry-layout, .finance-layout { gap:28px; }
.today-dashboard-grid { gap:25px; }
.category-kpi-grid { gap:16px; }
.category-kpi-grid article { padding:23px; }
.filter-bar { padding:20px; }
}
@media (max-width:760px) {
.page-wrap, .dashboard-wrap { padding-top:78px; }
.day-transition-banner { margin:74px 14px 0; padding:16px; }
}
@media (min-width:2200px) {
.home-dashboard-v2 { gap:27px; }
.home-quote { padding:34px; }
}
@media (max-width:760px) {
.home-dashboard-v2 { gap:15px; }
.home-welcome { padding-right:54px; }
.home-quote { padding:24px; }
}
@media (min-width:2200px) {
.funnel-detail-page, .beta05-detail-addons { gap:36px; }
}
@media (max-width:760px) {
.beta05-quality-gate { padding:20px; }
.funnel-detail-page { gap:20px; }
}
@media (orientation:portrait) and (min-width:761px) and (max-width:1200px) {
.page-wrap, .dashboard-wrap { padding-top:86px; padding-right:clamp(24px,4vw,44px); padding-left:clamp(24px,4vw,44px); }
.day-transition-banner { margin-top:84px; }
.home-dashboard-v2 { gap:18px; }
}
@media (max-width:760px) {
.panel-head { column-gap:12px; }
.work-component-panel { padding:19px; }
.bulk-delete-modal { padding:12px; }
.bulk-delete-dialog { padding:19px; }
}
.main-content { background:
radial-gradient(1200px 620px at 68% -12%, rgba(79, 168, 255, 0.045), transparent 62%),
radial-gradient(900px 520px at 4% 108%, rgba(233, 185, 107, 0.032), transparent 60%),
var(--void); }
.nav-item .dot { background: var(--blue); box-shadow: 0 0 10px -1px var(--blue); border-radius: 50%; }
.panel, .settings-section, .catalog-card, .challenge-card, .data-panel, .list-panel, .chart-panel, .quote-panel, .score-card, .gantt-panel, .funnel-panel, .auth-card, .quality-template-card, .session-device-card, .new-template-card, .data-action-card { border-radius: var(--r); background: var(--brush), linear-gradient(180deg, var(--plate-1), var(--plate-2)); border: 1px solid var(--frame); box-shadow: inset 0 1px 0 var(--lip), var(--shadow); color: var(--ink-2); }
.panel-head { border-bottom: 1px solid var(--hair); }
.panel-head .kicker { margin-bottom: 5px; }
.section-band, .dashboard-section > .kicker { color: var(--ink-3); }
.table-scroll, .gantt-scroll, .recovery-codes, .audit-log, .correction-list, .schedule-history, .rest-trace { border-radius: var(--r-in); background: var(--sunk); border: 1px solid var(--frame); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7); }
.form-help, .builder-note, .pace-note { color: var(--ink-3); font-size: 0.9rem; }
.batch-submit-dock button { border-radius: var(--r-s); border: 1px solid var(--frame); background: linear-gradient(180deg, var(--plate-raise), var(--plate-2)); box-shadow: inset 0 1px 0 var(--lip), 0 10px 22px -16px #000; color: var(--ink); font-family: inherit; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em; transition: border-color 0.14s ease, color 0.14s ease, transform 0.08s ease; }
.form-panel, .premium-form-panel, .mini-form, .inline-form, .inline-creator { border-radius: var(--r); }
.stage-chip, .status-pill, .count-pill, .category-chip, .unit-code, .quality-status, .theme-option span { border-radius: var(--r-s); background: var(--sunk); border: 1px solid var(--channel); color: var(--ink-2); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 9px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.count-pill, .unit-code { font-family: var(--mono); letter-spacing: 0.06em; text-transform: none; color: var(--ink-2); }
.status-pill.success, .quality-status.completed, .success-text, .positive { color: var(--ok); border-color: rgba(59, 201, 138, 0.38); }
.status-pill.warning { color: var(--warn); border-color: rgba(232, 163, 61, 0.38); }
.status-pill.danger, .negative, .locked-unit { color: var(--bad); border-color: rgba(239, 95, 101, 0.38); }
.filter-chips a, .platform-tabs a, .sub-tabs a, .mission-filters a, .filter-bar a, .challenge-history-tabs a, .prompt-chips button { border-radius: 100px; background: linear-gradient(180deg, var(--plate-raise), var(--plate-2)); border: 1px solid var(--frame); box-shadow: inset 0 1px 0 var(--lip); color: var(--ink-2); font-size: 0.9rem; font-weight: 700; }
.filter-chips a:hover, .platform-tabs a:hover, .sub-tabs a:hover, .mission-filters a:hover, .filter-bar a:hover { color: var(--ink); }
.filter-chips a.active, .platform-tabs a.active, .sub-tabs a.active, .mission-filters a.active, .filter-bar a.active, .challenge-history-tabs a.active { color: var(--ink); border-color: var(--blue-dim); box-shadow: inset 0 1px 0 var(--lip), 0 0 14px -6px var(--blue); }
.table-link { color: var(--blue); }
.score-ring strong, .score-body strong, .home-score strong, .challenge-score strong, .mini-metric-grid strong, .creative-hero-score, .detail-identity strong, .kpi-cards strong, .category-score strong, .mission-pulse-grid strong, .day-close-metrics strong { font-family: var(--mono); font-weight: 700; letter-spacing: -0.04em; background: linear-gradient(180deg, var(--steel-1) 0%, var(--steel-2) 46%, var(--steel-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.score-ring small, .home-score small, .detail-identity small, .challenge-score small { font-family: var(--sans); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }
.mini-stats, .mini-metric-grid, .mission-pulse-grid, .day-close-metrics, .kpi-cards, .challenge-stats, .home-support-grid { gap: 1px; background: var(--frame); border: 1px solid var(--frame); border-radius: var(--r); box-shadow: inset 0 1px 0 var(--lip), var(--shadow); }
.mini-stats > *, .mini-metric-grid > *, .mission-pulse-grid > *, .day-close-metrics > *, .kpi-cards > *, .challenge-stats > *, .home-support-grid > * { background: var(--brush), linear-gradient(180deg, var(--plate-1), var(--plate-2)); border-radius: 0; border: 0; }
.mini-stats > *::after, .mission-pulse-grid > *::after, .kpi-cards > *::after { content: ''; background: var(--rail, var(--blue)); box-shadow: 0 0 12px -2px var(--rail, var(--blue)); opacity: 0.85; }
.production-progress, .up-bar, .rp-bar, .component-progress, .bar-stack, .challenge-bars .bar-column { border-radius: 2px; background: var(--sunk); border: 1px solid var(--frame); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--hair-soft); }
.production-progress > *, .up-bar > *, .rp-bar > *, .component-progress > * { border-radius: 0; background: linear-gradient(90deg, var(--blue), var(--gold)); box-shadow: 0 0 14px -4px var(--gold); }
.rp-bar > * { background: linear-gradient(90deg, var(--gold), var(--blue)); }
.production-card, .catalog-card, .funnel-step-card, .active-unit-row, .unit-row, .component-row, .session-device-card, .quality-template-card, .theme-option, .version-grid > *, .challenge-list > *, .task-group, .data-action-card, .home-challenge { border-radius: var(--r-in); background: var(--brush), linear-gradient(180deg, var(--plate-1), var(--plate-2)); border: 1px solid var(--frame); box-shadow: inset 0 1px 0 var(--lip), 0 16px 32px -24px #000; color: var(--ink-2); }
.production-card::before, .active-unit-row::before, .unit-row::before, .funnel-step-card::before, .component-row::before, .home-challenge::before { content: ''; border-radius: 2px; background: var(--area-color, var(--blue)); box-shadow: 0 0 12px -1px var(--area-color, var(--blue)); }
.production-card:hover, .catalog-card:hover { border-color: var(--channel); }
.production-card h3, .catalog-card h3 { color: var(--ink); }
.production-card p, .catalog-card p { color: var(--ink-2); font-size: 0.9rem; }
.detail-cta { color: var(--blue); font-size: 0.86rem; font-weight: 700; }
.detail-identity { border-radius: var(--r); background: var(--brush), linear-gradient(180deg, var(--plate-1), var(--plate-2)); border: 1px solid var(--frame); box-shadow: inset 0 1px 0 var(--lip), var(--shadow-deep); }
.detail-identity h1 { font-size: 1.85rem; }
.gantt-header, .gantt-days { border-bottom: 1px solid var(--frame); background: var(--void-2); }
.gantt-days > * { color: var(--ink-3); font-size: 0.82rem; font-weight: 700; border-left: 1px solid var(--hair-soft); }
.gantt-days > *.active, .gantt-days > *.today { color: var(--blue); }
.gantt-row { border-bottom: 1px solid var(--hair-soft); }
.gantt-row:hover { background: rgba(255, 255, 255, 0.012); }
.gantt-label { border-right: 1px solid var(--hair); }
.gantt-label strong { color: var(--ink); font-size: 0.9rem; }
.gantt-label small { color: var(--ink-3); font-size: 0.82rem; }
.gantt-track { border-radius: var(--r-s); color: var(--ink-2); font-family: var(--mono); font-size: 0.82rem; }
.gantt-track::before { content: ''; border-radius: 2px; background: var(--area-color, var(--blue)); box-shadow: 0 0 10px -1px var(--area-color, var(--blue)); }
.gantt-resize-handle { background: var(--channel); border-radius: 2px; }
.gantt-resize-handle:hover { background: var(--blue); }
.settings-section-heading { border-bottom: 1px solid var(--hair); }
.settings-section-icon { border-radius: var(--r-in); background: linear-gradient(180deg, var(--plate-raise), var(--plate-2)); border: 1px solid var(--frame); box-shadow: inset 0 1px 0 var(--lip); color: var(--blue); }
.theme-grid { gap: 10px; }
.theme-option.active, .theme-option:has(input:checked) { border-color: var(--blue-dim); box-shadow: inset 0 1px 0 var(--lip), 0 0 18px -8px var(--blue); }
.theme-option strong { color: var(--ink); font-size: 0.9rem; }
.theme-option .theme-swatch { gap: 5px; padding: 6px; border: 1px solid color-mix(in srgb, var(--swatch-1) 28%, #28303a); border-radius: 10px; background: linear-gradient(125deg, color-mix(in srgb, var(--swatch-1) 15%, #090b0f), #090b0f 62%); }
.theme-option .theme-swatch i { padding: 0; border-radius: 6px; }
.theme-option .theme-swatch i:nth-child(1) { background: var(--swatch-1); }
.theme-option .theme-swatch i:nth-child(2) { background: var(--swatch-2); }
.theme-option .theme-swatch i:nth-child(3) { background: var(--swatch-3); }
.auth-body { padding: 24px; background:
radial-gradient(760px 460px at 50% -10%, rgba(79, 168, 255, 0.07), transparent 62%),
radial-gradient(620px 400px at 50% 110%, rgba(233, 185, 107, 0.05), transparent 60%),
var(--void); }
.auth-card { padding: 34px 32px 30px; }
.quote-panel blockquote, .home-quote { color: var(--ink); font-size: 1.05rem; line-height: 1.55; }
.quote-mark { color: var(--ink-4); }
.destructive-strip, .beta05-delete-zone, .record-safety-wrap, .trash-center { border-radius: var(--r-in); border: 1px solid rgba(239, 95, 101, 0.26); background: linear-gradient(180deg, rgba(239, 95, 101, 0.05), transparent); }
.drive-launch, .unit-drive-link { color: var(--gold); font-weight: 700; font-size: 0.86rem; }
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
.score-ring { border-radius: 50%; background:
conic-gradient(
from -90deg,
var(--blue) 0%,
var(--gold) calc(var(--score, 0) * 1%),
var(--sunk) calc(var(--score, 0) * 1%)
); box-shadow: 0 0 34px -14px var(--blue), inset 0 0 0 1px var(--frame); }
.score-ring::before { content: ''; border-radius: 50%; background: var(--brush), linear-gradient(180deg, var(--plate-1), var(--plate-2)); border: 1px solid var(--frame); box-shadow: inset 0 1px 0 var(--lip), inset 0 0 26px rgba(0, 0, 0, 0.75); }
.score-ring span { font-weight: 800; text-transform: uppercase; color: var(--ink-3); }
.score-breakdown > div { border-bottom: 1px solid var(--hair); }
.score-breakdown > div:last-child { border-bottom: 0; }
.score-breakdown > div { padding: 15px 0; }
.score-breakdown > div span { color: var(--ink-2); font-size: 0.96rem; line-height: 1.5; }
.score-breakdown > div strong { font-family: var(--mono); font-size: 1.22rem; color: var(--ink); letter-spacing: -0.025em; line-height: 1.3; }
.score-breakdown small { font-family: var(--sans); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; color: var(--ink-3); line-height: 1.6; }
.score-breakdown p { color: var(--ink-2); font-size: 0.9rem; line-height: 1.6; padding-top: 4px; }
.dot { border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px -1px var(--blue); margin-right: 7px; }
.dot.purple { background: var(--creative); box-shadow: 0 0 8px -1px var(--creative); }
.dot.cyan { background: var(--content); box-shadow: 0 0 8px -1px var(--content); }
.gantt-track { background: none; border: 0; box-shadow: none; padding: 7px 0; }
.gantt-track > span { padding: 6px 10px 6px 13px; margin: 0 3px; border-radius: var(--r-s); background: var(--brush), linear-gradient(180deg, #1B222C, #10161D); border: 1px solid var(--frame); box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.07),
0 0 0 1px color-mix(in srgb, var(--area-color, var(--blue)) 26%, transparent),
0 10px 20px -14px #000; }
.gantt-track > span::before { content: ''; border-radius: 2px; background: var(--area-color, var(--blue)); box-shadow: 0 0 10px -1px var(--area-color, var(--blue)); }
.gantt-track > span:hover { background: var(--brush), linear-gradient(180deg, #222B36, #151C24); border-color: var(--channel); }
.gantt-track em { gap: 1px; font-style: normal; line-height: 1.2; }
.gantt-track em b { font-family: var(--mono); font-size: 0.86rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.gantt-track em small { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-3); }
.gantt-label > i { background: var(--area-color, var(--blue)); box-shadow: 0 0 12px -2px var(--area-color, var(--blue)); border-radius: 2px; }
.gantt-label a { color: inherit; }
.gantt-label a:hover strong { color: var(--blue); }
.gantt-label > b { font-family: var(--mono); font-size: 0.86rem; font-weight: 700; color: var(--ink-2); letter-spacing: -0.02em; }
.gantt-days > * { font-family: var(--mono); }
.mission-filters a, .filter-bar a { text-decoration: none; }
.auth-card label small { margin-left: 6px; color: var(--ink-3); font-weight: 600; }
.panel, .settings-section, .data-panel, .list-panel, .chart-panel, .quote-panel, .score-card, .challenge-card, .funnel-panel, .gantt-panel, .catalog-card, .production-card { padding: clamp(18px, 1.5vw, 26px); }
.panel-head { padding-bottom: 15px; margin-bottom: 18px; }
.panel > .panel-head:first-child { padding-top: 0; }
.panel.gantt-panel, .panel:has(> .table-scroll), .panel:has(> .steps) { padding-bottom: clamp(14px, 1.2vw, 20px); }
.table-scroll, .gantt-scroll { padding: 0; }
.settings-section { padding: clamp(20px, 1.6vw, 28px); }
.form-grid, .form-stack { gap: 16px; }
.form-grid > label, .form-stack > label { gap: 7px; }
.stage-chip, .status-pill, .category-chip, .quality-status { font-size: 0.82rem; padding: 5px 10px; }
.count-pill, .unit-code { font-size: 0.82rem; padding: 5px 10px; }
.mini-stats > * small, .kpi-cards > * small, .mission-pulse-grid > * small, .n-tile small, .score-ring span { font-size: 0.78rem; letter-spacing: 0.16em; line-height: 1.7; }
.mini-stats > *, .mini-metric-grid > *, .mission-pulse-grid > *, .day-close-metrics > *, .kpi-cards > *, .challenge-stats > *, .home-support-grid > * { padding: 16px 18px; }
.welcome-row .home-profile-photo, .welcome-row .profile-photo, .home-welcome .profile-photo { border-radius: 50%; border: 1px solid var(--frame); box-shadow: inset 0 1px 0 var(--lip), 0 0 0 1px var(--channel), 0 14px 28px -18px #000; }
@media (max-width: 760px) {
.welcome-row .home-profile-photo, .welcome-row .profile-photo, .home-welcome .profile-photo { font-size: 1.15rem; }
}
.challenge-bars i b { border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, var(--blue), var(--gold)); box-shadow: 0 0 12px -3px var(--gold); }
.bar-stack { background: var(--sunk); border: 1px solid var(--frame); border-radius: 3px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); }
.bar-stack i:first-child { background: var(--gold); }
.bar-stack i:last-child { background: var(--blue); }
.bar-column span { color: var(--ink-3); font-family: var(--mono); font-size: 0.82rem; }
.panel-head h2, .settings-section-heading h2 { font-size: 1.02rem; font-weight: 800; letter-spacing: 0.075em; text-transform: uppercase; color: var(--ink); line-height: 1.35; }
.panel-head h2 { margin: 0; }
.panel-meta { margin: 5px 0 0; font-family: var(--mono); font-size: 0.9rem; font-weight: 700; color: var(--ink-2); letter-spacing: -0.01em; line-height: 1.45; }
.settings-section-heading .panel-meta { margin-bottom: 4px; }
.auth-logo { margin: 0 auto 22px; border-radius: 22px; border: 1px solid var(--frame); box-shadow: inset 0 1px 0 var(--lip), 0 22px 44px -22px #000; }
.auth-card h1 { font-size: 1.5rem; letter-spacing: -0.015em; margin-bottom: 24px; }
.auth-card .form-stack { gap: 16px; }
.auth-card .primary-button { padding: 13px; margin-top: 4px; }
.profile-photo, .home-profile-photo, .settings-profile-photo { border-radius: 50%; background: linear-gradient(180deg, var(--plate-raise), var(--plate-2)); border: 1px solid var(--frame); box-shadow: inset 0 1px 0 var(--lip), 0 0 0 1px var(--channel); color: var(--ink-2); font-weight: 800; letter-spacing: 0.06em; }
.profile-photo img, .home-profile-photo img, .settings-profile-photo img { border-radius: 50%; }
.score-body { gap: 20px; }
@media (min-width: 1240px) {
.score-body { gap: 26px; }
}
.score-breakdown > div { gap: 16px; }
.home-welcome { gap: clamp(18px, 1.6vw, 28px); }
.home-profile-photo { font-size: 1.2rem; }
.settings-profile-photo { font-size: 1.4rem; }
.settings-category-grid { gap: 16px; }
.settings-category-card { gap: 8px; padding: 26px 24px 22px; border-radius: var(--r); background: var(--brush), linear-gradient(180deg, var(--plate-1), var(--plate-2)); border: 1px solid var(--frame); box-shadow: inset 0 1px 0 var(--lip), var(--shadow); color: var(--ink-2); }
.settings-category-card::before { content: ''; border-radius: 2px; background: var(--blue); box-shadow: 0 0 12px -1px var(--blue); }
.settings-category-card:hover { border-color: var(--channel); }
.settings-category-card:hover .detail-cta { color: var(--ink); }
.settings-category-icon { border-radius: var(--r-in); background: linear-gradient(180deg, var(--plate-raise), var(--plate-2)); border: 1px solid var(--frame); box-shadow: inset 0 1px 0 var(--lip); color: var(--blue); font-size: 1.1rem; margin-bottom: 4px; }
.settings-category-card h2 { font-size: 1.06rem; font-weight: 800; letter-spacing: -0.005em; text-transform: none; color: var(--ink); }
.settings-category-card p { font-size: 0.9rem; line-height: 1.55; margin: 0; }
.settings-category-card .detail-cta { margin-top: auto; padding-top: 8px; }
.settings-category-head { padding-bottom: 0; }
.settings-category-head .back-link { margin-bottom: 8px; }
.settings-page .settings-panel { gap: 0; }
.settings-page .settings-panel > form + form, .settings-page .settings-panel > form + .settings-section, .settings-page .settings-panel > .settings-section + form, .settings-page .settings-panel > .settings-section + .settings-section { border-top: 1px solid var(--hair); margin-top: 22px; padding-top: 22px; }
.settings-page .settings-panel > form > .primary-button, .settings-page .settings-panel > form > button { margin-top: 16px; }
.brand-icon-form { gap: 16px; }
.brand-icon-preview { gap: 18px; }
.brand-icon-preview img { border-radius: 22px; border: 1px solid var(--frame); box-shadow: inset 0 1px 0 var(--lip), 0 16px 32px -20px #000; }
.brand-icon-preview strong { color: var(--ink); font-size: 0.96rem; margin-bottom: 4px; }
.brand-icon-preview small { line-height: 1.55; }
.brand-icon-reset { margin-top: 14px; }
.work-block-list { gap: 16px; }
.work-block { margin: 0; padding: 18px 20px 20px; border-radius: var(--r-in); background: var(--brush), linear-gradient(180deg, var(--plate-1), var(--plate-2)); border: 1px solid var(--frame); box-shadow: inset 0 1px 0 var(--lip), 0 14px 28px -22px #000; }
.work-block::before { content: ''; border-radius: 2px; background: var(--blue); box-shadow: 0 0 12px -1px var(--blue); }
.work-block-head { gap: 16px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--hair); }
.work-block-head > label { gap: 7px; }
.work-block-head .work-block-remove { margin-left: auto; }
.work-code-field { border-radius: var(--r-s); border: 1px solid var(--frame); background: var(--sunk); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--channel); }
.work-code-field b { padding: 0 12px; background: linear-gradient(180deg, var(--plate-raise), var(--plate-2)); border-right: 1px solid var(--frame); color: var(--gold); font-family: var(--mono); font-weight: 700; font-size: 0.96rem; }
.work-code-field input { border: 0; box-shadow: none; background: transparent; font-family: var(--mono); font-size: 1.04rem; font-weight: 700; color: var(--ink); }
.work-code-field input:focus { box-shadow: none; outline: none; }
.work-code-field:focus-within { box-shadow: inset 0 1px 3px rgba(0,0,0,.65), 0 0 0 1px var(--blue), 0 0 16px -6px var(--blue); }
.work-code-field.code-clash { box-shadow: inset 0 1px 3px rgba(0,0,0,.65), 0 0 0 1px var(--bad); }
label.optional-prior-stage { opacity: 0.55; }
label.optional-prior-stage input { border-style: dashed; }
.work-block-actions { margin-top: 16px; }
.detailed-duplicate-control { gap:12px; margin-top:16px; padding:15px 16px; border:1px solid color-mix(in srgb,var(--area-color,var(--blue)) 34%,var(--border)); border-radius:16px; background:color-mix(in srgb,var(--area-color,var(--blue)) 7%,var(--panel-2)); }
.detailed-duplicate-control>div { gap:4px; }
.detailed-duplicate-control>div small { color:var(--muted); }
.detailed-duplicate-control label { gap:8px; margin:0; }
.detailed-duplicate-control label b { border-radius:11px; background:color-mix(in srgb,var(--area-color,var(--blue)) 18%,var(--panel)); color:var(--area-color,var(--cyan)); }
.creative-works-list { gap: 10px; }
.creative-work-row { gap: 18px; padding: 14px 18px 14px 20px; border-radius: var(--r-in); background: var(--brush), linear-gradient(180deg, var(--plate-1), var(--plate-2)); border: 1px solid var(--frame); box-shadow: inset 0 1px 0 var(--lip), 0 12px 24px -20px #000; }
.creative-work-row::before { content: ''; border-radius: 2px; background: var(--area-color, var(--creative)); box-shadow: 0 0 12px -1px var(--area-color, var(--creative)); }
.creative-work-row:hover { border-color: var(--channel); }
.creative-work-row.is-late { border-color: color-mix(in srgb, var(--bad) 42%, var(--frame)); background: var(--brush), linear-gradient(180deg, color-mix(in srgb, var(--bad) 7%, var(--plate-1)), var(--plate-2)); }
.creative-work-row.is-late::before { background: var(--bad); box-shadow: 0 0 14px -1px var(--bad); }
.creative-work-row.is-late .creative-work-next small { color: var(--bad); font-weight: 800; }
.creative-work-row.is-settled { opacity: .72; }
.creative-work-row.is-settled::before { background: var(--ok); box-shadow: 0 0 12px -1px var(--ok); }
.creative-work-id { gap: 7px; }
.creative-work-id .unit-code { font-family: var(--mono); font-size: 0.96rem; font-weight: 700; color: var(--gold); background: var(--sunk); border: 1px solid var(--channel); border-radius: var(--r-s); padding: 4px 10px; }
.creative-work-main { gap: 5px; }
.creative-work-main strong { color: var(--ink); font-size: 1.04rem; }
.creative-work-main a:hover strong { color: var(--blue); }
.creative-work-main small { color: var(--ink-3); font-size: 0.86rem; }
.creative-work-main .production-progress { margin-top: 4px; }
.creative-work-next { gap: 4px; }
.creative-work-next .next-label { font-family: var(--fd, inherit); font-size: 0.86rem; font-weight: 700; color: var(--ink-2); }
.creative-work-next .next-label.done { color: var(--ok); }
.creative-work-next small { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-3); }
.creative-work-row .unit-quick-actions { gap: 8px; }
.creative-work-row .unit-quick-actions form { margin: 0; }
.detail-page { gap: 30px; }
.zone-grid { gap: 16px; }
.zone-body .zone-card, .zone-body > .panel:not(.detail-identity) { border-radius: var(--r-in); padding: 18px 20px; background: var(--brush), linear-gradient(180deg, var(--plate-1), var(--plate-2)); border: 1px solid var(--frame); box-shadow: inset 0 1px 0 var(--lip); color: var(--ink-2); }
.zone-body > .panel:not(.detail-identity)::before { opacity: 0; }
.zone-body > .panel:not(.detail-identity) > .panel-head { border-bottom: 1px solid var(--hair); }
.card-head { gap: 12px; padding-bottom: 11px; margin-bottom: 14px; border-bottom: 1px solid var(--hair); }
.card-head h3 { font-size: 0.96rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); }
.card-head a { font-size: 0.86rem; font-weight: 700; color: var(--blue); }
.zone-card > h3 { font-size: 0.96rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.identity-score { gap: 3px; }
.identity-score > span { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--zone-tone, var(--blue)); }
.identity-score strong { font-size: 1.75rem; line-height: 1.1; }
.detail-identity .identity-score small { font-family: var(--mono); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--ink-2); -webkit-text-fill-color: var(--ink-2); }
.zone-card.creative-meta-editor > summary { gap: 10px; font-size: 0.96rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); }
.zone-card.creative-meta-editor > summary::before { content: '+'; color: var(--blue); font-family: var(--mono); }
.zone-card.creative-meta-editor[open] > summary::before { content: '−'; }
.zone-card.creative-meta-editor > summary span { font-size: 0.86rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.zone-card.creative-meta-editor[open] > summary { margin-bottom: 14px; padding-bottom: 11px; border-bottom: 1px solid var(--hair); }
.safety-pair { gap: 14px; }
.safety-card { border-radius: var(--r-in); border: 1px solid var(--frame); padding: 16px 18px; background: var(--brush), linear-gradient(180deg, var(--plate-1), var(--plate-2)); box-shadow: inset 0 1px 0 var(--lip); }
.safety-card h3 { font-size: 0.96rem; font-weight: 700; color: var(--ink); }
.safety-card p { margin: 7px 0 13px; font-size: 0.86rem; line-height: 1.5; color: var(--ink-3); }
.safety-card form { gap: 8px; }
.safety-card--delete { border-color: color-mix(in srgb, var(--bad) 42%, var(--frame)); background: linear-gradient(180deg, color-mix(in srgb, var(--bad) 8%, var(--plate-1)), var(--plate-2)); }
.safety-card--delete h3 { color: var(--bad); }
.detail-identity.panel { gap: 24px; padding: 22px 26px; }
.detail-identity .back-link { margin-bottom: 8px; font-size: 0.86rem; color: var(--ink-3); }
.detail-identity .kicker { margin-bottom: 6px; }
.detail-identity p { margin-top: 6px; font-size: 0.9rem; }
.component-row > span:not(.component-check) { gap: 3px; }
.component-row > span:not(.component-check) > b { color: var(--ink); font-size: 0.9rem; }
.component-row > span:not(.component-check) > small { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-3); }
.component-row + .component-row { border-top: 1px solid var(--hair-soft); }
.component-check { border-radius: 50%; font-family: var(--mono); font-size: 0.86rem; color: var(--ink-3); border: 1px solid var(--channel); background: var(--sunk); }
.component-row.completed .component-check { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--channel)); }
.creative-stage-row + .creative-stage-row { border-top: 1px solid var(--hair-soft); }
.creative-stage-row > i { border-radius: 50%; font-family: var(--mono); font-size: 0.86rem; font-style: normal; color: var(--ink-3); border: 1px solid var(--channel); background: var(--sunk); }
.creative-stage-row.completed > i { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--channel)); }
.creative-stage-row strong { color: var(--ink); font-size: 0.9rem; }
.creative-stage-row span { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-3); }
.creative-stage-row b { font-family: var(--mono); font-size: 0.9rem; color: var(--ink); }
.creative-stage-row small { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-4); }
.creative-checklist label { border-radius: var(--r-s); border: 1px solid var(--channel); background: var(--sunk); font-size: 0.9rem; color: var(--ink-2); }
.kpi-hub-grid > a { padding: 24px 26px; border-radius: var(--r); background: var(--brush), linear-gradient(180deg, var(--plate-1), var(--plate-2)); border: 1px solid var(--frame); box-shadow: inset 0 1px 0 var(--lip), var(--shadow); }
.kpi-hub-grid > a::after { content: ''; border-radius: var(--r-in); border: 1px solid color-mix(in srgb, var(--area-color) 22%, var(--channel)); }
.kpi-hub-grid > a::before { content: ''; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--area-color), transparent 88%); }
.kpi-hub-grid > a:hover { border-color: color-mix(in srgb, var(--area-color) 40%, var(--frame)); box-shadow: inset 0 1px 0 var(--lip), var(--shadow-deep); }
.kpi-hub-grid i { border-radius: var(--r-in); font-style: normal; font-size: 1.35rem; color: var(--area-color); border: 1px solid color-mix(in srgb, var(--area-color) 34%, var(--channel)); background: var(--sunk); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6); }
.kpi-hub-grid span { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--area-color); }
.kpi-hub-grid strong { font-size: 1.14rem; font-weight: 700; color: var(--ink); }
.kpi-hub-grid small { font-size: 0.9rem; color: var(--ink-3); }
.settings-category-card--data::before { background: var(--gold); box-shadow: 0 0 12px -1px var(--gold); }
.settings-category-card--data .settings-category-icon { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 34%, var(--channel)); }
.extra-page { gap: 22px; }
.extra-tag-group { margin-top: 18px; }
.extra-row { gap: 14px; padding: 12px 14px; border-radius: var(--r-in); border: 1px solid var(--frame); background: var(--brush), linear-gradient(180deg, var(--plate-1), var(--plate-2)); box-shadow: inset 0 1px 0 var(--lip); }
.extra-row + .extra-row { margin-top: 8px; }
.extra-row-size { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 8px; border-radius: var(--r-s); border: 1px solid color-mix(in srgb, var(--extra) 32%, var(--channel)); background: var(--sunk); }
.extra-row-main { gap: 4px; }
.extra-row-main strong { font-size: 0.96rem; color: var(--ink); }
.extra-row-main small { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-3); }
.extra-row-main .production-progress { margin-top: 3px; }
.funnel-step-card { gap: 8px 10px; padding: 12px 14px; border-radius: var(--r-in); border: 1px solid var(--frame); background: var(--brush), linear-gradient(180deg, var(--plate-1), var(--plate-2)); box-shadow: inset 0 1px 0 var(--lip); }
.funnel-step-card + .funnel-step-card { margin-top: 8px; }
.funnel-step-card.completed { border-color: color-mix(in srgb, var(--ok) 26%, var(--frame)); }
.funnel-step-card.in_progress { border-color: color-mix(in srgb, var(--blue) 26%, var(--frame)); }
.funnel-card-next { gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hair); }
.funnel-card-next .next-label { font-size: 0.86rem; font-weight: 700; color: var(--ink-2); }
.funnel-card-next .next-label.done { color: var(--ok); }
.funnel-card-next small { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-3); }
.funnel-template-panel { padding: 24px 26px; }
.funnel-template-form { margin-top: 16px; }
.funnel-template-list { gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.funnel-template-list > article { gap: 12px; padding: 10px 14px; border-radius: var(--r-in); border: 1px solid var(--frame); background: var(--sunk); }
.funnel-template-list strong { font-size: 0.9rem; color: var(--ink); }
.funnel-template-list small { font-size: 0.82rem; color: var(--ink-3); }
.funnel-save-template { margin-top: 18px; padding: 18px 20px; border-radius: var(--r-in); border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--frame)); background: var(--brush), linear-gradient(180deg, var(--plate-1), var(--plate-2)); box-shadow: inset 0 1px 0 var(--lip); }
.funnel-save-template h3 { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.funnel-save-template p { margin: 6px 0 13px; font-size: 0.86rem; color: var(--ink-3); }
.funnel-save-template-row { gap: 9px; }
.work-component-group { border-radius: var(--r-in); border: 1px solid var(--frame); box-shadow: inset 0 1px 0 var(--lip); }
.work-component-group + .work-component-group { margin-top: 16px; }
.work-component-group::before { content: ''; background: linear-gradient(180deg, var(--stage-tone), transparent 82%); }
.work-component-group > header { gap: 14px; padding: 15px 18px 13px 22px; border-bottom: 1px solid var(--hair); background: linear-gradient(180deg, color-mix(in srgb, var(--stage-tone) 9%, var(--plate-raise)), transparent); }
.work-component-group .stage-flag { margin-bottom: 5px; padding: 3px 10px; border-radius: 999px; font-family: var(--mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; border: 1px solid color-mix(in srgb, var(--stage-tone) 38%, var(--channel)); background: var(--sunk); }
.work-component-group > header h3 { font-size: 1.04rem; color: var(--ink); }
.work-component-group > header small { margin-top: 3px; font-family: var(--mono); color: var(--ink-3); }
.work-component-group > header strong { font-family: var(--mono); font-size: 1.06rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.work-component-group .component-check { color: var(--stage-tone); border-color: color-mix(in srgb, var(--stage-tone) 34%, var(--channel)); }
.work-component-group.complete { border-color: color-mix(in srgb, var(--ok) 24%, var(--frame)); }
.work-component-group.complete .component-check { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 38%, var(--channel)); }
.component-row > strong { font-family: var(--mono); }
.creative-archive-list { gap: 8px; padding: 16px 24px 22px; }
.creative-archive-list > article { gap: 12px; padding: 11px 14px; border-radius: var(--r-in); border: 1px solid var(--frame); background: var(--sunk); }
.creative-archive-list strong { color: var(--ink); font-size: 0.9rem; }
.creative-archive-list small { font-family: var(--mono); color: var(--ink-3); }
.kpi-inline-form { gap: 10px; margin-bottom: 16px; }
.kpi-basis-form { gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--hair); }
.session-list-head { gap: 16px; }
.session-device-card em { font-style: normal; }
@media (max-width: 760px) {
.detail-identity.panel { gap: 14px; padding: 18px 16px; }
.detail-identity h1 { font-size: 1.4rem; }
.zone-body .zone-card, .zone-body > .panel:not(.detail-identity) { padding: 15px 14px; }
.zone-card.creative-meta-editor > summary { gap: 6px; }
.work-component-group > header { gap: 8px; padding: 13px 14px 12px 18px; }
}
@media (max-width: 680px) {
.creative-work-row .unit-quick-actions { gap: 6px; }
}
.timer-body { gap: 20px; }
.timer-target { gap: 3px; }
.timer-stage { padding: 3px 10px; border-radius: 999px; font-family: var(--mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; color: var(--teal); border: 1px solid color-mix(in srgb, var(--teal) 38%, var(--channel)); background: var(--sunk); }
.timer-target strong { font-size: 1.04rem; color: var(--ink); }
.timer-target small { font-family: var(--mono); color: var(--ink-3); }
.timer-clock { gap: 2px; padding: 12px 22px; border-radius: var(--r-in); border: 1px solid var(--channel); background: var(--sunk); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.7); }
.timer-clock strong { font-family: var(--mono); font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, var(--steel-1), var(--steel-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.timer-clock small { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; color: var(--ink-4); }
.timer-card.running .timer-clock { border-color: color-mix(in srgb, var(--teal) 46%, var(--channel)); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.7), 0 0 22px -8px var(--teal); }
.timer-card.running .timer-clock small { color: var(--teal); }
.timer-card.running .timer-button { border-color: color-mix(in srgb, var(--warn) 50%, var(--frame)); }
.timer-meta { gap: 1px; margin-top: 16px; border-radius: var(--r-in); background: var(--frame); border: 1px solid var(--frame); }
.timer-meta > div { padding: 11px 14px; background: var(--plate-2); gap: 2px; }
.timer-meta span { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.timer-meta strong { font-family: var(--mono); font-size: 0.96rem; color: var(--ink); }
@keyframes nex-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.timer-active { font-family: var(--mono); font-size: 0.82rem; color: var(--teal); padding: 5px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--teal) 34%, var(--channel)); background: var(--sunk); }
@media (max-width: 760px) {
.timer-body { gap: 14px; }
}
.challenge-page { gap: 22px; }
.challenge-day-actions, .challenge-day-off-state { gap: 20px; padding: 18px 20px; border-left: 3px solid var(--gold); }
.challenge-day-actions-copy, .challenge-day-off-state > div { gap: 5px; }
.challenge-day-actions-copy strong, .challenge-day-off-state strong { font-size: 1rem; line-height: 1.35; color: var(--ink); }
.challenge-day-actions-copy small, .challenge-day-off-state small { font-size: 0.84rem; line-height: 1.55; color: var(--ink-3); }
.challenge-day-action-forms { gap: 10px; }
.challenge-day-action-forms form { margin: 0; }
.sick-day-form { gap: 8px; }
.sick-day-button { border-color: color-mix(in srgb, var(--bad) 48%, var(--channel)); color: color-mix(in srgb, var(--bad) 78%, var(--ink)); background: color-mix(in srgb, var(--bad) 7%, var(--plate-2)); }
.sick-day-button:hover { border-color: var(--bad); color: var(--ink); }
.challenge-day-off-state.is-sick { border-left-color: var(--bad); }
.challenge-day-off-state.is-sick .kicker, .sick-trace { color: var(--bad); }
.challenge-day-off-state.is-rest { border-left-color: var(--gold); }
.challenge-active-card { padding: 24px 26px; transition: transform 0.18s ease, border-color 0.18s ease; }
.challenge-active-card:hover { border-color: color-mix(in srgb, var(--gold) 34%, var(--frame)); }
.challenge-active-head { gap: 18px; margin-bottom: 14px; }
.challenge-active-head h2 { font-size: 1.5rem; color: var(--ink); margin-top: 4px; }
.challenge-active-score strong { font-family: var(--mono); font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; background: linear-gradient(180deg, var(--steel-1), var(--steel-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.challenge-active-score small { font-family: var(--mono); color: var(--ink-3); }
.challenge-active-foot { gap: 8px 22px; margin-top: 12px; font-family: var(--mono); font-size: 0.82rem; color: var(--ink-3); }
.challenge-active-foot .detail-cta { margin-left: auto; font-family: var(--sans); }
.challenge-past-link { gap: 16px; padding: 16px 24px; color: var(--ink-2); }
.challenge-planner { padding: 0; }
.challenge-planner > summary { gap: 12px; padding: 20px 26px; color: var(--ink); }
.challenge-planner > summary b { font-size: 1.04rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.challenge-planner .planner-icon { border-radius: var(--r-s); font-size: 1.1rem; color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--channel)); background: var(--sunk); }
.challenge-planner .planner-hint { margin-left: auto; font-size: 0.86rem; color: var(--ink-3); }
.challenge-planner[open] > summary { border-bottom: 1px solid var(--hair); }
.planner-body { padding: 20px 26px 26px; gap: 20px; }
.planner-groups { gap: 14px; }
.planner-group { border-radius: var(--r-in); border: 1px solid var(--frame); background: var(--sunk); }
.planner-group > header { padding: 11px 16px; border-bottom: 1px solid var(--hair); background: linear-gradient(180deg, var(--plate-raise), var(--plate-2)); }
.planner-group > header span { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.16em; color: var(--gold); }
.planner-row { gap: 12px; padding: 10px 16px; margin: 0; }
.planner-row + .planner-row { border-top: 1px solid var(--hair-soft); }
.planner-label b { font-size: 0.9rem; color: var(--ink); }
.planner-label small { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-3); }
.planner-result { gap: 14px; padding: 18px 20px; border-radius: var(--r-in); border: 1px solid color-mix(in srgb, var(--gold) 22%, var(--frame)); background:
linear-gradient(180deg, color-mix(in srgb, var(--gold) 6%, transparent), transparent 40%),
var(--brush), linear-gradient(180deg, var(--plate-1), var(--plate-2)); }
.planner-total { gap: 2px; }
.planner-total span { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.16em; color: var(--ink-3); }
.planner-total strong { font-family: var(--mono); font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; background: linear-gradient(180deg, var(--steel-1), var(--steel-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.planner-total small { font-family: var(--mono); color: var(--ink-3); }
.planner-scenarios { gap: 10px; }
.planner-scenario { gap: 3px; padding: 14px 16px; border-radius: var(--r-in); border: 1px solid var(--channel); background: var(--sunk); transition: border-color 0.18s ease, transform 0.18s ease; }
.planner-scenario:hover { border-color: var(--ink-4); }
.planner-scenario > span { font-size: 0.84rem; color: var(--ink-2); }
.planner-scenario strong { font-family: var(--mono); font-size: 1.24rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.planner-scenario small { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-4); }
.planner-scenario.active { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.planner-scenario.active > span { color: var(--gold); }
.planner-pick { margin: 0; }
.planner-create { margin-top: 4px; }
.challenge-bars { gap: 4px; margin-top: 18px; padding: 12px 10px 0; border-radius: var(--r-in); background: var(--sunk); border: 1px solid var(--frame); }
.challenge-bars > div { gap: 5px; }
.challenge-bars i { border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--blue), color-mix(in srgb, var(--blue) 30%, transparent)); }
.challenge-bars span { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-4); }
.challenge-area-list { gap: 10px; }
.challenge-area-list > div { gap: 12px; }
.challenge-area-list span { font-size: 0.88rem; color: var(--ink-2); }
.challenge-area-list b { font-family: var(--mono); font-size: 0.88rem; color: var(--ink); }
.challenge-area-list .production-progress i { background: var(--area-color); }
.challenge-detail-page .progress-track.zone-card { padding: 0; }
@media (max-width: 760px) {
.challenge-day-actions, .challenge-day-off-state { gap: 16px; padding: 17px 16px; }
.challenge-active-foot .detail-cta { margin-left: 0; }
}
.planner-group[data-group="Funnel"] .planner-row { border-top: 0; }
.planner-group[data-group="Funnel"] .planner-row:nth-child(n+2) { border-top: 1px solid var(--hair-soft); }
.challenge-bars span { writing-mode: horizontal-tb; }
.funnel-detail-page .identity-card { gap: 12px; }
.funnel-detail-page .identity-head { gap: 14px; }
.funnel-detail-page .identity-head h3 { font-size: 1.32rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.funnel-detail-page .identity-head p { color: var(--ink-3); font-size: 0.92rem; }
.funnel-detail-page .identity-figure { font-family: var(--mono); font-size: 1.55rem; line-height: 1.1; background: linear-gradient(180deg, var(--steel-1), var(--steel-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.funnel-detail-page .identity-figure small { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; color: var(--funnel); -webkit-text-fill-color: var(--funnel); }
.funnel-stage { border-radius: var(--r-in); border: 1px solid var(--frame); border-left: 3px solid var(--step-tone, var(--ink-4)); background: var(--brush), linear-gradient(180deg, var(--plate-1), var(--plate-2)); box-shadow: inset 0 1px 0 var(--lip); }
.funnel-stage--new { border-style: dashed; }
.funnel-stage > summary { gap: 12px; padding: 14px 18px; }
.funnel-stage > summary:hover { background: var(--sunk); }
.funnel-stage .step-no { font-family: var(--mono); font-size: 1rem; font-weight: 700; color: var(--step-tone, var(--ink-3)); }
.funnel-stage .step-name { gap: 2px; }
.funnel-stage .step-name strong { font-size: 0.98rem; font-weight: 700; color: var(--ink); }
.funnel-stage .step-name small { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-3); }
.funnel-stage .step-flag { gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--step-tone, var(--channel)); background: var(--sunk); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--step-tone, var(--ink-2)); }
.funnel-stage .step-flag small { font-family: var(--mono); font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.funnel-stage .step-marks { gap: 10px; }
.funnel-stage .step-late { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--danger); }
.funnel-stage[open] > summary { border-bottom: 1px solid var(--hair); }
.funnel-stage-body { gap: 16px; padding: 16px 18px 18px; }
.funnel-stage-body .step-form { padding-top: 4px; border-top: 1px solid var(--hair-soft); }
.funnel-stage-body .work-component-panel { margin: 0; }
.step-units { gap: 8px; }
.step-unit { gap: 12px; padding: 10px 14px; border-radius: var(--r-in); border: 1px solid var(--hair); background: var(--sunk); }
.step-unit.completed { opacity: 0.62; }
.step-unit strong { font-family: var(--mono); font-size: 0.9rem; color: var(--ink); }
.step-unit small { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-3); }
.step-unit-actions { gap: 8px; }
.step-unit-actions form { gap: 8px; }
.step-unit-note { font-size: 0.8rem; font-weight: 700; color: var(--gold); }
@media (max-width: 760px) {
.funnel-stage > summary { row-gap: 8px; padding: 12px 14px; }
.funnel-stage .step-no { line-height: 1.4; }
.funnel-stage .step-name small { line-height: 1.55; }
.funnel-stage-body { padding: 14px; }
}
.auth-card .auth-lead { margin: -10px 0 20px; color: var(--ink-2); font-size: 0.92rem; line-height: 1.55; }
.auth-card .otp-input { font-family: var(--mono); font-size: 1.5rem; letter-spacing: 0.32em; }
.auth-back { margin-top: 18px; font-size: 0.86rem; font-weight: 700; color: var(--ink-3); }
.auth-back:hover { color: var(--blue); }
.twofa-body { gap: 14px; }
.twofa-state { margin-top: 10px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--channel); background: var(--sunk); font-family: var(--mono); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; }
.twofa-state.on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--channel)); }
.twofa-state.off { color: var(--ink-3); }
.twofa-grid { gap: 14px; }
.twofa-grid form { gap: 9px; margin-top: 12px; }
.twofa-section .zone-card p { color: var(--ink-2); font-size: 0.9rem; line-height: 1.55; }
.twofa-setup h3 { margin-top: 6px; }
.twofa-setup h3 + p { margin-bottom: 14px; }
.twofa-setup-grid { gap: 20px; margin-bottom: 22px; }
.totp-qr-frame { padding: 10px; border-radius: var(--r-in); border: 1px solid var(--channel); background: #ffffff; line-height: 0; }
.totp-manual { gap: 8px; }
.totp-manual > span { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.totp-manual code { padding: 10px 12px; border-radius: var(--r-in); border: 1px solid var(--channel); background: var(--sunk); font-family: var(--mono); font-size: 1rem; letter-spacing: 0.12em; color: var(--gold); }
.totp-manual small { color: var(--ink-3); font-size: 0.82rem; line-height: 1.5; }
.twofa-confirm { gap: 10px; }
.twofa-confirm input { font-family: var(--mono); font-size: 1.1rem; letter-spacing: 0.2em; }
.recovery-codes-card { margin-bottom: 16px; padding: 18px 20px; border-radius: var(--r-in); border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--frame)); background: var(--brush), linear-gradient(180deg, var(--plate-1), var(--plate-2)); box-shadow: inset 0 1px 0 var(--lip); }
.recovery-codes-card p { margin-bottom: 14px; color: var(--ink-2); font-size: 0.9rem; line-height: 1.55; }
.recovery-code-grid { gap: 8px; margin-bottom: 16px; }
.recovery-code-grid code { padding: 9px 12px; border-radius: var(--r-in); border: 1px solid var(--channel); background: var(--sunk); font-family: var(--mono); font-size: 0.95rem; letter-spacing: 0.08em; color: var(--ink); }
.recovery-code-actions { gap: 10px; }
.zone-page { gap: 26px; }
.zone-body > .creative-works-board, .zone-body > .extra-board { padding: 0; border: 0; background: none; box-shadow: none; }
.zone-side-link { margin-bottom: 12px; }
.zone-side-link a { font-size: 0.86rem; font-weight: 700; color: var(--zone-tone, var(--blue)); }
@media (max-width: 760px) {
.zone-page { gap: 18px; }
}
.mission-view-bar { gap: 16px; margin-bottom: 18px; }
.mission-view-tabs { gap: 6px; }
.mission-view-tabs a { padding: 8px 15px; border-radius: 999px; border: 1px solid var(--hair); background: var(--sunk); font-size: 0.86rem; font-weight: 700; color: var(--ink-3); transition: color 0.14s ease, border-color 0.14s ease; }
.mission-view-tabs a:hover { color: var(--ink); }
.mission-view-tabs a.active { color: var(--ink); border-color: color-mix(in srgb, var(--blue) 40%, var(--channel)); background: linear-gradient(180deg, var(--plate-raise), var(--plate-2)); box-shadow: inset 0 1px 0 var(--lip); }
.mission-period { gap: 10px; }
.mission-period b { font-family: var(--mono); font-size: 0.9rem; letter-spacing: 0.04em; color: var(--ink); }
.period-step { border-radius: 50%; border: 1px solid var(--hair); background: var(--sunk); font-size: 1.1rem; color: var(--ink-2); }
.period-step:hover { color: var(--blue); border-color: var(--blue); }
.period-today { font-size: 0.82rem; font-weight: 700; color: var(--ink-3); }
.period-today:hover { color: var(--blue); }
.mission-list { gap: 18px; }
.mission-day { gap: 8px; }
.mission-day > header { gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--hair); }
.mission-day > header b { font-family: var(--mono); font-size: 0.94rem; color: var(--ink); }
.mission-day > header span { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); }
.mission-day > header em { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--blue); font-size: 0.7rem; font-style: normal; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.mission-day > header em.late { border-color: var(--bad); color: var(--bad); }
.mission-day > header small { margin-left: auto; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-3); }
.mission-day.is-today > header b { color: var(--blue); }
.mission-day.is-late > header b { color: var(--bad); }
.mission-list-row { gap: 14px; padding: 11px 15px; border-radius: var(--r-in); border: 1px solid var(--hair); background: var(--sunk); }
.mission-list-row > i { border-radius: 2px; background: var(--area-color, var(--blue)); }
.mission-list-row strong { font-size: 0.95rem; color: var(--ink); }
.mission-list-row small { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-3); }
.calendar-head { gap: 6px; margin-bottom: 6px; }
.calendar-head span { padding: 6px 0; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); }
.calendar-grid { gap: 6px; }
.calendar-day { gap: 4px; padding: 8px; border-radius: var(--r-in); border: 1px solid var(--hair); background: var(--sunk); }
.calendar-day.outside { opacity: 0.4; }
.calendar-day.is-today { border-color: var(--blue); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 30%, transparent); }
.calendar-day.is-late > header b { color: var(--bad); }
.calendar-day > header { gap: 6px; }
.calendar-day > header b { font-family: var(--mono); font-size: 0.86rem; color: var(--ink-2); }
.calendar-day.is-today > header b { color: var(--blue); }
.calendar-day > header small { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-4); }
.calendar-chip { gap: 6px; padding: 4px 6px; border-radius: 5px; background: color-mix(in srgb, var(--area-color, var(--blue)) 14%, var(--plate-2)); }
.calendar-chip i { border-radius: 2px; background: var(--area-color, var(--blue)); }
.calendar-chip span { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-2); }
.calendar-chip:hover span { color: var(--ink); }
.calendar-more { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-4); }
.mission-calendar--week { gap: 8px; }
.week-column { gap: 8px; padding: 10px; border-radius: var(--r-in); border: 1px solid var(--hair); background: var(--sunk); }
.week-column.is-today { border-color: var(--blue); }
.week-column > header { gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--hair); }
.week-column > header b { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.week-column.is-today > header b { color: var(--blue); }
.week-column.is-late > header span { color: var(--bad); }
.week-column > header span { font-family: var(--mono); font-size: 0.9rem; color: var(--ink); }
.week-column > header small { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-4); }
.week-body { gap: 8px; }
.week-card { gap: 5px; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--hair); border-left: 3px solid var(--area-color, var(--blue)); background: var(--plate-2); }
.week-card strong { font-size: 0.86rem; line-height: 1.35; color: var(--ink); }
.week-card small { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); }
.week-card .small-button { padding: 4px 9px; font-size: 0.74rem; }
@media (max-width: 760px) {
.mission-view-tabs a { padding: 7px 12px; font-size: 0.82rem; }
.calendar-day { padding: 6px; }
.calendar-chip span { font-size: 0.68rem; }
.calendar-head span { font-size: 0.66rem; letter-spacing: 0.06em; }
}
.home-dashboard-v2 .home-welcome { gap: clamp(16px, 1.6vw, 24px); padding: clamp(26px, 3vw, 46px) 20px clamp(20px, 2.4vw, 34px); }
.home-dashboard-v2 .home-welcome > div:first-of-type { gap: 8px; }
.home-dashboard-v2 .home-welcome .eyebrow { letter-spacing: 0.24em; }
.home-dashboard-v2 .home-welcome h1 { font-size: clamp(2.1rem, 3.4vw, 3.35rem); line-height: 1.08; letter-spacing: -0.025em; }
.home-dashboard-v2 .home-welcome .welcome-copy { font-size: clamp(1rem, 1.05vw, 1.18rem); color: var(--ink-2); }
.home-dashboard-v2 .home-profile-photo { border-radius: 25%; font-size: clamp(1.8rem, 2.2vw, 2.6rem); box-shadow:
inset 0 1px 0 var(--lip),
0 0 0 1px var(--channel),
0 0 0 7px color-mix(in srgb, var(--blue) 7%, transparent),
0 22px 46px -22px #000; }
.home-dashboard-v2 .home-profile-photo img { border-radius: 25%; }
.score-ring > div { padding: 0 6px; }
.score-ring strong { font-size: clamp(1.05rem, 1.35vw, 1.55rem); letter-spacing: -0.03em; }
@media (max-width: 760px) {
.home-dashboard-v2 .home-welcome { gap: 16px; padding: 18px 8px 10px; }
.home-dashboard-v2 .home-profile-photo { font-size: 1.9rem; }
.home-dashboard-v2 .home-welcome h1 { font-size: 1.85rem; }
.home-dashboard-v2 .home-welcome .welcome-copy { font-size: 0.98rem; }
}
.home-dashboard-v2 .panel-head h2 { font-size: clamp(1rem, 0.9vw, 1.16rem); }
.home-dashboard-v2 .score-breakdown > div > span { font-size: var(--home-body); }
.home-dashboard-v2 .score-breakdown > div > strong { font-size: var(--home-figure); }
.home-dashboard-v2 .score-breakdown > div > strong small { font-size: var(--home-label); }
.home-dashboard-v2 .score-breakdown > p { font-size: var(--home-body); line-height: 1.55; }
.home-dashboard-v2 .score-ring strong { font-size: clamp(1.2rem, 1.5vw, 1.75rem); }
.home-dashboard-v2 .score-ring span { font-size: var(--home-label); }
.home-dashboard-v2 .home-quote p { margin: 0; font-size: var(--home-body) !important; font-weight: 600; line-height: 1.62; letter-spacing: 0; color: var(--ink); }
@media (max-width: 760px) {
.home-dashboard-v2 { padding-top: calc(env(safe-area-inset-top, 0px) + 22px); }
.home-dashboard-v2 .home-welcome { padding-top: 6px; padding-bottom: 6px; }
}
.creative-stage-row > div:last-child { gap: 6px; }
@media (max-width: 760px) {
.creative-stage-row { row-gap: 10px; padding: 14px 0; }
.creative-stage-row > div:last-child { gap: 10px; }
}
.stage-times { gap: 8px; margin-top: 2px; }
.stage-times label { gap: 4px; }
.stage-times label > span { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); }
.stage-times input { padding: 5px 8px; font-family: var(--mono); }
.stage-times i { font-family: var(--mono); font-size: 0.74rem; font-style: normal; color: var(--ink-4); }
.unit-plan-actions { gap: 6px; }
.plan-chip { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--hair); background: var(--sunk); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-3); }
.plan-chip:hover { color: var(--blue); border-color: var(--blue); }
.calendar-chip > a { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-2); }
.calendar-chip:hover > a { color: var(--ink); }
.chip-plan-group { gap: 2px; }
.chip-plan { padding: 0 3px; border: 0; background: none; font-size: 0.8rem; line-height: 1; color: var(--ink-4); }
.chip-plan:hover { color: var(--blue); }
.worklib-group { border-radius: var(--r-in); border: 1px solid var(--frame); border-left: 3px solid var(--group-tone, var(--zone-tone, var(--blue))); background: var(--brush), linear-gradient(180deg, var(--plate-1), var(--plate-2)); box-shadow: inset 0 1px 0 var(--lip); }
.worklib-group + .worklib-group { margin-top: 10px; }
.worklib-group > summary { gap: 12px; padding: 13px 18px; }
.worklib-group > summary:hover { background: var(--sunk); }
.worklib-group[open] > summary { border-bottom: 1px solid var(--hair); }
.worklib-name { gap: 2px; }
.worklib-name strong { font-size: 0.86rem; font-weight: 800; letter-spacing: 0.1em; color: var(--ink); }
.worklib-name small { font-family: var(--mono); font-size: 0.76rem; color: var(--ink-3); }
.worklib-total { font-family: var(--mono); font-size: 0.86rem; color: var(--group-tone, var(--gold)); }
.worklib-body { gap: 8px; padding: 14px 18px 18px; }
.worklib-row { gap: 10px; padding: 9px 12px; border-radius: var(--r-in); border: 1px solid var(--hair); background: var(--sunk); }
.worklib-row--add { border-style: dashed; }
.worklib-row.muted { opacity: 0.55; }
.worklib-row .row-order { font-family: var(--mono); }
.worklib-row .row-up { font-family: var(--mono); }
.worklib-row .row-unit { font-family: var(--mono); font-size: 0.76rem; font-weight: 700; color: var(--gold); }
.worklib-row .small-button.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 34%, var(--channel)); }
.worklib-row--catalog .row-active { gap: 6px; font-size: 0.78rem; color: var(--ink-3); }
.worklib-row--catalog .row-code { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-4); }
@media (max-width: 900px) {
.worklib-row, .worklib-row--catalog { row-gap: 8px; }
}
.home-dashboard-v2 .home-quote > .panel-head { gap: 16px; }
.quote-source { font-size: var(--home-label); letter-spacing: 0.18em; color: var(--ink-4); }
.home-quote[data-quote-kind='quran'] .quote-source { color: color-mix(in srgb, var(--gold) 72%, var(--ink-4)); }
.home-dashboard-v2 .home-quote { padding: clamp(24px, 2.2vw, 34px) clamp(28px, 3vw, 48px) clamp(28px, 2.6vw, 40px); }
.home-dashboard-v2 .home-quote .quote-body { gap: 14px; }
.home-dashboard-v2 .home-quote p.quote-text { font-size: var(--quote-size) !important; font-weight: 600; line-height: 1.5; letter-spacing: -0.01em; color: var(--ink); }
.quote-arabic { margin: 0; font-family: 'Noto Naskh Arabic', 'Amiri', 'Traditional Arabic', 'Geeza Pro',
'Segoe UI', serif; font-size: calc(var(--quote-size, 1.3rem) * 1.18); line-height: 2; font-weight: 500; color: color-mix(in srgb, var(--gold) 82%, var(--ink)); }
.home-dashboard-v2 .home-quote p.quote-arabic { font-size: calc(var(--quote-size) * 1.18) !important; color: color-mix(in srgb, var(--gold) 82%, var(--ink)); }
.quote-ref { font-size: var(--home-label); letter-spacing: 0.1em; color: var(--ink-4); }
.home-dashboard-v2 .home-quote .quote-mark { margin-bottom: -4px; font-size: 58px; line-height: 1; color: color-mix(in srgb, var(--gold) 22%, transparent); }
@media (max-width: 980px) {
.home-dashboard-v2 .home-quote > .panel-head { gap: 6px; }
}
.quote-pool { gap: 10px; }
.quote-row { gap: 14px; padding: 12px 14px; border: 1px solid var(--channel); border-radius: 14px; background: var(--sunk); }
.quote-row.is-off { opacity: 0.42; }
.quote-row-body { gap: 5px; }
.quote-row-tr { margin: 0; color: var(--ink-2); line-height: 1.5; }
.quote-row-ar { margin: 0; font-size: 1.16rem; line-height: 1.9; color: color-mix(in srgb, var(--gold) 78%, var(--ink)); }
.quote-row-ref { font-size: 0.82rem; letter-spacing: 0.08em; color: var(--ink-4); }
.quote-row-actions { gap: 8px; }
.quote-add-form { gap: 10px; margin-top: 14px; }
.stage-ledger { padding: 26px; }
.timer-card + .stage-ledger { margin-top: 16px; }
.stage-ledger .creative-stage-row:last-of-type { border-bottom: 0; }
@media (max-width: 760px) {
.stage-ledger { padding: 18px; }
}
.prod-session-row { gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--hair-soft); }
.prod-session-row:last-child { border-bottom: 0; }
.prod-session-row > div { gap: 3px; }
.prod-session-row strong { color: var(--ink); font-size: 0.92rem; }
.prod-session-row small { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-4); }
.prod-session-row > b { font-family: var(--mono); font-size: 0.95rem; color: var(--ink); }
.prod-clock { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-3); }
.prod-score { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-4); }
.prod-session-row.is-current { background: color-mix(in srgb, var(--blue) 7%, transparent); }
.prod-sessions, .prod-start, .prod-done, .prod-archive, .prod-trend, .prod-volume, .prod-records { padding: 24px; }
.prod-delete { margin-top: 18px; }
@media (max-width: 760px) {
.prod-session-row { row-gap: 6px; }
.prod-sessions, .prod-start, .prod-done, .prod-archive, .prod-trend, .prod-volume, .prod-records { padding: 18px; }
}
.quality-manager-unified { padding: clamp(18px, 2vw, 28px); }
.quality-manager-unified > .form-note { margin: 0 0 18px; line-height: 1.55; }
.quality-area-manager { border: 1px solid color-mix(in srgb, var(--quality-tone) 27%, var(--frame)); border-radius: var(--r); background:
linear-gradient(145deg, color-mix(in srgb, var(--quality-tone) 6%, var(--plate-1)), var(--plate-2)); box-shadow: inset 0 1px 0 var(--lip), 0 20px 42px -32px #000; }
.quality-area-manager::before { content: ''; background: linear-gradient(90deg, var(--quality-tone), transparent 72%); box-shadow: 0 0 18px -4px var(--quality-tone); }
.quality-area-manager > header { border-left: 3px solid var(--quality-tone); }
.quality-area-manager > header span, .quality-template-head > div > span { color: var(--quality-tone); font-family: var(--mono); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.13em; }
.quality-area-manager > header h3 { color: var(--ink); font-size: clamp(1.08rem, 1.4vw, 1.35rem); }
.quality-template-create, .quality-item-add { gap: 10px; }
.quality-template-create { margin-top: 18px; }
.quality-template-card { border-color: color-mix(in srgb, var(--quality-tone) 19%, var(--frame)); background:
var(--brush),
linear-gradient(180deg, color-mix(in srgb, var(--quality-tone) 4%, var(--plate-1)), var(--plate-2)); }
.quality-template-head { padding-bottom: 12px; border-bottom: 1px solid var(--channel); }
.quality-template-head > div { gap: 4px; }
.quality-template-head strong { color: var(--ink); font-size: 1rem; }
.quality-template-head > span { color: var(--ink-4); font-size: 0.78rem; }
.quality-item-list { gap: 8px; }
.quality-setting-item { padding: 9px 10px 9px 14px; border: 1px solid var(--channel); border-left: 2px solid color-mix(in srgb, var(--quality-tone) 68%, var(--channel)); border-radius: var(--r-s); background: var(--sunk); }
.quality-setting-item span { color: var(--ink-2); font-size: 0.9rem; line-height: 1.4; }
.quality-setting-item.muted { opacity: 0.62; }
@media (max-width: 760px) {
.quality-manager-unified { padding: 15px; }
.quality-area-manager { padding: 16px; }
}
.component-group-add { gap: 12px; margin: 18px 0; padding: 16px; border-color: color-mix(in srgb, var(--blue) 28%, var(--frame)); }
.component-group-add label { gap: 7px; }
.component-group-tools { gap: 8px; padding: 10px; border: 1px solid color-mix(in srgb, var(--group-tone, var(--blue)) 22%, var(--hair)); border-radius: var(--r-in); background: color-mix(in srgb, var(--group-tone, var(--blue)) 4%, var(--sunk)); }
.component-group-tools .small-button[title] { padding-inline: 10px; }
.worklib-row .row-placement { padding-inline: 5px; font-size: 0.74rem; }
.worklib-row--catalog .row-component { border-color: color-mix(in srgb, var(--group-tone, var(--blue)) 30%, var(--channel)); }
.worklib-row--catalog-add { gap: 10px; padding: 11px 12px; border: 1px dashed color-mix(in srgb, var(--group-tone, var(--blue)) 44%, var(--channel)); border-radius: var(--r-in); background: color-mix(in srgb, var(--group-tone, var(--blue)) 3%, var(--sunk)); }
.settings-category-head + .settings-work-page { padding-top: 20px; }
.settings-work-stack { gap: 16px; }
.settings-work-stack > .detail-zone { margin: 0; }
.settings-work-stack > .detail-zone[open] { margin-bottom: 4px; }
@media (max-width: 760px) {
.settings-category-head + .settings-work-page { padding-top: 14px; }
.settings-work-stack { gap: 12px; }
}
.quality-manager-v24 .quality-template-card { gap: 12px; }
.quality-copy-form { gap: 10px; padding: 11px; border: 1px dashed color-mix(in srgb, var(--quality-tone) 30%, var(--channel)); border-radius: var(--r-in); background: color-mix(in srgb, var(--quality-tone) 4%, var(--sunk)); }
.quality-copy-form label { gap: 6px; }
.quality-copy-form label > span { color: var(--ink-3); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.quality-manager-v24 .quality-setting-item { gap: 10px; }
.detail-zone--monitor { padding-bottom: 22px; background:
linear-gradient(135deg, color-mix(in srgb, var(--zone-tone) 7%, transparent), transparent 42%),
color-mix(in srgb, var(--plate-1) 58%, var(--sunk)); }
.detail-zone--monitor:not([open]) { padding-bottom: 22px; }
.detail-zone--monitor:not([open]) > .zone-head { border-bottom: 1px solid var(--frame); }
.detail-zone--monitor > .zone-head:hover .zone-title { color: var(--zone-tone); }
.zone-monitor-label { color: color-mix(in srgb, var(--zone-tone) 76%, var(--ink)); font-family: var(--mono); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; }
.challenge-active-link { color: inherit; }
.challenge-cancel-form { gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--bad) 18%, var(--hair)); }
.challenge-cancel-note { margin-top: 10px !important; color: color-mix(in srgb, var(--bad) 74%, var(--ink-2)) !important; }
@media (max-width: 760px) {
.quality-manager-v24 { padding: 12px; }
.quality-settings-grid-three { gap: 14px; }
.quality-manager-v24 .quality-area-manager { padding: 14px 12px; }
.challenge-active-card { padding: 18px 16px; }
}
.creative-v2-page.zone-page, .content-v4-page.zone-page { gap: 20px; }
.creative-v2-page > .detail-zone, .content-v4-page > .detail-zone { padding-bottom: 0; border-color: color-mix(in srgb, var(--zone-tone) 13%, var(--frame)); border-radius: 18px; background:
linear-gradient(135deg, color-mix(in srgb, var(--zone-tone) 3.5%, transparent), transparent 46%),
color-mix(in srgb, var(--plate-1) 74%, var(--sunk)); box-shadow: inset 0 1px 0 var(--lip), 0 18px 44px -38px #000; }
.creative-v2-page > .detail-zone::before, .content-v4-page > .detail-zone::before { opacity: 0.76; }
.creative-v2-page > .detail-zone > .zone-head, .content-v4-page > .detail-zone > .zone-head { padding: 18px 24px 16px 28px; gap: 12px; border-bottom-color: var(--hair-soft); background: transparent; box-shadow: none; }
.creative-v2-page > .detail-zone > .zone-head .zone-index, .content-v4-page > .detail-zone > .zone-head .zone-index { margin-top: 4px; padding: 3px 7px; border-radius: 7px; background: color-mix(in srgb, var(--zone-tone) 9%, var(--sunk)); border: 1px solid color-mix(in srgb, var(--zone-tone) 18%, var(--channel)); color: color-mix(in srgb, var(--zone-tone) 84%, var(--ink)); -webkit-text-fill-color: currentColor; font-size: 0.74rem; line-height: 1; letter-spacing: 0.08em; opacity: 1; }
.creative-v2-page > .detail-zone > .zone-head h2.zone-title, .content-v4-page > .detail-zone > .zone-head h2.zone-title { font-size: clamp(1.04rem, 1.1vw, 1.22rem); line-height: 1.25; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.creative-v2-page > .detail-zone > .zone-head .zone-tag, .content-v4-page > .detail-zone > .zone-head .zone-tag { padding: 5px 11px; border-color: color-mix(in srgb, var(--zone-tone) 18%, var(--channel)); background: color-mix(in srgb, var(--zone-tone) 5%, var(--sunk)); font-size: 0.78rem; color: var(--ink-3); }
.creative-v2-page > .detail-zone > .zone-body, .content-v4-page > .detail-zone > .zone-body { gap: 14px; padding: 0 24px 24px 28px; }
.creative-v2-page > .detail-zone > .zone-body > .zone-card, .content-v4-page > .detail-zone > .zone-body > .zone-card { padding: 18px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.creative-v2-page > .detail-zone > .zone-body > .creative-works-board, .content-v4-page > .detail-zone > .zone-body > .creative-works-board { padding-top: 4px; }
.creative-v2-page .creative-work-row, .content-v4-page .creative-work-row { padding: 16px 18px 16px 22px; border-color: var(--hair); border-radius: 14px; background: color-mix(in srgb, var(--plate-2) 88%, var(--sunk)); box-shadow: none; }
.creative-v2-page .creative-work-row:hover, .content-v4-page .creative-work-row:hover { border-color: color-mix(in srgb, var(--area-color) 34%, var(--channel)); background: color-mix(in srgb, var(--area-color) 3.5%, var(--plate-2)); }
.creative-v2-page .creative-work-main strong, .content-v4-page .creative-work-main strong { font-size: 1rem; }
.creative-v2-page .creative-work-main small, .content-v4-page .creative-work-main small, .creative-v2-page .creative-work-next small, .content-v4-page .creative-work-next small { color: var(--ink-3); }
.creative-v2-page .prod-session-row, .content-v4-page .prod-session-row { padding: 14px 16px; border: 1px solid var(--hair-soft); border-radius: 12px; background: color-mix(in srgb, var(--plate-2) 82%, var(--sunk)); }
.creative-v2-page .prod-session-row + .prod-session-row, .content-v4-page .prod-session-row + .prod-session-row { margin-top: 8px; }
.creative-v2-page .prod-session-row strong, .content-v4-page .prod-session-row strong { font-size: 0.96rem; }
.creative-v2-page .prod-session-row small, .content-v4-page .prod-session-row small, .creative-v2-page .prod-clock, .content-v4-page .prod-clock { color: var(--ink-3); }
.creative-v2-page .card-head, .content-v4-page .card-head { margin-bottom: 12px; border-bottom-color: var(--hair-soft); }
.creative-v2-page .card-head h3, .content-v4-page .card-head h3 { font-size: 0.84rem; letter-spacing: 0.12em; color: var(--ink-2); }
.creative-v2-page #creativeWorkForm, .content-v4-page #contentWorkForm { padding-top: 8px; }
@media (max-width: 760px) {
.creative-v2-page.zone-page, .content-v4-page.zone-page { gap: 14px; }
.creative-v2-page > .detail-zone > .zone-head, .content-v4-page > .detail-zone > .zone-head { padding: 14px 14px 13px 17px; }
.creative-v2-page > .detail-zone > .zone-body, .content-v4-page > .detail-zone > .zone-body { padding: 0 14px 16px 17px; }
.creative-v2-page > .detail-zone > .zone-head h2.zone-title, .content-v4-page > .detail-zone > .zone-head h2.zone-title { font-size: 0.98rem; }
.creative-v2-page .creative-work-row, .content-v4-page .creative-work-row { padding: 14px 13px 14px 18px; }
.creative-v2-page .prod-session-row, .content-v4-page .prod-session-row { padding: 13px; }
}
.system-pipeline-badge { padding: 0 13px; border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--hair)); border-radius: 12px; color: var(--ok); background: color-mix(in srgb, var(--ok) 7%, var(--plate-2)); font: 750 0.72rem/1 var(--mono); letter-spacing: 0.05em; }
.work-component-group { border-color: color-mix(in srgb, var(--stage-tone) 24%, var(--hair)); background:
linear-gradient(125deg, color-mix(in srgb, var(--stage-tone) 5%, transparent), transparent 46%),
color-mix(in srgb, var(--plate-2) 91%, var(--sunk)); }
.work-component-group > header { border-bottom-color: color-mix(in srgb, var(--stage-tone) 18%, var(--hair-soft)); }
.work-component-group .stage-flag { color: var(--stage-tone); }
.home-focus-v27 { gap:clamp(16px,1.4vw,26px); }
.home-mission-entry { gap:22px; padding:18px 22px; text-decoration:none; border:1px solid color-mix(in srgb,var(--blue) 38%,var(--channel)); border-radius:18px; background:linear-gradient(112deg,color-mix(in srgb,var(--blue) 9%,var(--plate-1)),var(--plate-1) 62%,color-mix(in srgb,var(--violet) 8%,var(--plate-2))); box-shadow:inset 0 1px 0 var(--lip),0 16px 34px -28px color-mix(in srgb,var(--blue) 70%,#000); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.home-mission-entry::before { content:""; background:linear-gradient(180deg,var(--cyan),var(--blue),var(--violet)); box-shadow:0 0 20px var(--blue); }
.home-mission-entry:hover { border-color:color-mix(in srgb,var(--cyan) 58%,var(--channel)); box-shadow:inset 0 1px 0 var(--lip),0 22px 42px -28px color-mix(in srgb,var(--blue) 80%,#000); }
.home-mission-entry-main { gap:15px; }
.home-mission-entry-main>i { border:1px solid color-mix(in srgb,var(--cyan) 38%,var(--channel)); border-radius:15px; background:color-mix(in srgb,var(--blue) 10%,var(--sunk)); color:var(--cyan); font:800 1.35rem/1 var(--mono); font-style:normal; }
.home-mission-entry-main>span { gap:4px; }
.home-mission-entry-main small { color:var(--cyan); font:800 .7rem/1.2 var(--mono); letter-spacing:.13em; }
.home-mission-entry-main strong { color:var(--ink); font-size:clamp(1.15rem,1.25vw,1.4rem); }
.home-mission-entry>b { gap:10px; color:var(--ink-2); font-size:.94rem; }
.home-mission-entry>b span { border-radius:11px; background:color-mix(in srgb,var(--blue) 14%,var(--sunk)); color:var(--cyan); font-size:1.1rem; transition:transform .18s ease; }
.home-challenge-card { padding:clamp(24px,2vw,34px); }
.home-challenge-head { gap:18px; margin:12px 0 18px; }
.home-challenge-head h2 { margin:0; font-size:clamp(23px,1.7vw,32px); }
.home-challenge-head strong { font-size:clamp(25px,2vw,38px); color:var(--lime); }
.home-challenge-card p { color:var(--muted); }
.home-challenge-card>a { color:var(--cyan); font-weight:800; text-decoration:none; }
.creation-mode-switch { gap:20px; padding:18px 20px; margin-bottom:14px; border:1px solid color-mix(in srgb,var(--area-color,var(--blue)) 28%,var(--border)); border-radius:18px; background:color-mix(in srgb,var(--panel) 90%,transparent); }
.creation-mode-switch p { margin:5px 0 0; color:var(--muted); }
.segmented-control { gap:4px; padding:5px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.segmented-control button { border:0; border-radius:10px; padding:11px 16px; background:transparent; color:var(--muted); font:800 13px/1 var(--body); }
.segmented-control button.active { color:var(--text); background:linear-gradient(135deg,var(--violet),var(--blue)); box-shadow:0 7px 20px color-mix(in srgb,var(--violet) 32%,transparent); }
.focus-create-form .active-start-date::after { content:"başlangıç tarihi"; margin-top:6px; color:var(--area-color,var(--cyan)); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.detail-focus-tabs { gap:7px; margin:0 0 22px; padding:6px; border:1px solid var(--border); border-radius:18px; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(18px); }
.detail-focus-tabs a { padding:13px 18px; border-radius:12px; color:var(--muted); font-weight:800; text-decoration:none; }
.detail-focus-tabs a:hover { color:var(--text); background:var(--surface); }
.detail-focus-tabs a.active { color:#fff; background:linear-gradient(135deg,var(--area-color),color-mix(in srgb,var(--area-color) 58%,var(--violet))); box-shadow:0 8px 24px color-mix(in srgb,var(--area-color) 28%,transparent); }
.focus-detail-page .detail-zone { margin-bottom:18px; }
.focus-detail-page .zone-head { padding-left:22px; }
.focus-detail-page .zone-title { font-size:clamp(18px,1.25vw,23px); letter-spacing:.04em; }
.mission-v4-page[data-view="focus"] .mission-view-panel { padding:0; }
.mission-v4-page[data-view="focus"] .mission-view-panel>.panel-head { margin:0; padding:20px 22px; border-bottom:1px solid var(--hair); }
.mission-focus-board { gap:0; }
.mission-focus-group { border:0; border-radius:0; background:transparent; }
.mission-focus-group+.mission-focus-group { border-top:1px solid var(--hair); }
.mission-focus-group>header { padding:13px 18px; border-bottom:1px solid var(--hair-soft); background:color-mix(in srgb,var(--group-tone,var(--blue)) 5%,var(--sunk)); }
.mission-focus-group>header h3 { margin:0; color:color-mix(in srgb,var(--group-tone) 78%,var(--ink)); font-size:1rem; }
.mission-focus-group>header span { border-radius:10px; background:var(--panel); font-weight:900; }
.mission-focus-group--late>header span { color:var(--bad); }
.mission-focus-group--progress>header span { color:var(--lime); }
.mission-focus-group--today>header span { color:var(--blue); }
.mission-focus-row { gap:14px; padding:15px 18px; border-bottom:1px solid var(--hair-soft); }
.mission-focus-row:last-child { border-bottom:0; }
.mission-focus-row>i { border-radius:9px; background:var(--area-color); box-shadow:0 0 12px var(--area-color); }
.mission-focus-row a { text-decoration:none; color:var(--ink); }
.mission-focus-row small { margin-top:5px; color:var(--ink-3); }
.mission-focus-row>b { color:var(--area-color); }
.mission-focus-empty { margin:18px; border:1px dashed var(--channel); border-radius:16px; background:var(--sunk); }
.mission-period--focus { gap:8px; }
.period-focus-step { gap:7px; padding:6px 11px; border:1px solid var(--hair); border-radius:12px; background:var(--sunk); color:var(--ink-3); text-decoration:none; }
.period-focus-step span { font-size:1.15rem; color:var(--cyan); }
.period-focus-step small { font-size:.76rem; font-weight:750; }
.period-focus-step:hover { border-color:color-mix(in srgb,var(--blue) 48%,var(--channel)); color:var(--ink); }
.mission-period-current { gap:4px; padding:5px 15px; }
.mission-period-current small { color:var(--cyan); font:800 .66rem/1 var(--mono); letter-spacing:.13em; }
.mission-period-current b { font-size:.86rem; }
.mission-period--focus .period-today { padding:8px 11px; border:1px solid var(--hair); border-radius:10px; }
.mission-period--focus .period-today.is-current { color:var(--lime); border-color:color-mix(in srgb,var(--lime) 35%,var(--channel)); background:color-mix(in srgb,var(--lime) 7%,var(--sunk)); }
.zone-page>.page-title { margin-bottom:24px; }
.zone-page>.detail-zone { margin-bottom:18px; }
.zone-page>.detail-zone>.zone-head .zone-index { opacity:.38; }
@media (max-width:560px) {
.home-mission-entry { padding:14px 15px; }
.home-mission-entry>b { font-size:0; }
.home-mission-entry>b span { font-size:1.1rem; }
.mission-period-current { padding:4px 6px 8px; }
.detail-focus-tabs { gap:3px; padding:4px; border-radius:14px; }
.detail-focus-tabs a { padding:11px 6px; font-size:12px; }
.mission-focus-row { gap:10px; }
}
@media (min-width:1700px) {
.page-wrap, .dashboard-wrap { padding:44px 42px 68px!important; }
}
.main-content input, .main-content select, .main-content textarea, .main-content button { font-family:var(--sans); font-size:.94rem; }
.main-content label { font-size:.84rem; line-height:1.45; }
.main-content .panel-meta, .main-content .form-note, .main-content .quiet-note { font-size:.86rem; line-height:1.55; }
.main-content textarea { line-height:1.55; }
.beta28-detail { gap:18px; }
.beta28-detail .detail-focus-tabs { margin-bottom:0; }
.beta28-detail .detail-zone { margin:0; }
.beta28-detail .zone-head { padding-left:20px; }
.beta28-detail .zone-title { font-size:clamp(1.06rem,1vw,1.22rem); }
.detail-summary-strip { gap:30px; padding:clamp(24px,2vw,34px); border:1px solid color-mix(in srgb,var(--area-color) 34%,var(--channel)); border-radius:22px; background:linear-gradient(118deg,color-mix(in srgb,var(--area-color) 10%,var(--plate-1)),var(--plate-1) 58%,var(--plate-2)); box-shadow:inset 0 1px 0 var(--lip),var(--shadow); }
.detail-summary-strip::before { content:""; background:var(--area-color); box-shadow:0 0 22px var(--area-color); }
.detail-summary-copy .back-link { margin-bottom:12px; font-weight:750; }
.detail-summary-copy .kicker { color:var(--area-color); font-size:.78rem; letter-spacing:.14em; }
.detail-summary-copy h1 { margin:7px 0 8px; font-size:clamp(2rem,2.4vw,3rem); }
.detail-summary-copy p { color:var(--ink-2); font-size:1rem; }
.detail-summary-score { gap:5px; padding-left:28px; border-left:1px solid var(--hair); }
.detail-summary-score>span { font-size:.76rem; font-weight:850; letter-spacing:.12em; color:var(--area-color); }
.detail-summary-score>strong { font:850 clamp(1.65rem,2vw,2.35rem)/1.1 var(--sans); color:var(--ink); }
.detail-summary-score>small { font-family:var(--mono); font-size:.82rem; color:var(--ink-3); }
.focus-panel { padding:clamp(20px,1.6vw,28px); border:1px solid var(--channel); border-radius:18px; background:var(--brush),linear-gradient(180deg,var(--plate-1),var(--plate-2)); box-shadow:inset 0 1px 0 var(--lip); }
.focus-panel-head { gap:18px; margin-bottom:20px; }
.focus-panel-head h2 { margin-top:4px; font-size:1.18rem; }
.focus-panel-head .kicker { font-size:.76rem; color:var(--area-color,var(--blue)); letter-spacing:.13em; }
.status-control-v28 form { gap:13px; }
.status-control-v28 p { margin-top:18px; color:var(--ink-3); font-size:.86rem; }
.stage-plan-board { margin-top:16px; padding:0; }
.stage-plan-board>.focus-panel-head { margin:0; padding:20px 22px; border-bottom:1px solid var(--hair); }
.stage-plan-row { gap:15px; padding:15px 20px; border-bottom:1px solid var(--hair-soft); }
.stage-plan-row:last-child { border-bottom:0; }
.stage-plan-row>i { border:1px solid color-mix(in srgb,var(--area-color) 35%,var(--channel)); border-radius:10px; color:var(--area-color); font-style:normal; font-weight:850; }
.stage-plan-name { gap:2px; }
.stage-plan-name strong { font-size:.96rem; }
.stage-plan-name small { font-size:.78rem; color:var(--ink-3); }
.stage-plan-date { gap:2px; }
.stage-plan-date span { font-size:.7rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-4); }
.stage-plan-date strong { font:750 .86rem/1.3 var(--mono); }
.stage-plan-row>b { font:800 .86rem/1 var(--mono); color:var(--area-color); }
.stage-plan-row.complete { opacity:.62; }
.stage-reschedule>summary { padding:8px 11px; border:1px solid var(--channel); border-radius:10px; color:var(--ink-2); font-size:.78rem; font-weight:750; }
.stage-reschedule-form { gap:11px; padding:16px; border:1px solid var(--channel); border-radius:14px; background:var(--plate-raise); box-shadow:0 24px 50px #000; }
.beta28-detail .detail-zone[data-zone="timer"]>.zone-body { padding:18px 20px 20px; }
.beta28-detail .timer-card { padding:20px 22px; }
.beta28-detail .timer-body { gap:24px; }
.beta28-detail .timer-target { gap:6px; }
.beta28-detail .timer-target strong { font-size:1.16rem; }
.beta28-detail .timer-target small { font-size:.86rem; }
.beta28-detail .timer-clock { padding:13px 24px; }
.beta28-detail .timer-clock strong { font-size:2rem; }
.beta28-detail .timer-meta { margin-top:12px; }
.beta28-detail .timer-meta>div { padding:10px 14px; }
.beta28-detail .timer-meta span { font-size:.72rem; }
.beta28-detail .timer-meta strong { font-size:1rem; }
.sculpt-checklist { padding:0; background:transparent; border:0; box-shadow:none; }
.sculpt-checklist>.panel-head { margin:0 0 13px; padding:0 2px; }
.sculpt-checklist>.panel-head h2 { font-size:1.18rem; }
.work-component-groups { gap:10px; margin:0; }
details.work-component-group { margin:0; border-radius:15px; background:color-mix(in srgb,var(--plate-2) 90%,var(--stage-tone) 3%); }
.component-group-summary { gap:14px; padding:13px 17px; }
.component-group-marker { border:1px solid color-mix(in srgb,var(--stage-tone) 38%,var(--channel)); border-radius:11px; color:var(--stage-tone); font:800 .78rem/1 var(--mono); }
.component-group-copy { gap:3px; }
.component-group-copy small { font-size:.69rem; font-weight:850; letter-spacing:.11em; color:var(--stage-tone); }
.component-group-copy strong { font-size:.97rem; }
.component-group-progress { gap:8px; color:var(--ink-3); font:750 .76rem/1 var(--mono); }
.component-group-progress>i { border-radius:99px; background:var(--hair); }
.component-group-progress>i>b { border-radius:inherit; background:var(--stage-tone); }
.component-group-score { color:var(--ink-2); font:750 .8rem/1 var(--mono); }
.component-group-toggle { border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3); transition:transform .2s ease; }
details.work-component-group[open] .component-group-summary { border-bottom:1px solid var(--hair); }
.work-component-group .component-checklist { padding:5px 14px 12px 18px; }
.component-row, .component-row.completed { padding:8px 8px; border:0; }
.component-row+.component-row { border-top:1px solid var(--hair-soft); }
.component-row>span:nth-child(2)>b { font-size:.94rem; font-weight:700; }
.component-row>span:nth-child(2)>small { font-size:.76rem; }
.component-row>strong { font-size:.8rem; color:var(--stage-tone,var(--ok)); }
.component-row.completed { opacity:.58; }
.component-done-button { padding:0!important; border:1px solid color-mix(in srgb,var(--ok) 38%,var(--channel)); border-radius:11px; background:color-mix(in srgb,var(--ok) 8%,var(--sunk)); color:var(--ok); font-size:1rem!important; font-weight:900; }
.component-done-button:hover { color:var(--void); background:var(--ok); }
.quality-gate-simple { padding:0; }
.quality-gate-simple>.panel-head { margin-bottom:14px; }
.quality-gate-simple .quality-check-grid { gap:8px; }
.quality-gate-simple .quality-check-grid span { padding:10px 12px; font-size:.92rem; }
.file-launch-grid { gap:10px; margin-top:18px; }
.file-launch-card { gap:5px; padding:14px; border:1px solid var(--channel); border-radius:13px; background:var(--plate-2); }
.file-launch-card>span { font-size:.72rem; font-weight:850; letter-spacing:.1em; color:var(--area-color); text-transform:uppercase; }
.file-launch-card>strong { font-size:.9rem; }
.file-launch-card.empty { opacity:.48; }
.creative-v2-page .creative-work-row.is-late, .content-v4-page .creative-work-row.is-late { border-color:color-mix(in srgb,var(--bad) 46%,var(--frame)); background:var(--brush),linear-gradient(180deg,color-mix(in srgb,var(--bad) 8%,var(--plate-1)),var(--plate-2)); }
.creative-v2-page .creative-work-row.is-settled, .content-v4-page .creative-work-row.is-settled { opacity:.72; }
.creative-v2-page .creative-work-row.is-selected, .content-v4-page .creative-work-row.is-selected { opacity:1; border-color:color-mix(in srgb,var(--area-color) 52%,var(--frame)); background:color-mix(in srgb,var(--area-color) 7%,var(--plate-2)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--area-color) 18%,transparent); }
@media (orientation:portrait) and (min-width:761px) and (max-width:1200px) {
.beta28-detail { padding-top:86px; }
.detail-summary-score { padding:18px 0 0; border-top:1px solid var(--hair); border-left:0; }
}
@media (max-width:760px) {
.beta28-detail { gap:13px; padding-top:78px; }
.detail-summary-strip { gap:18px; padding:21px 18px; border-radius:17px; }
.detail-summary-copy h1 { font-size:1.75rem; }
.detail-summary-copy p { font-size:.94rem; }
.detail-summary-score { padding:16px 0 0; border-top:1px solid var(--hair); border-left:0; }
.detail-summary-score>strong { font-size:1.55rem; }
.detail-focus-tabs { scrollbar-width:none; }
.detail-focus-tabs a { font-size:.82rem; }
.beta28-detail .zone-head { padding:12px 14px; }
.beta28-detail .zone-index { font-size:.76rem; }
.beta28-detail .zone-body { padding:0 13px 14px; }
.focus-panel { padding:17px 14px; }
.focus-panel-head { margin-bottom:16px; }
.stage-plan-board { padding:0; }
.stage-plan-row { gap:10px; padding:13px 12px; }
.stage-reschedule-form { margin-top:8px; box-shadow:none; }
.beta28-detail .timer-card { padding:16px; }
.component-group-summary { gap:9px; padding:11px; }
.component-row, .component-row.completed { gap:9px; padding:9px 4px; }
}
.quality-template-stack { gap:18px; margin-top:16px; }
.quality-template-run { gap:16px; padding:20px; border:1px solid color-mix(in srgb,var(--area-color,var(--cyan)) 30%,var(--line)); border-radius:20px; background:linear-gradient(145deg,color-mix(in srgb,var(--plate-2) 94%,var(--area-color,var(--cyan)) 6%),var(--panel)); box-shadow:0 16px 38px rgba(0,0,0,.16); }
.quality-template-run>header { gap:18px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.quality-template-run>header span { margin-bottom:5px; color:var(--area-color,var(--cyan)); font:700 .72rem/1.2 var(--mono); letter-spacing:.14em; }
.quality-template-run>header h3 { margin:0; color:var(--ink-1); font-size:1.12rem; line-height:1.35; }
.quality-template-run .quality-check-grid { margin:0; }
.quality-check-grid span { border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb,var(--plate-2) 92%,transparent); color:var(--ink-2); transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease; }
.quality-check-grid i { border:1px solid var(--line); border-radius:9px; background:var(--sunk); color:var(--ink-4); font-style:normal; }
.quality-check-grid label:hover span { border-color:color-mix(in srgb,var(--area-color,var(--cyan)) 48%,var(--line)); }
.quality-check-grid input:checked+span { border-color:color-mix(in srgb,var(--ok) 68%,var(--line)); background:color-mix(in srgb,var(--ok) 13%,var(--plate-2)); color:var(--ink-1); }
.quality-check-grid input:checked+span i { border-color:var(--ok); background:var(--ok); color:#06110b; box-shadow:0 0 18px color-mix(in srgb,var(--ok) 45%,transparent); }
.quality-check-grid input:focus-visible+span { outline:3px solid color-mix(in srgb,var(--cyan) 45%,transparent); outline-offset:2px; }
.quality-status.complete { border-color:color-mix(in srgb,var(--ok) 65%,var(--line)); color:var(--ok); background:color-mix(in srgb,var(--ok) 12%,transparent); }
.code-sequence-form label small { margin-top:7px; color:var(--ink-3); font-size:.84rem; line-height:1.45; }
.extra-task-list { gap:10px; }
.extra-row-size { color:var(--extra); font-weight:800; }
.extra-row-size small { font-size:.65rem; letter-spacing:.12em; color:var(--ink-4); }
@media(max-width:760px) {
.quality-template-stack { gap:12px; }
.quality-template-run { padding:15px; border-radius:16px; }
.quality-template-run>header { gap:10px; }
}
.challenge-history-grid { gap:16px; }
.challenge-history-card { gap:13px; text-decoration:none; }
.challenge-history-card:hover { border-color:color-mix(in srgb,var(--gold) 38%,var(--frame)); }
.challenge-history-card-head { gap:12px; }
.challenge-history-card-head span { color:var(--gold); font:800 .72rem/1.2 var(--mono); letter-spacing:.12em; }
.challenge-history-card-head b { color:var(--ink); font:800 1rem/1 var(--mono); }
.challenge-history-card.is-cancelled .challenge-history-card-head span { color:var(--bad); }
.challenge-history-card h2 { margin:0; color:var(--ink); font-size:1.25rem; }
.challenge-history-card p { margin:0; color:var(--ink-3); font-family:var(--mono); }
.challenge-history-card .progress-track { margin:2px 0; }
.challenge-history-score { gap:4px; }
.challenge-history-score strong { color:var(--ink); font:800 1.15rem/1.2 var(--mono); }
.challenge-history-score small { color:var(--ink-3); line-height:1.5; }
.welcome-message-preview { gap:8px; border-color:color-mix(in srgb,var(--cyan) 28%,var(--frame))!important; }
.welcome-message-preview span { color:var(--cyan); font:800 .7rem/1.2 var(--mono); letter-spacing:.13em; }
.welcome-message-preview p { margin:0; color:var(--ink); font-size:1.08rem; line-height:1.6; }
.home-welcome .welcome-copy { line-height:1.55; }
.welcome-message-pool { gap:7px; padding:3px 5px 3px 0; }
.welcome-message-row { gap:12px; padding:11px 12px; border:1px solid var(--hair); border-radius:12px; background:var(--plate-2); }
.welcome-message-row.is-off { opacity:.46; }
.welcome-message-row>b { color:var(--cyan); font:750 .74rem/1 var(--mono); }
.welcome-message-row>p { margin:0; color:var(--ink-2); line-height:1.48; }
.welcome-message-row>div { gap:7px; }
.welcome-message-add { gap:12px; margin-top:6px; }
.welcome-message-add label { gap:7px; }
@media(max-width:760px) {
.zone-page>.detail-zone>.zone-head, .challenge-detail-page>.detail-zone>.zone-head { row-gap:10px; }
.zone-page>.detail-zone>.zone-head .zone-tag, .challenge-detail-page>.detail-zone>.zone-head .zone-tag { margin:0; padding:8px 10px; border-radius:10px; font-size:.74rem; line-height:1.5; letter-spacing:.025em; }
.creative-v2-page .creative-work-row, .content-v4-page .creative-work-row { gap:11px 12px; padding:15px 14px 16px 18px; }
.creative-v2-page .creative-work-id, .content-v4-page .creative-work-id { gap:8px; }
.creative-v2-page .creative-work-main, .content-v4-page .creative-work-main { padding-left:3px; }
.creative-v2-page .creative-work-main strong, .content-v4-page .creative-work-main strong { font-size:1.02rem; line-height:1.35; }
.creative-v2-page .creative-work-main small, .content-v4-page .creative-work-main small { margin-top:4px; line-height:1.45; }
.creative-v2-page .creative-work-next, .content-v4-page .creative-work-next { padding:10px 12px; border:1px solid var(--hair-soft); border-radius:11px; background:var(--sunk); }
.creative-v2-page .creative-work-row>.unit-quick-actions, .content-v4-page .creative-work-row>.unit-quick-actions { gap:7px; }
.bulk-list-head { gap:10px; padding:12px; }
.bulk-list-head>small { line-height:1.45; }
.extra-row { gap:12px; padding:15px; }
.extra-row-size { padding:7px 11px; }
.extra-row-main strong, .extra-row-main small { line-height:1.45; }
.extra-row>.unit-quick-actions { gap:8px; }
.production-card { padding:17px; }
.challenge-planner>summary { padding:16px; gap:9px 11px; }
.challenge-planner>summary b { font-size:.94rem; line-height:1.35; letter-spacing:.08em; }
.challenge-planner>summary .planner-hint { margin:0; font-size:.8rem; line-height:1.4; }
.planner-body { padding:16px; }
.challenge-past-link { padding:15px 17px; }
.welcome-message-row { gap:9px; padding:11px; }
}
.wk-page, .wk-settings { gap: var(--space-4); }
.wk-glass { border: 1px solid var(--wk-edge); border-radius: 20px; background:
linear-gradient(180deg, color-mix(in srgb, var(--ink) 4%, transparent), transparent 42%),
var(--wk-glass); backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent), 0 18px 40px rgba(0, 0, 0, .28); }
[data-saver='on'] .wk-glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--plate-1); }
.wk-head { gap: var(--space-4); }
.wk-head-title h1 { margin: 2px 0 0; font-size: clamp(1.6rem, 2.4vw, 2.2rem); letter-spacing: -.02em; }
.wk-head-actions { gap: var(--space-2); }
.wk-switch { gap: 4px; padding: 4px; border: 1px solid var(--wk-edge); border-radius: 999px; background: var(--wk-glass); backdrop-filter: blur(14px); }
.wk-switch a { padding: 8px 18px; border-radius: 999px; color: var(--ink-2); font-weight: 650; text-decoration: none; font-size: var(--fs-s); }
.wk-switch a:hover { color: var(--ink); }
.wk-switch a.is-active { color: var(--ink); background: color-mix(in srgb, var(--blue) 22%, var(--plate-raise)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent); }
.wk-strip { gap: var(--space-3); }
.wk-strip > .wk-glass { padding: 16px 18px; gap: 6px; }
.wk-strip strong { gap: 9px; font-size: var(--fs-xl); line-height: 1.2; }
.wk-strip strong small { font-size: var(--fs-s); color: var(--ink-2); font-weight: 500; }
.wk-strip strong > i { border-radius: 3px; background: var(--c, var(--blue)); box-shadow: 0 0 12px var(--c, var(--blue)); }
.wk-strip small { color: var(--ink-2); font-size: var(--fs-s); }
.wk-progress { border-radius: 99px; background: var(--wk-line); }
.wk-progress i { border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, transparent), var(--c)); transition: width .6s var(--ease-out, ease); }
.wk-next { margin: 6px 0 0; padding: 8px 0 0; border-top: 1px solid var(--wk-line); gap: 5px; }
.wk-next li { gap: 8px; font-size: var(--fs-s); color: var(--ink-2); }
.wk-next li i { border-radius: 50%; background: var(--c); }
.wk-next li span { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 650; }
.wk-preview { margin-top: 6px; border-radius: 6px; background: var(--wk-line); }
.wk-preview i { background: color-mix(in srgb, var(--c) 78%, transparent); border-radius: 3px; }
.wk-preview b { background: var(--ink); box-shadow: 0 0 8px var(--ink); }
.wk-prayer-card summary { gap: 6px; }
.wk-prayer-card summary::after { content: 'Bugünün vakitleri ▾'; font-size: var(--fs-xs); color: var(--ink-3); }
.wk-prayer-card details[open] summary::after { content: 'Kapat ▴'; }
.wk-prayer-list { margin: 8px 0 0; padding: 0; gap: 6px; }
.wk-prayer-list li { gap: 1px; padding: 7px 9px; border-radius: 10px; background: var(--wk-line); font-size: var(--fs-xs); color: var(--ink-2); }
.wk-prayer-list b { color: var(--ink); font-size: var(--fs-m); font-variant-numeric: tabular-nums; }
.wk-prayer-list li.is-past { opacity: .5; }
.wk-prayer-list li.is-next { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); }
.wk-board { padding: 6px; }
.wk-scroll { border-radius: 15px; }
.wk-corner { background: var(--wk-glass-strong); }
.wk-dayhead { gap: 1px; padding: 6px 4px; text-decoration: none; color: var(--ink-2); background: var(--wk-glass-strong); border-bottom: 1px solid var(--wk-line); }
.wk-dayhead b { color: var(--ink); font-size: var(--fs-m); letter-spacing: .02em; }
.wk-dayhead span { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.wk-dayhead small { font-size: 11px; color: var(--ink-3); }
a.wk-dayhead:hover b { color: var(--blue); }
.wk-dayhead.is-today b { color: var(--blue); }
.wk-dayhead.is-today::after { content: ''; border-radius: 2px; background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.wk-board--day .wk-dayhead { padding-left: 14px; gap: 10px; }
.wk-ruler, .wk-lane { margin-block: 12px; }
.wk-ruler { background: var(--wk-glass-strong); border-right: 1px solid var(--wk-line); }
.wk-ruler span, .wk-ruler b, .wk-ruler em { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.wk-ruler em { font-style: normal; font-size: 10px; color: var(--ink-4); line-height: 1.1; }
.wk-ruler .wk-now-label { padding: 1px 5px; border-radius: 6px; color: var(--plate-2); background: var(--ink); font-weight: 750; }
.wk-ruler .wk-stop-label { color: var(--bad); font-weight: 800; letter-spacing: .06em; }
.wk-lane { border-left: 1px solid var(--wk-line); }
.wk-lane.is-today { background: color-mix(in srgb, var(--blue) 4%, transparent); }
.wk-hour { background: var(--wk-line); }
.wk-fold { border-radius: 8px; background: repeating-linear-gradient(135deg, var(--wk-line) 0 2px, transparent 2px 7px); }
.wk-fold span { font-size: 10.5px; color: var(--ink-4); background: var(--plate-2); padding: 0 6px; border-radius: 6px; }
.wk-prayer { border-top: 1px dashed color-mix(in srgb, var(--gold) 55%, transparent); }
.wk-prayer span { font-size: 10px; font-style: normal; color: var(--gold); }
.wk-kerahat { opacity: .45; background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--bad) 16%, transparent) 0 3px, transparent 3px 9px); }
.wk-lane.is-today .wk-kerahat, .wk-board--day .wk-kerahat { opacity: 1; }
.wk-stop { border-top: 2px solid color-mix(in srgb, var(--bad) 70%, transparent); }
.wk-now { border-top: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.wk-lane.is-today .wk-now { border-top: 2px solid var(--ink); box-shadow: 0 0 10px color-mix(in srgb, var(--ink) 60%, transparent); }
.wk-lane.is-today .wk-now::before { content: ''; border-radius: 50%; background: var(--ink); }
.wk-block { padding: 0; border: 1px solid color-mix(in srgb, var(--c) 46%, transparent); border-radius: 10px; color: var(--ink); background:
linear-gradient(180deg, color-mix(in srgb, #fff 14%, transparent), transparent 38%),
linear-gradient(90deg, color-mix(in srgb, var(--c) 34%, transparent) var(--p, 0%), color-mix(in srgb, var(--c) 21%, transparent) var(--p, 0%)); backdrop-filter: blur(6px); box-shadow: inset 3px 0 0 var(--c), 0 6px 16px rgba(0, 0, 0, .22); transition: transform .15s ease, box-shadow .15s ease, opacity .3s ease; }
.wk-block:hover { box-shadow: inset 3px 0 0 var(--c), 0 10px 22px rgba(0, 0, 0, .32), 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent); }
.wk-block:focus-visible { outline: 2px solid var(--c); outline-offset: 1px; }
.wk-block.is-past { opacity: .42; }
.wk-block.is-now { border-color: var(--c); box-shadow: inset 3px 0 0 var(--c), 0 0 0 1px var(--c), 0 0 22px color-mix(in srgb, var(--c) 45%, transparent); }
.wk-block-inner { gap: 2px; padding: 6px 8px 6px 10px; }
.wk-block-title { font-weight: 700; font-size: 13.5px; line-height: 1.2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wk-block-time { font-size: 11.5px; color: color-mix(in srgb, var(--ink) 74%, transparent); font-variant-numeric: tabular-nums; }
.wk-block-desc { font-size: 11.5px; color: var(--ink-2); line-height: 1.3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
@container (max-height: 44px) {
.wk-block-inner { gap: 6px; padding: 0 8px 0 10px; }
.wk-block-title { -webkit-line-clamp: 1; font-size: 12.5px; }
.wk-block-time { font-size: 11px; }
}
@container (max-height: 24px) {
.wk-block-title { font-size: 11.5px; }
}
.wk-ghost { border-radius: 10px; border: 1px dashed var(--blue); background: color-mix(in srgb, var(--blue) 18%, transparent); }
.is-copying .wk-lane:hover { background: color-mix(in srgb, var(--blue) 8%, transparent); }
.wk-daypicker { gap: 6px; }
.wk-daypicker a { gap: 1px; padding: 8px 4px; border: 1px solid var(--wk-edge); border-radius: 14px; background: var(--wk-glass); text-decoration: none; color: var(--ink-2); }
.wk-daypicker a b { color: var(--ink); font-size: var(--fs-s); }
.wk-daypicker a span { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.wk-daypicker a i { border-radius: 50%; background: var(--c); }
.wk-daypicker a.is-today b { color: var(--blue); }
.wk-daypicker a.is-active { border-color: color-mix(in srgb, var(--blue) 60%, transparent); background: color-mix(in srgb, var(--blue) 18%, var(--plate-1)); }
.wk-daypicker .wk-daypicker-step { font-size: 20px; color: var(--ink); }
.wk-dayview { gap: var(--space-3); }
.wk-dayside { gap: var(--space-3); }
.wk-load { padding: 16px; gap: 8px; }
.wk-load > strong { font-size: var(--fs-xl); }
.wk-load > strong small { font-size: var(--fs-s); color: var(--ink-2); font-weight: 500; }
.wk-bar { border-radius: 6px; gap: 2px; background: var(--wk-line); }
.wk-bar i { background: linear-gradient(180deg, color-mix(in srgb, #fff 18%, var(--c)), var(--c)); }
.wk-legend { margin: 0; padding: 0; gap: 6px; }
.wk-legend li { gap: 8px; font-size: var(--fs-s); color: var(--ink-2); }
.wk-legend li i { border-radius: 3px; background: var(--c); }
.wk-legend li b { color: var(--ink); font-variant-numeric: tabular-nums; }
.wk-legend li small { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.wk-legend--grid { column-gap: 24px; }
.wk-distribution { padding: 18px 20px; gap: 14px; }
.wk-distribution header { gap: 16px; }
.wk-distribution dl { gap: 26px; margin: 0; }
.wk-distribution dt { font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.wk-distribution dd { margin: 0; font-size: var(--fs-xl); font-weight: 750; font-variant-numeric: tabular-nums; }
.wk-agenda { gap: var(--space-3); }
.wk-agenda-day { padding: 14px 14px 10px; gap: 8px; }
.wk-agenda-day.is-today { border-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.wk-agenda-day header { gap: 10px; }
.wk-agenda-day h2 { margin: 0; font-size: var(--fs-xl); }
.wk-agenda-day.is-today h2 { color: var(--blue); }
.wk-agenda-day header span { color: var(--ink-2); font-size: var(--fs-s); }
.wk-agenda-day header small { color: var(--ink-3); font-size: var(--fs-xs); }
.wk-agenda-day header b { margin-left: auto; color: var(--ink-2); font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.wk-agenda-day ol { margin: 0; padding: 0; gap: 6px; }
.wk-agenda-empty { margin: 0; color: var(--ink-3); font-size: var(--fs-s); }
.wk-agenda-block button { gap: 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--c) 36%, transparent); border-radius: 12px; color: var(--ink); background: linear-gradient(180deg, color-mix(in srgb, #fff 9%, transparent), transparent 50%), color-mix(in srgb, var(--c) 15%, transparent); box-shadow: inset 3px 0 0 var(--c); }
.wk-agenda-block.is-past button { opacity: .45; }
.wk-agenda-block.is-now button { border-color: var(--c); box-shadow: inset 3px 0 0 var(--c), 0 0 18px color-mix(in srgb, var(--c) 40%, transparent); }
.wk-agenda-time { font-weight: 750; font-variant-numeric: tabular-nums; }
.wk-agenda-time small { color: var(--ink-3); font-weight: 500; }
.wk-agenda-body { gap: 2px; }
.wk-agenda-body small { gap: 6px; color: var(--ink-2); font-size: var(--fs-xs); }
.wk-agenda-body small i { border-radius: 50%; background: var(--c); }
.wk-agenda-body em { font-style: normal; font-size: var(--fs-xs); color: var(--ink-2); }
.wk-agenda-dur { color: var(--ink-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.wk-agenda-gap span { padding: 2px 12px; font-size: var(--fs-xs); color: var(--ink-3); border-left: 2px dotted var(--wk-edge); margin-left: 32px; }
.wk-agenda-prayer { gap: 10px; padding: 0 12px; font-size: var(--fs-xs); color: var(--gold); }
.wk-agenda-prayer span { font-variant-numeric: tabular-nums; }
.wk-agenda-prayer em { font-style: normal; gap: 10px; }
.wk-agenda-prayer em::after { content: ''; border-top: 1px dashed color-mix(in srgb, var(--gold) 40%, transparent); }
.wk-agenda-add { border: 0; background: none; color: var(--blue); font-weight: 650; padding: 6px 2px; }
.wk-modal { padding: 20px; }
.wk-modal-backdrop { border: 0; background: rgba(0, 0, 0, .6); backdrop-filter: blur(6px); }
.wk-sheet { gap: 14px; padding: 20px 22px 22px; border: 1px solid var(--wk-edge); border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 5%, transparent), transparent 30%), color-mix(in srgb, var(--plate-raise) 90%, transparent); backdrop-filter: blur(22px); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); transition: transform .2s ease; }
.wk-sheet-head h2 { margin: 2px 0 0; }
.wk-sheet label { gap: 6px; font-size: var(--fs-s); color: var(--ink-2); }
.wk-sheet fieldset { border: 0; margin: 0; padding: 0; gap: 6px; }
.wk-sheet legend { margin-bottom: 6px; font-size: var(--fs-s); color: var(--ink-2); padding: 0; }
.wk-days input, .wk-chips input { opacity: 0; }
.wk-days span, .wk-chips span { gap: 7px; padding: 0 14px; border: 1px solid var(--wk-edge); border-radius: 999px; color: var(--ink-2); background: var(--wk-line); font-weight: 600; }
.wk-days input:checked + span { color: var(--ink); border-color: var(--blue); background: color-mix(in srgb, var(--blue) 22%, transparent); }
.wk-chips span i { border-radius: 50%; background: var(--c); }
.wk-chips input:checked + span { color: var(--ink); border-color: var(--c, var(--ink-2)); background: color-mix(in srgb, var(--c, var(--ink-3)) 22%, transparent); }
.wk-days input:focus-visible + span, .wk-chips input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.wk-times { gap: 10px; }
.wk-duration { padding: 0 4px 11px; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 700; }
.wk-duration.is-bad { color: var(--bad); font-weight: 600; font-size: var(--fs-xs); }
.wk-sheet-actions { gap: 8px; }
.wk-sheet-actions .danger { margin-left: auto; }
.wk-copy-bar { gap: 14px; padding: 10px 12px 10px 18px; border-radius: 999px; border: 1px solid var(--wk-edge); background: var(--wk-glass-strong); backdrop-filter: blur(16px); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.wk-set { padding: 20px 22px; gap: 16px; }
.wk-set-title { gap: 12px; }
.wk-set-title > span { font-size: var(--fs-xl); font-weight: 800; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.wk-set-title h2 { margin: 0; font-size: var(--fs-l); }
.wk-set-title h2 small { margin-left: 8px; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
.wk-set-title p { margin: 4px 0 0; color: var(--ink-2); font-size: var(--fs-s); }
.wk-set--fold > summary h2::after { content: ' ▾'; color: var(--ink-3); }
.wk-set--fold[open] > summary h2::after { content: ' ▴'; }
.wk-set-form { gap: 14px; padding-left: 56px; }
.wk-set-form label { gap: 6px; font-size: var(--fs-s); color: var(--ink-2); }
.wk-set-form label small { color: var(--ink-3); font-size: var(--fs-xs); }
.wk-checks { gap: 8px; }
.wk-check, .wk-checks > label { gap: 9px; color: var(--ink) !important; }
.wk-segment { border: 0; margin: 0; padding: 0; gap: 8px; }
.wk-segment legend { padding: 0; margin-bottom: 6px; font-size: var(--fs-s); color: var(--ink-2); }
.wk-segment label { gap: 8px; padding: 9px 14px; border: 1px solid var(--wk-edge); border-radius: 12px; color: var(--ink); background: var(--wk-line); }
.wk-cats { gap: 12px; padding-left: 56px; }
.wk-cat { gap: 10px 20px; padding: 14px; border: 1px solid color-mix(in srgb, var(--c) 30%, var(--wk-edge)); border-radius: 16px; background: color-mix(in srgb, var(--c) 6%, transparent); }
.wk-cat-name { gap: 10px; }
.wk-cat-name i { border-radius: 4px; background: var(--c); box-shadow: 0 0 10px var(--c); }
.wk-cat-actions { gap: 8px; }
.wk-palette { gap: 3px; }
.wk-palette-row { gap: 4px; }
.wk-palette-row > span { font-size: 11px; color: var(--ink-3); }
.wk-palette-row.is-current > span { color: var(--ink-2); font-weight: 650; }
.wk-palette input { opacity: 0; margin: 0; }
.wk-palette i { border-radius: 6px; background: var(--swatch); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.wk-palette input:checked + i { outline: 2px solid var(--ink); outline-offset: 2px; }
.wk-palette input:focus-visible + i { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 760px) {
.wk-switch a { padding: 10px 6px; }
.wk-strip { scroll-padding-inline: 15px; scrollbar-width: none; margin-inline: -15px; padding-inline: 15px; }
.wk-strip > .wk-glass { padding: 12px 14px; }
.wk-strip strong { font-size: var(--fs-l); }
.wk-daypicker { gap: 4px; }
.wk-daypicker a { padding: 6px 2px; border-radius: 12px; }
.wk-distribution dl { gap: 16px; }
.wk-fab { border-radius: 18px; border: 1px solid color-mix(in srgb, var(--blue) 60%, transparent); background: linear-gradient(180deg, color-mix(in srgb, #fff 18%, var(--blue)), var(--blue)); color: #04101F; font-size: 34px; line-height: 1; font-weight: 500; box-shadow: 0 14px 30px color-mix(in srgb, var(--blue) 38%, transparent); }
.wk-modal { padding: 0; }
.wk-sheet { border-radius: 22px 22px 0 0; padding: 6px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
.wk-sheet-handle i { border-radius: 3px; background: var(--ink-3); }
.wk-duration { padding: 0; }
.wk-days span { padding: 0; }
.wk-set-form, .wk-cats { padding-left: 0; }
}
.wk-checks { gap: 2px; }
.wk-checks > label { margin: 0; padding: 0; }
.wk-inline-select { gap: 10px; color: var(--ink-2) !important; }
.snd-head { gap: 18px; }
.snd-head-lead { margin: 10px 0 0; color: var(--ink-3); font-size: .86rem; line-height: 1.6; }
@keyframes snd-bounce { to { transform: scaleY(.55); opacity: 1; } }
.snd-page { gap: 20px; }
.snd-page input[type="range"] { accent-color: var(--sound-color, var(--sound-accent)); }
.snd-panel-head { gap: 14px; }
.snd-panel-head h2 { margin: 4px 0 0; }
.snd-count { padding: 7px 12px; border: 1px solid var(--channel); border-radius: 999px; color: var(--ink-3); font: 750 .66rem/1 var(--mono); }
.snd-note { margin: 14px 0 0; color: var(--ink-3); font-size: .79rem; line-height: 1.6; }
.snd-hint { margin: 14px 0 0; color: var(--ink-4); font-size: .74rem; line-height: 1.5; }
.snd-console { padding: clamp(22px, 3vw, 36px); border-color: color-mix(in srgb, var(--sound-accent) 30%, var(--frame)); }
.snd-console::before { content: ''; background: linear-gradient(90deg, var(--accent), transparent 45%, transparent 60%, var(--accent-2)); opacity: 0.8; }
.snd-console-top { gap: 14px; }
.snd-console-meta p { margin: 8px 0 0; color: var(--ink-3); font: 700 .72rem/1 var(--mono); letter-spacing: .06em; }
.sound-status { gap: 9px; padding: 0 13px; border: 1px solid var(--channel); border-radius: 999px; color: var(--ink-3); background: var(--sunk); font: 800 .65rem/1 var(--mono); letter-spacing: .13em; }
.sound-status i { border-radius: 50%; background: var(--ink-3); }
.snd-page.is-playing .sound-status { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--frame)); }
.snd-page.is-playing .sound-status i { background: var(--ok); box-shadow: 0 0 13px var(--ok); }
.snd-stage { margin-top: 10px; }
.snd-ring circle { fill: none; stroke-width: 3; stroke-linecap: round; }
.snd-ring-track { stroke: var(--channel); }
.snd-ring-value { stroke: var(--sound-accent); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--sound-accent) 60%, transparent)); transition: stroke-dashoffset .3s linear; }
.sound-master-toggle { gap: 7px; border: 1px solid color-mix(in srgb, var(--sound-accent) 42%, var(--frame)); border-radius: 50%; color: var(--ink); background: radial-gradient(circle at 44% 32%, color-mix(in srgb, var(--sound-accent) 16%, var(--plate-raise)), var(--sunk) 70%); box-shadow: 0 22px 55px rgba(0,0,0,.4), inset 0 0 45px color-mix(in srgb, var(--sound-accent) 8%, transparent); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.sound-master-toggle:hover { border-color: var(--sound-accent); box-shadow: 0 24px 60px rgba(0,0,0,.44), 0 0 34px color-mix(in srgb, var(--sound-accent) 20%, transparent); }
.sound-master-toggle:disabled { opacity: .5; }
.sound-master-toggle .sound-play-icon { color: var(--sound-accent); font-size: 1.25rem; line-height: 1; }
.sound-master-toggle strong { font: 800 clamp(1.9rem, 4vw, 2.9rem)/1 var(--mono); letter-spacing: -.06em; }
.sound-master-toggle small { color: var(--ink-3); font: 850 .66rem/1 var(--mono); letter-spacing: .17em; }
.snd-wave { gap: 5px; opacity: .34; }
.snd-wave i { border-radius: 5px; background: linear-gradient(180deg, #72d6ff, #8b7cff); }
.snd-page.is-playing .snd-wave { opacity: .55; }
.snd-page.is-playing .snd-wave i { height: calc(20px + var(--wave-i) * 1px); transform: scaleY(calc(8 / (20 + var(--wave-i)))); animation: snd-wave 1.15s ease-in-out infinite alternate; animation-delay: calc(var(--wave-i) * -46ms); }
@keyframes snd-wave { 0% { transform: scaleY(calc(8 / (20 + var(--wave-i)))); opacity: .35; } 100% { transform: scaleY(1); opacity: .9; } }
.snd-master { gap: 18px; margin-top: 18px; }
.snd-master label { gap: 14px; }
.snd-master label span { color: var(--ink-3); font: 850 .64rem/1 var(--mono); letter-spacing: .13em; }
.snd-master label b { color: var(--ink-2); font: 750 .76rem/1 var(--mono); }
.sound-playback-warning { margin: 16px 0 0; padding: 12px 15px; border: 1px solid color-mix(in srgb, var(--bad) 42%, var(--frame)); border-radius: var(--r-in); color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--sunk)); line-height: 1.5; font-size: .82rem; }
.snd-grid { gap: 20px; }
.snd-mix, .snd-timer, .snd-scenes, .snd-files, .snd-empty { padding: clamp(18px, 2.2vw, 28px); }
.snd-empty { border-style: dashed; }
.snd-empty h2 { margin: 0 0 12px; }
.snd-empty p { color: var(--ink-3); font-size: .84rem; line-height: 1.65; }
.snd-empty code, .snd-console code { padding: 2px 6px; border: 1px solid var(--channel); border-radius: 5px; color: var(--sound-accent); background: var(--sunk); font-size: .85em; }
.snd-layers { gap: 10px; margin-top: 18px; }
.snd-layer { gap: 16px; padding: 14px 14px 14px 0; border: 1px solid color-mix(in srgb, var(--sound-color) 22%, var(--frame)); border-radius: var(--r-in); background: linear-gradient(100deg, color-mix(in srgb, var(--sound-color) 7%, var(--sunk)), var(--plate-2)); }
.snd-layer-mark { margin: 10px 0; border-radius: 0 5px 5px 0; background: var(--sound-color); box-shadow: 0 0 16px color-mix(in srgb, var(--sound-color) 55%, transparent); }
.snd-layer-id { gap: 5px; }
.snd-layer-id strong { color: var(--ink); font-size: .93rem; }
.snd-layer-id small { color: var(--ink-3); font: 700 .68rem/1.4 var(--mono); }
.snd-layer-level { gap: 10px; }
.snd-layer-level span { color: var(--ink-3); font: 850 .6rem/1 var(--mono); letter-spacing: .12em; }
.snd-layer-level b { color: var(--ink-2); font: 750 .74rem/1 var(--mono); }
.snd-layer-meter { background: color-mix(in srgb, var(--sound-color) 12%, var(--sunk)); }
.snd-layer-meter i { background: var(--sound-color); box-shadow: 0 0 10px color-mix(in srgb, var(--sound-color) 60%, transparent); transition: width .18s ease; }
.snd-layer-remove { border: 1px solid color-mix(in srgb, var(--bad) 24%, var(--frame)); border-radius: 10px; color: color-mix(in srgb, var(--bad) 80%, var(--ink)); background: var(--sunk); font-size: 1.1rem; }
.snd-blank { margin: 14px 0; color: var(--ink-3); font-size: .82rem; line-height: 1.55; }
.snd-layer-limit { margin: 14px 0 0; color: var(--ink-3); font: 700 .68rem/1.5 var(--mono); }
.snd-timer { gap: 16px; }
.snd-timer > label, .snd-dialog label { gap: 8px; color: var(--ink-3); font-size: .71rem; font-weight: 800; }
.snd-timer-note { gap: 8px; padding: 14px; border: 1px solid var(--channel); border-radius: var(--r-in); background: var(--sunk); }
.snd-timer-note p { margin: 0; color: var(--ink-3); font-size: .74rem; line-height: 1.6; }
.snd-timer-weekly strong { color: var(--gold); }
.snd-scene-grid { gap: 12px; margin-top: 18px; }
.snd-scene { border: 1px solid var(--channel); border-radius: var(--r-in); background: var(--sunk); }
.snd-scene-apply { padding: 18px; border: 0; color: var(--ink); background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--sound-accent) 8%, transparent), transparent 56%); }
.snd-scene-apply:hover { background-color: color-mix(in srgb, var(--sound-accent) 6%, var(--sunk)); }
.snd-scene-dots { gap: 5px; margin-bottom: 13px; }
.snd-scene-dots i { border-radius: 50%; background: var(--sound-color); box-shadow: 0 0 9px color-mix(in srgb, var(--sound-color) 65%, transparent); }
.snd-scene-apply strong { font-size: .98rem; }
.snd-scene-apply small { margin-top: 7px; color: var(--ink-3); font-size: .7rem; line-height: 1.45; }
.snd-scene-apply em { margin-top: auto; padding-top: 16px; color: var(--ink-4); font: 750 .61rem/1 var(--mono); letter-spacing: .07em; font-style: normal; }
.snd-scene-delete button { border: 1px solid var(--channel); border-radius: 8px; color: var(--ink-3); background: var(--plate-2); }
.snd-offline.is-on { border-color: color-mix(in srgb, var(--ok) 45%, var(--frame)); color: var(--ok); }
.snd-file-form { gap: 11px; padding-top: 14px; }
.snd-file-form > label, .snd-file-pair > label { gap: 7px; color: var(--ink-3); font-size: .67rem; font-weight: 800; }
.snd-file-pair { gap: 11px; }
.snd-file-form input[type="color"] { padding: 4px; }
.snd-file-check { gap: 9px; }
.snd-file-check input { accent-color: var(--ok); }
.snd-dialog { padding: 22px; border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--frame)); border-radius: var(--r); color: var(--ink); background: var(--plate-1); box-shadow: 0 30px 90px rgba(0,0,0,.65); }
.snd-dialog::backdrop { background: rgba(0,0,0,.76); backdrop-filter: blur(7px); }
.snd-dialog-head { gap: 14px; margin-bottom: 20px; }
.snd-dialog-head h2 { margin: 4px 0 0; }
.snd-dialog form { gap: 16px; }
.snd-library-grid { gap: 10px; }
.snd-library-item { gap: 13px; padding: 14px; border: 1px solid color-mix(in srgb, var(--sound-color) 24%, var(--frame)); border-radius: var(--r-in); color: var(--ink); background: linear-gradient(100deg, color-mix(in srgb, var(--sound-color) 6%, var(--sunk)), var(--sunk)); }
.snd-library-item > i { border-radius: 8px; background: var(--sound-color); box-shadow: 0 0 15px color-mix(in srgb, var(--sound-color) 48%, transparent); }
.snd-library-item span { gap: 5px; }
.snd-library-item small { color: var(--ink-3); font-size: .7rem; line-height: 1.4; }
.snd-library-item > b { color: var(--sound-color); font: 800 .6rem/1 var(--mono); letter-spacing: .1em; }
.snd-library-item:disabled { opacity: .45; }
.snd-mini { gap: 12px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--sound-accent) 34%, var(--frame)); border-radius: 16px; background: color-mix(in srgb, var(--plate-raise) 92%, transparent); backdrop-filter: blur(12px); box-shadow: 0 20px 45px rgba(0,0,0,.55); }
.snd-mini-toggle { border: 1px solid color-mix(in srgb, var(--sound-accent) 45%, var(--frame)); border-radius: 50%; color: var(--sound-accent); background: var(--sunk); font-size: 1rem; }
.snd-mini-body { gap: 3px; }
.snd-mini-body strong { color: var(--ink); font-size: .84rem; }
.snd-mini-body small { color: var(--ink-3); font: 700 .64rem/1 var(--mono); }
.snd-mini b { margin-left: auto; color: var(--ink); font: 800 .95rem/1 var(--mono); }
.offline-sound-body { padding: clamp(18px, 3vw, 42px); background: var(--void); }
.offline-sound-body .snd-page { margin-inline: auto; }
.offline-sound-head { gap: 10px; padding: 4px 0 15px; }
.offline-sound-head h1 { margin: 0; color: var(--ink); font-size: clamp(2.2rem, 5vw, 3.6rem); }
.offline-sound-head p { margin: 0; color: var(--ink-2); line-height: 1.55; }
.offline-sound-head .small-button { margin-top: 6px; }
@media (max-width: 760px) {
.snd-page { gap: 14px; padding-bottom: 92px; }
.snd-console { padding: 18px 14px; }
.snd-wave { inset-inline: 0; gap: 3px; opacity: .26; }
.snd-master { gap: 14px; }
.snd-mix, .snd-timer, .snd-scenes, .snd-files, .snd-empty { padding: 16px 14px; }
.snd-layer { gap: 10px 12px; padding: 12px 12px 14px 0; }
.snd-dialog { padding: 16px 13px; border-radius: 16px; }
}
body.nex-sound-on .main-content { padding-bottom: calc(var(--mx-tabbar) + var(--mx-player) + 20px); }
.snd-mini-body { text-decoration: none; }
.snd-mini-body:hover strong { color: var(--sound-accent, #72d6ff); }
.nex-loading::before { content: ''; background: linear-gradient(90deg, var(--blue), var(--gold)); animation: nex-progress 1.1s ease-in-out infinite; }
@keyframes nex-progress { 0% { transform: scaleX(0); } 55% { transform: scaleX(.7); } 100% { transform: scaleX(1); opacity: .2; } }
.snd-search { margin-top: 18px; }
.snd-search > span { color: var(--ink-3); font-size: 1.05rem; }
.snd-search input { padding-left: 42px !important; border-radius: 999px !important; }
.snd-groups { gap: 8px; margin-top: 16px; }
.snd-group { border: 1px solid var(--channel); border-radius: var(--r-in); background: var(--sunk); }
.snd-group > summary { gap: 12px; padding: 0 14px; }
.snd-group > summary:hover { background: var(--plate-2); }
.snd-group > summary strong { color: var(--ink); font-size: .9rem; }
.snd-group > summary b { padding: 3px 9px; border: 1px solid var(--channel); border-radius: 999px; color: var(--ink-3); font: 700 .66rem/1.4 var(--mono); }
.snd-group-dots { gap: 3px; }
.snd-group-dots i { border-radius: 4px; background: var(--sound-color, var(--blue)); }
.snd-group-arrow { color: var(--ink-4); font-size: 1.1rem; transition: transform .18s ease; }
.snd-group-body { gap: 2px; padding: 4px 8px 10px; }
.snd-track { gap: 12px; padding: 8px 6px 8px 0; border-radius: 10px; }
.snd-track:hover { background: var(--plate-2); }
.snd-track.is-off { opacity: .5; }
.snd-track-mark { border-radius: 0 4px 4px 0; background: var(--sound-color); }
.snd-track-text { gap: 3px; }
.snd-track-text strong { color: var(--ink); font-size: .86rem; font-weight: 600; }
.snd-track-text small { color: var(--ink-4); font: 700 .66rem/1.4 var(--mono); }
.snd-track-state { padding: 3px 8px; border: 1px solid var(--channel); border-radius: 999px; color: var(--ink-4); font: 800 .56rem/1.4 var(--mono); letter-spacing: .08em; }
.snd-track-edit > summary { border-radius: 9px; color: var(--ink-3); font-size: 1.05rem; }
.snd-track-edit > summary:hover { color: var(--ink); background: var(--sunk); }
.snd-track-edit[open] > summary { margin-bottom: 8px; padding: 4px 0; color: var(--sound-color); font-size: 0; }
.snd-track-edit[open] > summary::after { content: 'Kapat'; font-size: .74rem; font-weight: 800; letter-spacing: .04em; }
.snd-track-edit .snd-file-form { padding-top: 6px; }
.snd-track-edit > .small-button { margin-top: 10px; }
.snd-no-result { margin: 20px 0 0; color: var(--ink-3); font-size: .84rem; }
.snd-library-heading { margin: 10px 0 2px; color: var(--ink-4); font: 800 .62rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.snd-library-heading:first-child { margin-top: 0; }
@media (max-width: 760px) {
.snd-group-body { padding: 4px 6px 10px; }
}
:where(time, data, td, th, output, .task-points, [data-timer-clock], .kpi-value, .metric, .score, .mono, b, strong) { font-variant-numeric: tabular-nums; }
:where(.primary-button, .small-button, .ghost-button, .danger-button, .button-link) { gap: var(--space-2); border-radius: var(--radius-s); line-height: var(--lh-tight); text-decoration: none; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-s); }
@media (max-width: 760px) {
.mx-tabbar { padding-bottom: 0; }
.dock-item.is-active { color: var(--ink); }
.dock-item.is-active .dock-icon { color: var(--blue); }
.main-content { padding-bottom: calc(var(--dock-total) + var(--space-5)); }
}
.nex-toasts .toast.is-leaving { animation: nex-toast-out var(--dur) ease forwards; }
@keyframes nex-toast-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes nex-toast-out { to { opacity: 0; transform: translateY(-8px); } }
html.nex-slow .main-content > * { opacity: 0.35; transition: opacity var(--dur-fast) ease; }
html.nex-slow .main-content::after { content: ''; border-radius: var(--radius-l); background:
linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%) 0 0 / 200% 100%,
linear-gradient(var(--plate-raise) 0 0) 0 0 / 38% 28px no-repeat,
linear-gradient(var(--plate-1) 0 0) 0 52px / 100% 140px no-repeat,
linear-gradient(var(--plate-1) 0 0) 0 212px / 100% 140px no-repeat,
linear-gradient(var(--plate-1) 0 0) 0 372px / 100% 140px no-repeat; animation: nex-skeleton 1.2s linear infinite; }
@keyframes nex-skeleton { to { background-position: -200% 0, 0 0, 0 52px, 0 212px, 0 372px; } }
@media (prefers-reduced-motion: reduce) {
html.nex-slow .main-content::after { animation: none; }
.nex-toasts .toast.is-leaving { animation: none; }
}
.nex-pull.is-ready { color: var(--blue); border-color: var(--blue); }
.weekly-grid-scroll { scrollbar-width: thin; scrollbar-color: var(--channel) transparent; }
::view-transition-old(root) { animation: nex-vt-out 140ms ease both; }
::view-transition-new(root) { animation: nex-vt-in 200ms var(--ease-out) both; }
@keyframes nex-vt-out { to { opacity: 0; } }
@keyframes nex-vt-in { from { opacity: 0; transform: translateY(8px); } }
@property --score {
syntax: '<number>';
inherits: true;
initial-value: 0;
}
.home-score .score-ring { transition: --score 900ms var(--ease-out); }
@starting-style {
.home-score .score-ring { --score: 0; }
}
.is-completing { animation: nex-complete 360ms var(--ease-out) forwards; }
@keyframes nex-complete {
40% { transform: scale(0.98); opacity: 0.85; }
to { transform: scale(0.94); opacity: 0.25; }
}
.nex-confetti i { border-radius: 2px; opacity: 0.95; animation: nex-confetti 1.9s cubic-bezier(.25, .6, .4, 1) var(--d) forwards; }
.nex-confetti i:nth-child(3n) { border-radius: 50%; }
@keyframes nex-confetti {
to { transform: translate(var(--dx), 105vh) rotate(var(--r)); opacity: 0.6; }
}
[data-motion='soft'] .kinetic-score-burst { animation-duration: 0.4s; }
[data-motion='off'] *, [data-motion='off'] *::before, [data-motion='off'] *::after, [data-saver='on'] *, [data-saver='on'] *::before, [data-saver='on'] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
@media (prefers-reduced-motion: reduce) {
[data-motion='full'] ::view-transition-old(root), [data-motion='full'] ::view-transition-new(root) { animation: none; }
}
[data-saver='on'] * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html[data-saver='on'].nex-slow .main-content::after { animation: none; }
.appearance-body, .device-prefs-body { gap: var(--space-4); }
.appearance-settings .segmented { gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.appearance-settings .segmented legend { margin-bottom: var(--space-2); padding: 0; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.appearance-settings .segmented label { gap: var(--space-2); margin: 0; padding: 0 var(--space-4); border: 1px solid var(--channel); border-radius: var(--radius-pill); background: var(--plate-2); color: var(--ink-2); font-size: var(--fs-s); font-weight: 700; }
.appearance-settings .segmented label:has(input:checked) { border-color: var(--blue); color: var(--ink); box-shadow: inset 0 0 0 1px var(--blue-dim); }
.appearance-settings .segmented input { margin: 0; accent-color: var(--blue); }
.appearance-settings .form-grid { margin-top: 0; }
.appearance-settings .form-note { gap: var(--space-3); margin: 0; }
.device-prefs .pref-row { gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--hair); }
.device-prefs .pref-row > span { color: var(--ink); font-weight: 700; }
.segmented-buttons button.is-on { background: var(--plate-raise); color: var(--ink); box-shadow: var(--elev-1); }
.sync-settings-body, .api-settings-body { gap: var(--space-3); }
.sync-status { gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--sunk); }
.sync-status > div { gap: 2px; }
.sync-status strong { gap: var(--space-2); font-size: var(--fs-m); }
.sync-status strong i { border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); }
.sync-status.is-net strong i { background: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 18%, transparent); }
.sync-status.is-err strong i { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent); }
.sync-status small { color: var(--muted); font-size: var(--fs-s); }
.api-token-list { margin: 0; padding: 0; gap: var(--space-2); }
.api-token-list > li { gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--hair); border-radius: var(--radius-m); background: var(--sunk); }
.api-token-list > li > span { gap: 2px; }
.api-token-list > li > span small { color: var(--muted); font-size: var(--fs-s); }
.api-token-list form { margin: 0; }
.sync-peer-rename { gap: var(--space-2); }
.nb-page { gap: var(--space-5); padding-bottom: var(--space-7); }
.nb-kicker { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.nb-muted { color: var(--ink-3); font-size: var(--fs-s); line-height: var(--lh-body); margin: 0; }
.nb-muted a { color: var(--blue); }
.nb-link { color: var(--blue); font-weight: 700; font-size: var(--fs-s); text-decoration: none; }
.nb-link:hover { text-decoration: underline; }
.nb-center { margin-top: var(--space-4); }
.nb-head { gap: var(--space-4); padding-top: var(--space-4); }
.nb-head h1 { margin: var(--space-1) 0 0; font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--ink); }
.nb-lead { margin: var(--space-2) 0 0; color: var(--ink-2); font-size: var(--fs-m); line-height: var(--lh-body); }
.nb-head-actions { gap: var(--space-4); }
.nb-card { gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-l); border: 1px solid var(--frame); background: linear-gradient(180deg, var(--plate-1), var(--plate-2)); box-shadow: inset 0 1px 0 var(--lip), var(--elev-2); }
.nb-card-head { gap: var(--space-3); }
.nb-card-head h2 { margin: 2px 0 0; font-size: var(--fs-l); line-height: var(--lh-tight); color: var(--ink); letter-spacing: -0.01em; }
.nb-card-head p { margin-top: var(--space-1); }
.nb-card-foot { gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--hair); }
.nb-card-foot a { color: var(--blue); font-weight: 700; font-size: var(--fs-s); text-decoration: none; }
.nb-pill { padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--channel); background: var(--sunk); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 800; font-variant-numeric: tabular-nums; }
.nb-chip { padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid var(--channel); color: var(--ink-2); font-size: var(--fs-xs); font-style: normal; font-weight: 700; }
.nb-chip.is-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--channel)); }
.nb-chip.is-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--channel)); }
.nb-chip.is-bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--channel)); }
.nb-bar { border-radius: var(--radius-pill); background: var(--sunk); border: 1px solid var(--frame); }
.nb-bar i { border-radius: inherit; background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 50%, var(--gold))); transition: width var(--dur) var(--ease-out); }
.nb-bar.is-ok i { background: var(--ok); }
.nb-bar.is-warn i { background: var(--warn); }
.nb-ring { border-radius: 50%; background:
radial-gradient(closest-side, var(--plate-1) 78%, transparent 80% 100%),
conic-gradient(var(--blue) calc(var(--p) * 1%), var(--sunk) 0); box-shadow: inset 0 0 0 1px var(--frame); }
.nb-ring b { font-size: var(--fs-2xl); color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.nb-ring small { margin-top: var(--space-1); color: var(--ink-3); font-size: var(--fs-xs); font-weight: 700; }
.nb-metrics { gap: var(--space-3); }
.nb-metric { gap: 2px; padding: var(--space-4); border-radius: var(--radius-m); border: 1px solid var(--frame); background: var(--plate-1); box-shadow: inset 0 1px 0 var(--lip); color: inherit; text-decoration: none; }
.nb-metric small { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.nb-metric b { font-size: var(--fs-2xl); color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.nb-metric span { color: var(--ink-3); font-size: var(--fs-s); }
a.nb-metric:hover, .nb-metric.is-active { border-color: var(--blue-dim); }
.nb-metric.is-active { box-shadow: inset 0 1px 0 var(--lip), 0 0 0 1px var(--blue-dim); }
.nb-metric.is-bad b { color: var(--bad); }
.nb-metric.is-warn b { color: var(--warn); }
.nb-alerts { margin: 0; padding: 0; gap: var(--space-2); }
.nb-alert { gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); border: 1px solid color-mix(in srgb, var(--tone) 32%, var(--frame)); background: color-mix(in srgb, var(--tone) 7%, var(--plate-1)); }
.nb-alert > span { color: var(--tone); font-size: var(--fs-l); }
.nb-alert p { margin: 0; color: var(--ink); font-size: var(--fs-s); line-height: 1.45; }
.nb-alert a { padding: 0 var(--space-2); color: var(--tone); font-weight: 800; font-size: var(--fs-s); text-decoration: none; }
.nb-daybar { gap: var(--space-3); margin: 0 auto var(--space-4); max-width: calc(var(--page-max) - 2 * var(--page-gutter)); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: var(--radius-m); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--frame)); background: color-mix(in srgb, var(--warn) 7%, var(--plate-1)); }
.nb-daybar p { margin: 0; color: var(--ink-2); font-size: var(--fs-s); }
.nb-daybar b { color: var(--ink); }
.nb-daybar-dot { border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 20%, transparent); }
.nb-daybar .primary-button { padding: 0 var(--space-4); }
.nb-hello { gap: var(--space-4); padding-top: var(--space-4); }
.nb-hello-copy { gap: var(--space-4); }
.nb-hello h1 { margin: var(--space-1) 0; font-size: var(--fs-2xl); line-height: var(--lh-tight); color: var(--ink); letter-spacing: -0.02em; }
.nb-hello p { margin: 0; color: var(--ink-2); font-size: var(--fs-s); }
.nb-hello-photo { border-radius: var(--radius-m); border: 1px solid var(--frame); background: var(--plate-raise); color: var(--ink-2); font-weight: 800; }
.nb-hello-side { gap: var(--space-3); }
.nb-stat { column-gap: var(--space-1); padding: var(--space-2) var(--space-4); border-radius: var(--radius-m); border: 1px solid var(--frame); background: var(--plate-1); text-decoration: none; }
.nb-stat small { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
.nb-stat b { font-size: var(--fs-xl); color: var(--ink); font-variant-numeric: tabular-nums; }
.nb-stat span { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 700; }
.nb-home-grid { gap: var(--space-4); }
.nb-home-grid--even > .panel { margin: 0; }
.nb-priorities { margin: 0; padding: 0; gap: var(--space-2); }
.nb-priorities li { gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); border: 1px solid var(--hair); background: var(--sunk); }
.nb-priorities li > div { gap: 2px; }
.nb-priorities strong { color: var(--ink); font-size: var(--fs-m); line-height: 1.35; }
.nb-priorities a { text-decoration: none; }
.nb-priorities a:hover strong { color: var(--blue); }
.nb-priorities small { color: var(--ink-3); font-size: var(--fs-xs); }
.nb-priorities li.is-done strong { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.nb-check-form { margin: 0; }
.nb-checkbox { padding: 0; border-radius: 10px; border: 1.5px solid var(--ink-4); background: var(--plate-1); color: var(--ink-2); font: inherit; font-weight: 800; font-size: var(--fs-s); }
button.nb-checkbox:hover { border-color: var(--blue); color: var(--blue); }
.nb-checkbox.is-auto { border-style: dashed; }
li.is-done > .nb-checkbox, li.is-done > form .nb-checkbox, li.is-done .nb-checkbox { border-color: var(--ok); border-style: solid; background: color-mix(in srgb, var(--ok) 16%, var(--plate-1)); color: var(--ok); }
.nb-cands { margin: 0; padding: 0; gap: var(--space-2); }
.nb-cand { gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); border-radius: var(--radius-m); border: 1px solid var(--hair); background: var(--sunk); }
.nb-cand::before { content: ''; border-radius: 0 3px 3px 0; background: var(--area-color); }
.nb-cand input { opacity: 0; }
.nb-cand-num { border-radius: 9px; border: 1.5px solid var(--ink-4); color: var(--ink); font-weight: 800; font-size: var(--fs-s); }
.nb-cand-text { gap: 2px; }
.nb-cand-text strong { color: var(--ink); font-size: var(--fs-s); }
.nb-cand-text small { color: var(--ink-3); font-size: var(--fs-xs); }
.nb-cand:has(input:checked) { border-color: var(--blue-dim); background: color-mix(in srgb, var(--blue) 8%, var(--sunk)); }
.nb-cand:has(input:checked) .nb-cand-num { border-color: var(--blue); background: var(--blue); color: var(--plate-1); }
.nb-cand:has(input:checked) .nb-cand-num:empty::after { content: '✓'; }
.nb-cand:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.nb-cand.is-full:not(:has(input:checked)) { opacity: 0.5; }
.nb-pick-form, .nb-close-form { gap: var(--space-4); }
.nb-launch-mini-body { gap: var(--space-5); }
.nb-mini-list { margin: 0; padding: 0; gap: var(--space-2); }
.nb-mini-list li { gap: var(--space-2); color: var(--ink-2); font-size: var(--fs-s); }
.nb-mini-list li small { color: var(--ink-3); font-size: var(--fs-xs); }
.nb-mini-list li > i { border-radius: 50%; border: 1.5px solid var(--area-color); background: conic-gradient(var(--blue) calc(var(--g) * 360deg), transparent 0); }
.nb-mini-list li.is-done { color: var(--ok); }
.nb-vel-grid { gap: var(--space-3); }
.nb-vel { gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-m); border: 1px solid var(--hair); background: var(--sunk); }
.nb-vel header { gap: var(--space-2); color: var(--ink-2); font-size: var(--fs-s); font-weight: 700; }
.nb-vel strong { font-size: var(--fs-3xl); line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.nb-vel.is-up strong { color: var(--ok); }
.nb-vel.is-down strong { color: var(--warn); }
.nb-vel > small { color: var(--ink-3); font-size: var(--fs-xs); }
.nb-spark { gap: 6px; margin-top: var(--space-2); }
.nb-spark i { border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--ink-4) 70%, transparent); }
.nb-spark i.is-now { background: var(--blue); }
.nb-balance-list { margin: 0; padding: 0; gap: var(--space-3); }
.nb-balance-list li { gap: var(--space-3); font-size: var(--fs-s); }
.nb-balance-list .nb-bar i { background: var(--area-color, var(--blue)); }
.nb-balance-list small { color: var(--ink-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.nb-balance-list li.is-neglected small { color: var(--warn); font-weight: 700; }
.nb-area-name { gap: var(--space-2); color: var(--ink-2); font-weight: 700; }
.nb-area-name i { border-radius: 50%; background: var(--area-color, var(--blue)); }
.nb-form { gap: var(--space-4); }
.nb-form label, .nb-free { gap: var(--space-1); }
.nb-form label small { color: var(--ink-3); font-weight: 500; font-size: var(--fs-xs); }
.nb-form--grid { gap: var(--space-4); }
.nb-toggle { gap: var(--space-3); color: var(--ink-2); font-weight: 600; }
.nb-toggle input { accent-color: var(--blue); }
.nb-fieldset { border: 1px solid var(--hair); border-radius: var(--radius-m); padding: var(--space-4); margin: 0; gap: var(--space-3); }
.nb-fieldset legend { padding: 0 var(--space-2); color: var(--ink); font-weight: 800; font-size: var(--fs-s); }
.nb-free:has(.nb-num) { gap: var(--space-3); }
.nb-num { border-radius: 9px; background: var(--plate-raise); border: 1px solid var(--frame); color: var(--ink); font-weight: 800; }
.nb-form-foot { gap: var(--space-3); }
.nb-details summary { color: var(--ink-2); font-weight: 700; font-size: var(--fs-s); gap: var(--space-2); }
.nb-details[open] summary { margin-bottom: var(--space-3); }
.nb-icon-button { padding: 0; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--ink-3); font: inherit; font-size: var(--fs-m); }
.nb-icon-button:hover { border-color: var(--channel); color: var(--ink); }
.ghost-button.is-danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--channel)); }
.nb-launch-hero { gap: var(--space-6); }
.nb-launch-facts { gap: var(--space-2) var(--space-6); }
.nb-launch-facts b { font-size: var(--fs-2xl); color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.nb-launch-facts span { color: var(--ink-3); font-size: var(--fs-s); }
.nb-launch-hero-actions { gap: var(--space-3); }
.nb-launch-groups { gap: var(--space-4); }
.nb-items { margin: 0; padding: 0; gap: 2px; }
.nb-items li { gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--hair); }
.nb-items li:last-child { border-bottom: 0; }
.nb-item-text { gap: 4px; }
.nb-item-text strong { color: var(--ink); font-size: var(--fs-s); line-height: 1.4; }
.nb-item-text small { color: var(--ink-3); font-size: var(--fs-xs); }
.nb-item-text small a { color: var(--blue); text-decoration: none; }
.nb-items li.is-done strong { color: var(--ink-3); text-decoration: line-through; }
.nb-item-actions { gap: 2px; opacity: 0.55; transition: opacity var(--dur-fast); }
.nb-items li:hover .nb-item-actions, .nb-item-actions:focus-within { opacity: 1; }
.nb-item-actions form { margin: 0; }
.nb-tabs { gap: var(--space-2); }
.nb-tabs a { gap: var(--space-2); padding: 0 var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--channel); color: var(--ink-2); font-weight: 700; font-size: var(--fs-s); text-decoration: none; }
.nb-tabs a small { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nb-tabs a.is-active { border-color: var(--blue); color: var(--ink); background: color-mix(in srgb, var(--blue) 10%, transparent); }
.nb-triage-form { gap: var(--space-4); }
.nb-select-bar { gap: var(--space-3); }
.nb-groups { gap: var(--space-3); }
.nb-group { margin: 0; padding: 0 var(--space-4) var(--space-3); border-radius: var(--radius-m); border: 1px solid var(--frame); border-left: 3px solid var(--area-color, var(--blue)); background: var(--plate-1); }
.nb-group legend { padding: 0; }
.nb-group ul { margin: 0; padding: 0; gap: 2px; }
.nb-group-head, .nb-unit { gap: var(--space-3); }
.nb-group-head { border-bottom: 1px solid var(--hair); margin-bottom: var(--space-1); }
.nb-group-head input, .nb-unit input { accent-color: var(--blue); }
.nb-group-title b { color: var(--ink); font-size: var(--fs-m); }
.nb-group-title small { color: var(--ink-3); font-size: var(--fs-xs); }
.nb-unit strong { color: var(--ink-2); font-size: var(--fs-s); font-weight: 700; }
.nb-unit small { color: var(--ink-3); font-size: var(--fs-xs); }
.nb-unit:has(input:checked) strong { color: var(--ink); }
.nb-group:has(.nb-unit input:checked) { border-color: var(--blue-dim); border-left-color: var(--area-color, var(--blue)); }
.nb-actionbar { gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-l); border: 1px solid var(--blue-dim); background: color-mix(in srgb, var(--plate-1) 94%, transparent); backdrop-filter: blur(14px); box-shadow: var(--elev-3); }
.nb-actionbar-row { gap: var(--space-3); }
.nb-actionbar-row strong { color: var(--ink); font-size: var(--fs-l); }
.nb-actionbar-grid { gap: var(--space-3); }
.nb-actionbar.is-empty { border-color: var(--frame); }
.nb-plan-box { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--hair); border-radius: var(--radius-m); gap: var(--space-3) var(--space-4); }
.nb-plan-box legend { padding: 0 var(--space-2); color: var(--ink); font-weight: 800; font-size: var(--fs-s); }
.nb-plan-box label:not(.nb-toggle) { gap: var(--space-1); }
.nb-plan-flags { gap: 0; }
.nb-plan-flags .nb-toggle { font-size: var(--fs-s); }
.nb-plan-box .primary-button { padding-inline: var(--space-5); }
.nb-quick-box { gap: var(--space-2); }
.nb-quick-box .nb-kicker { margin-right: var(--space-2); }
.nb-quick-box .is-danger { margin-left: auto; }
.nb-plan-days { gap: var(--space-3); }
.nb-plan-day { gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); border: 1px solid var(--hair); background: var(--sunk); }
.nb-plan-day header { gap: var(--space-2); }
.nb-plan-day header b { color: var(--ink); }
.nb-plan-day header small { color: var(--ink-3); font-size: var(--fs-xs); }
.nb-plan-day ul { margin: 0; padding: 0; gap: 4px; }
.nb-plan-day li { gap: var(--space-2); color: var(--ink-2); font-size: var(--fs-s); }
.nb-plan-day li i { border-radius: 50%; background: var(--area-color); }
.nb-preview-actions { gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-m); background: color-mix(in srgb, var(--plate-1) 94%, transparent); backdrop-filter: blur(12px); border: 1px solid var(--frame); }
.nb-two-col { gap: var(--space-4); }
.nb-week-strip { gap: var(--space-4); margin: 0 auto var(--space-4); max-width: calc(var(--page-max) - 2 * var(--page-gutter)); padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); border: 1px solid var(--frame); background: var(--plate-1); }
.nb-week-strip ol { gap: var(--space-4); margin: 0; padding: 0; }
.nb-week-strip li { gap: var(--space-2); color: var(--ink); font-size: var(--fs-s); font-weight: 600; }
.nb-week-strip li b { border-radius: 7px; background: var(--plate-raise); border: 1px solid var(--frame); font-size: var(--fs-xs); }
.nb-week-strip li.is-done { color: var(--ink-3); text-decoration: line-through; }
.mission-triage-link { margin-left: auto; padding-left: var(--space-3); }
.nb-challenge-launch { padding: var(--space-4) var(--space-5); }
.nb-challenge-launch summary .nb-kicker { color: var(--blue); }
@media (max-width: 980px) {
}
@media (max-width: 860px) {
.nb-vel .nb-spark { margin: 0; }
}
@media (max-width: 760px) {
.nb-page { gap: var(--space-4); }
.nb-card { padding: var(--space-4); border-radius: var(--radius-m); }
.nb-head h1 { font-size: var(--fs-2xl); }
.nb-hello { padding-top: var(--space-2); }
.nb-hello h1 { font-size: var(--fs-xl); }
.nb-alert { padding: var(--space-3); gap: var(--space-1) var(--space-3); }
.nb-alert a { padding: 0; }
.nb-metric b { font-size: var(--fs-xl); }
.nb-launch-hero { gap: var(--space-4); }
.nb-launch-facts { gap: var(--space-2); }
.nb-launch-mini-body { gap: var(--space-4); }
.nb-ring b { font-size: var(--fs-xl); }
.nb-quick-box .is-danger { margin-left: 0; }
.nb-actionbar { padding: var(--space-3); }
.nb-item-actions { opacity: 1; }
}
.mission-pulse-grid article span { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.mission-pulse-grid article strong { font-family: var(--sans); font-size: var(--fs-2xl); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mission-pulse-grid article.danger strong { background: none; color: var(--bad); }
.mission-pulse-grid article.progress strong { background: none; color: var(--blue); }
.nb-recover-note { margin: 0 0 var(--space-4); }
.nb-subhead { margin: var(--space-4) 0 var(--space-2); color: var(--text-2); font-size: var(--fs-s); font-weight: 700; }
.nb-restore-list, .nb-history-list { gap: var(--space-2); }
.nb-restore-list li .nb-unit { padding: var(--space-3); border-radius: var(--radius-m); border: 1px solid var(--line-soft); background: var(--surface-0); }
.nb-history-list li { gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line-soft); }
.nb-history-list li:last-child { border-bottom: 0; }
.nb-history-list strong { color: var(--text-1); font-size: var(--fs-s); }
.nb-history-list small { color: var(--text-3); font-size: var(--fs-xs); }
.nb-restore-actions { margin-top: var(--space-4); }
.nb-history { margin-top: var(--space-4); }
.nb-plan-day li small { color: var(--text-3); font-size: var(--fs-xs); }
@font-face {
font-family: 'Sora';
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url('fonts/sora-latin-ext-wght-normal.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Sora';
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url('fonts/sora-latin-wght-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('fonts/inter-latin-wght-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
[data-skin='cam'] {
--font-display: 'Sora', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
--display-stretch: 100%;
--display-weight: 650;
--sans: var(--font-body);
--mono: var(--font-body);
--fs-xs: 0.75rem;
--fs-s: 0.875rem;
--fs-m: 0.96875rem;
--fs-l: 1.125rem;
--fs-xl: 1.3125rem;
--fs-2xl: 1.625rem;
--fs-3xl: 2.125rem;
--fs-4xl: 2.75rem;
--lh-tight: 1.18;
--lh-body: 1.55;
--kicker-track: 0.14em;
--radius-s: 12px;
--radius-m: 16px;
--radius-l: 22px;
--radius-pill: 999px;
--r: var(--radius-l);
--r-in: var(--radius-m);
--r-s: var(--radius-s);
--radius: var(--radius-l);
--control-h: 44px;
--tap: 44px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--card-pad: 24px;
--page-gutter: 36px;
--page-max: 1280px;
--edge-light: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 rgba(0, 0, 0, 0.18);
--lip: var(--glass-hi);
--brush: none;
--rim: linear-gradient(135deg, color-mix(in srgb, var(--accent) 80%, transparent) 0%, transparent 34%, transparent 66%, color-mix(in srgb, var(--accent-2) 80%, transparent) 100%);
--icon-size: 20px;
--icon-stroke: 1.6;
--icon-cap: round;
--icon-join: round;
--icon-fill: none;
--dur-fast: 120ms;
--dur: 220ms;
--dur-slow: 420ms;
--ease-out: cubic-bezier(.2, .8, .2, 1);
--ease-spring: cubic-bezier(.34, 1.4, .64, 1);
--dock-h: 64px;
}
@media (max-width: 760px) {
[data-skin='cam'] {
--card-pad: 18px;
--page-gutter: 16px;
--fs-3xl: 1.75rem;
--fs-4xl: 2.25rem;
}
}
[data-skin='cam'] {
--canvas: var(--void);
--surface-0: var(--sunk);
--surface-1: var(--plate-1);
--surface-2: var(--plate-raise);
--line: var(--channel);
--line-soft: var(--hair);
--text-1: var(--ink);
--text-2: var(--ink-2);
--text-3: var(--ink-3);
--text-4: var(--ink-4);
--accent: var(--blue);
--accent-2: var(--gold);
--accent-dim: var(--blue-dim);
--area-creative: var(--creative);
--area-content: var(--content);
--area-funnel: var(--funnel);
--area-extra: var(--extra);
--area-business: var(--blue);
--glow-1: color-mix(in srgb, var(--aura-1) 42%, transparent);
--glow-2: color-mix(in srgb, var(--aura-2) 36%, transparent);
--strategy: var(--ok);
--skill: #A78BFA;
}
[data-skin='cam'] {
color-scheme: dark;
--void: #07060F;
--void-2: #0B0A17;
--sunk: rgba(255, 255, 255, 0.035);
--plate-1: rgba(255, 255, 255, 0.055);
--plate-2: rgba(255, 255, 255, 0.04);
--plate-raise: rgba(255, 255, 255, 0.085);
--channel: rgba(255, 255, 255, 0.12);
--hair: rgba(255, 255, 255, 0.075);
--hair-soft: rgba(255, 255, 255, 0.05);
--frame: rgba(255, 255, 255, 0.12);
--glass-hi: rgba(255, 255, 255, 0.16);
--glass-solid: rgba(16, 13, 32, 0.78);
--glass-blur: blur(22px) saturate(1.5);
--ink: #F6F4FF;
--ink-2: rgba(236, 233, 255, 0.78);
--ink-3: rgba(224, 220, 255, 0.56);
--ink-4: rgba(218, 214, 255, 0.36);
--steel-1: #F6F4FF;
--steel-2: #E4E0FF;
--steel-3: #C9C3EE;
--on-accent: #0A0716;
--on-bad: #0A0716;
--ok: #4ADE80;
--warn: #FBBF24;
--bad: #FB7185;
--teal: #2DD4BF;
--creative: #818CF8;
--content: #34D399;
--funnel: #FBBF24;
--extra: #FB7185;
--elev-1: 0 10px 30px -14px rgba(0, 0, 0, 0.7);
--elev-2: 0 18px 44px -18px rgba(0, 0, 0, 0.75);
--elev-3: 0 34px 80px -24px rgba(0, 0, 0, 0.85);
--shadow: var(--elev-1);
--shadow-deep: var(--elev-2);
--blue: #A78BFA;
--blue-dim: rgba(167, 139, 250, 0.28);
--gold: #22D3EE;
--gold-dim: rgba(34, 211, 238, 0.26);
--aura-1: #7C3AED;
--aura-2: #06B6D4;
--aura-3: #DB2777;
}
[data-skin='cam'][data-theme='aurora'] { --blue: #34D399; --blue-dim: rgba(52, 211, 153, 0.26); --gold: #A78BFA; --gold-dim: rgba(167, 139, 250, 0.26); --aura-1: #059669; --aura-2: #7C3AED; --aura-3: #0EA5E9; }
[data-skin='cam'][data-theme='gunbatimi'] { --blue: #F472B6; --blue-dim: rgba(244, 114, 182, 0.26); --gold: #FB923C; --gold-dim: rgba(251, 146, 60, 0.26); --aura-1: #DB2777; --aura-2: #EA580C; --aura-3: #7C3AED; }
[data-skin='cam'][data-theme='okyanus'] { --blue: #60A5FA; --blue-dim: rgba(96, 165, 250, 0.26); --gold: #2DD4BF; --gold-dim: rgba(45, 212, 191, 0.26); --aura-1: #1D4ED8; --aura-2: #0D9488; --aura-3: #0EA5E9; }
[data-skin='cam'][data-theme='buz'] { --blue: #BAE6FD; --blue-dim: rgba(186, 230, 253, 0.24); --gold: #E9D5FF; --gold-dim: rgba(233, 213, 255, 0.22); --aura-1: #334155; --aura-2: #475569; --aura-3: #64748B; }
[data-skin='cam'] { background: var(--canvas); scrollbar-color: var(--line) transparent; }
[data-skin='cam'] body {
background: transparent;
color: var(--text-1);
font-family: var(--font-body);
font-size: var(--fs-m);
line-height: var(--lh-body);
font-feature-settings: 'cv11', 'ss01';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[data-skin='cam'] body::before {
content: '';
position: fixed;
inset: -10vmax;
z-index: -1;
pointer-events: none;
background:
radial-gradient(42vmax 34vmax at 82% 6%, color-mix(in srgb, var(--aura-1) 55%, transparent), transparent 70%),
radial-gradient(38vmax 32vmax at 6% 92%, color-mix(in srgb, var(--aura-2) 46%, transparent), transparent 70%),
radial-gradient(30vmax 26vmax at 44% 52%, color-mix(in srgb, var(--aura-3) 20%, transparent), transparent 72%);
transform: translateZ(0);
}
[data-skin='cam'][data-scheme='light'] body::before { opacity: 0.95; }
[data-skin='cam'][data-saver='on'] body::before { opacity: 0.6; }
::selection { background: color-mix(in srgb, var(--accent) 38%, transparent); color: var(--text-1); }
:where(h1, h2, h3) { font-family: var(--font-display); font-weight: 650; line-height: var(--lh-tight); letter-spacing: -0.015em; color: var(--text-1); }
:where(h1) { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.03em; }
:where(h2) { font-size: var(--fs-xl); }
:where(h3) { font-size: var(--fs-l); }
:where(strong, b) { font-weight: 650; }
:where(small) { font-size: var(--fs-s); }
:where(code, kbd, pre) { font-family: var(--font-mono); font-size: 0.9em; }
:where(a) { color: inherit; text-decoration: none; }
:where(p) a, .nx-link { color: var(--accent); text-decoration: none; font-weight: 600; }
:where(p) a:hover, .nx-link:hover { text-decoration: underline; text-underline-offset: 3px; }
:where(td, .nb-metric b, .nb-vel strong, time, .score-ring strong) { font-variant-numeric: tabular-nums; }
:where(:focus) { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); }
:where(hr) { border: 0; border-top: 1px solid var(--line-soft); margin: var(--space-5) 0; }
:where(p) { line-height: var(--lh-body); }
html[data-skin='cam'] { font-size: 16px; }
@media (min-width: 1000px) { html[data-skin='cam'] { font-size: 16.5px; } }
@media (min-width: 1800px) { html[data-skin='cam'] { font-size: 17px; } }
@media (min-width: 2300px) { html[data-skin='cam'] { font-size: 18px; } }
:is(.page-title .eyebrow, .section-band > span) { text-transform: uppercase; letter-spacing: var(--kicker-track); }
:is(.panel-head h2, .settings-section-heading h2, .card-head h3, .zone-card > h3, .zone-card.creative-meta-editor > summary, .funnel-save-template h3, .challenge-planner > summary b) {
text-transform: none;
letter-spacing: -0.005em;
}
.main-content { background: transparent; }
.sidebar {
padding: 22px 14px 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
border-right: 1px solid var(--line-soft);
box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
scrollbar-width: thin;
}
[data-scheme='light'] .sidebar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4)); border-right-color: rgba(255, 255, 255, 0.8); }
.brand { gap: 12px; padding: 2px 8px 22px; margin-bottom: 8px; }
.brand-mark { width: 40px; height: 40px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface-1); box-shadow: var(--edge-light), 0 0 24px -8px var(--accent); }
.brand strong { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 0.12em; color: var(--text-1); }
.brand small { margin-top: 2px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.nav-list { gap: 2px; }
.nav-group { gap: 1px; }
.nav-group > span { padding: 18px 12px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-4); }
.nav-item {
position: relative;
gap: 12px;
min-height: 40px;
padding: 0 12px;
border-radius: 12px;
border: 1px solid transparent;
color: var(--text-2);
font-size: 14.5px;
font-weight: 550;
transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.nav-icon { color: var(--text-3); }
.nav-item:hover { background: var(--surface-1); color: var(--text-1); }
.nav-item.active {
border-color: color-mix(in srgb, var(--accent) 34%, transparent);
background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 6%, transparent));
color: var(--text-1);
box-shadow: var(--edge-light), 0 0 22px -10px var(--accent);
}
.nav-item.active .nav-icon { color: var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent)); }
.sidebar-bottom { gap: 10px; padding-top: 16px; }
.install-app-button { gap: 12px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-1); box-shadow: var(--edge-light); color: var(--text-1); }
.install-app-button > span:first-child { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.install-app-button strong { font-size: 13.5px; }
.install-app-button small { font-size: 12px; color: var(--text-3); }
.profile-card { gap: 10px; padding: 10px; border-radius: 16px; border: 1px solid var(--line-soft); background: var(--surface-0); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 40%, transparent), color-mix(in srgb, var(--accent-2) 40%, transparent)); border: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--text-1); }
.profile-card strong { font-size: 14px; color: var(--text-1); }
.exit-link { padding: 5px 10px; border-radius: var(--radius-pill); border: 1px solid var(--line); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--text-3); }
.exit-link:hover { color: var(--bad); border-color: var(--bad); }
:is(.command-trigger, .notification-trigger, .mobile-menu-trigger, .timer-pill button) {
border: 1px solid var(--line);
background: var(--glass-solid);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
box-shadow: var(--edge-light), var(--elev-1);
color: var(--text-2);
}
:is(.command-trigger, .notification-trigger, .mobile-menu-trigger):hover { color: var(--text-1); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.command-trigger { gap: 10px; padding: 0 8px 0 14px; border-radius: var(--radius-pill); font-size: var(--fs-s); }
.command-trigger b { font-weight: 550; }
.command-trigger kbd { padding: 3px 7px; border-radius: 7px; border: 1px solid var(--line-soft); background: var(--surface-0); font-size: 11px; color: var(--text-3); }
.notification-trigger { border-radius: 50%; }
.notification-trigger b { border-radius: var(--radius-pill); background: var(--bad); color: var(--on-bad); font-size: 11px; font-weight: 700; box-shadow: 0 0 0 2px var(--canvas), 0 0 12px var(--bad); }
.mobile-menu-trigger { border-radius: 50%; }
.mobile-menu-trigger span { background: var(--text-1); }
.timer-pill button { gap: 10px; padding: 0 14px; border-radius: var(--radius-pill); border-color: color-mix(in srgb, var(--teal) 40%, var(--line)); }
.timer-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px var(--teal); animation: cam-pulse 1.8s ease-in-out infinite; }
.timer-pill b { font-family: var(--font-display); font-size: 15px; font-weight: 650; color: var(--text-1); font-variant-numeric: tabular-nums; }
.timer-pill span { font-size: 12.5px; color: var(--text-3); }
@keyframes cam-pulse { 50% { opacity: 0.35; } }
.sidebar-scrim { background: rgba(5, 3, 14, 0.5); }
.notification-drawer {
gap: 16px;
padding: 22px;
border-left: 1px solid var(--line);
background: var(--glass-solid);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
box-shadow: var(--elev-3);
}
.notification-head h2 { font-size: var(--fs-l); }
.notification-head button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-1); color: var(--text-2); font-size: 18px; }
.notification-list { gap: 8px; }
.notification-item { gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid var(--line-soft); background: var(--surface-1); box-shadow: var(--edge-light); }
.notification-item strong { color: var(--text-1); font-size: var(--fs-s); }
.notification-item p { margin-top: 4px; color: var(--text-3); font-size: var(--fs-s); }
.notification-item.read { opacity: 0.55; }
.notification-item button { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-1); color: var(--ok); }
.command-palette { border-radius: 24px; border: 1px solid var(--line); background: var(--glass-solid); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); color: var(--text-1); box-shadow: var(--edge-light), var(--elev-3); }
.command-palette::backdrop { background: rgba(5, 3, 14, 0.5); }
.command-search { gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); color: var(--text-3); }
.command-search input { border: 0; background: none; font-size: var(--fs-l); color: var(--text-1); outline: none; box-shadow: none; }
.command-search button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-1); color: var(--text-2); }
.command-results { gap: 2px; padding: 8px; }
.command-results > p { padding: 16px; color: var(--text-3); }
.command-results a { gap: 12px; padding: 12px 14px; border-radius: 13px; color: var(--text-2); }
.command-results a:hover, .command-results a:focus-visible { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text-1); }
.toast {
--tone: var(--accent);
gap: 12px;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid color-mix(in srgb, var(--tone) 40%, var(--line));
background: var(--glass-solid);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
box-shadow: var(--edge-light), var(--elev-3), 0 0 28px -12px var(--tone);
color: var(--text-1);
font-size: var(--fs-s);
line-height: 1.45;
animation: cam-toast-in var(--dur) var(--ease-out);
}
.toast::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 10px var(--tone); }
.toast.success { --tone: var(--ok); }
.toast.error { --tone: var(--bad); }
.toast.warning { --tone: var(--warn); }
.nex-toasts .toast.is-leaving { animation: cam-toast-out var(--dur) ease forwards; }
.toast-undo { color: var(--accent); font-weight: 700; }
.toast-close { color: var(--text-3); font-size: 18px; line-height: 1; }
@keyframes cam-toast-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
@keyframes cam-toast-out { to { opacity: 0; transform: translateY(-8px); } }
html.nex-slow .main-content::after {
border-radius: 22px;
background:
linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.07) 50%, transparent 70%) 0 0 / 200% 100%,
linear-gradient(var(--surface-1) 0 0) 0 0 / 38% 30px no-repeat,
linear-gradient(var(--surface-1) 0 0) 0 54px / 100% 150px no-repeat,
linear-gradient(var(--surface-1) 0 0) 0 222px / 100% 150px no-repeat,
linear-gradient(var(--surface-1) 0 0) 0 390px / 100% 150px no-repeat;
animation: cam-skeleton 1.2s linear infinite;
}
@keyframes cam-skeleton { to { background-position: -200% 0, 0 0, 0 54px, 0 222px, 0 390px; } }
.nex-pull { border-radius: 50%; border: 1px solid var(--line); background: var(--glass-solid); box-shadow: var(--elev-2); color: var(--text-2); }
.nex-pull.is-ready { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 18px -4px var(--accent); }
@media (max-width: 1100px), (hover: none) and (pointer: coarse) {
.sidebar { background: var(--glass-solid); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
}
@media (max-width: 1100px), (hover: none) and (pointer: coarse) {
.mobile-dock {
border-top: 1px solid var(--line);
background: var(--glass-solid);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
box-shadow: inset 0 1px 0 var(--glass-hi);
}
.dock-item { color: var(--text-3); font-size: 11px; font-weight: 600; }
.dock-icon { display: grid; place-items: center; width: 52px; height: 30px; border-radius: var(--radius-pill); transition: background var(--dur-fast), color var(--dur-fast); }
.dock-icon .nx-icon { --icon-size: 22px; }
.dock-item.is-active { color: var(--text-1); }
.dock-item.is-active .dock-icon { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); box-shadow: 0 0 18px -6px var(--accent); }
}
:is(.nav-item, .dock-item)[data-nav='challenges'] { --rc: #E6C75A; }
:is(.nav-item, .dock-item)[data-nav='content'] { --rc: #4FE3A0; }
:is(.nav-item, .dock-item)[data-nav='creatives'] { --rc: #7C9DFF; }
:is(.nav-item, .dock-item)[data-nav='dashboard'] { --rc: #6EA8FF; }
:is(.nav-item, .dock-item)[data-nav='extra'] { --rc: #FF7A8A; }
:is(.nav-item, .dock-item)[data-nav='funnel'] { --rc: #FFBD65; }
:is(.nav-item, .dock-item)[data-nav='kpi'] { --rc: #5FE09A; }
:is(.nav-item, .dock-item)[data-nav='launch'] { --rc: #F5A524; }
:is(.nav-item, .dock-item)[data-nav='mission'] { --rc: #B692FF; }
:is(.nav-item, .dock-item)[data-nav='reports'] { --rc: #3FD0E6; }
:is(.nav-item, .dock-item)[data-nav='settings'] { --rc: #A3B1CC; }
:is(.nav-item, .dock-item)[data-nav='sound'] { --rc: #46DFB2; }
:is(.nav-item, .dock-item)[data-nav='triage'] { --rc: #FF8F6B; }
:is(.nav-item, .dock-item)[data-nav='weekly'] { --rc: #FF7AD9; }
.nav-item .nav-label, .nav-item .nav-icon, .dock-item .dock-label, .dock-item .dock-icon { color: var(--rc, var(--accent)); }
.nav-item.active { border-color: color-mix(in srgb, var(--rc) 35%, transparent); background: color-mix(in srgb, var(--rc) 13%, transparent); }
.nav-item.active .nav-icon { color: var(--rc); background: color-mix(in srgb, var(--rc) 13%, transparent); filter: none; }
.dock-item.is-active .dock-icon { color: var(--rc); border-color: color-mix(in srgb, var(--rc) 45%, transparent); background: color-mix(in srgb, var(--rc) 18%, transparent); box-shadow: none; }
.dock-item.is-active .dock-label { color: var(--rc); }
:is(.nav-item, .dock-item)[data-nav='companion'] { --rc: #B692FF; }
.page-title, .beta-title { gap: var(--space-4); margin: var(--space-5) 0 var(--space-6); }
.page-title h1 { margin-top: var(--space-1); }
.page-title p { color: var(--text-2); }
:is(.kicker, .eyebrow, .nb-kicker) {
display: inline-block;
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: var(--kicker-track);
text-transform: uppercase;
color: color-mix(in srgb, var(--accent) 70%, var(--text-2));
}
:is(.panel, .settings-section, .catalog-card, .challenge-card, .data-panel, .list-panel, .chart-panel, .quote-panel, .score-card, .gantt-panel, .funnel-panel, .auth-card, .quality-template-card, .session-device-card, .new-template-card, .data-action-card, .nb-card, .detail-zone, .focus-panel, .premium-form-panel, .form-panel, .settings-panel) {
border-radius: var(--radius-l);
border: 1px solid var(--line);
background: linear-gradient(160deg, var(--plate-raise), var(--plate-2) 60%);
box-shadow: var(--edge-light), var(--elev-1);
color: var(--text-2);
}
.panel, .settings-section, .data-panel, .list-panel, .chart-panel, .score-card, .funnel-panel, .catalog-card, .quality-template-card, .form-panel, .settings-panel, .premium-form-panel, .focus-panel { padding: var(--card-pad); }
.panel + .panel, .settings-section + .settings-section { margin-top: var(--space-4); }
:is(.panel-head, .card-head, .focus-panel-head) { gap: var(--space-3); margin-bottom: var(--space-4); padding-bottom: 0; border-bottom: 0; }
:is(.panel, .settings-section, .catalog-card, .challenge-card, .data-panel, .list-panel, .chart-panel, .quote-panel, .score-card, .gantt-panel, .funnel-panel, .auth-card, .quality-template-card, .session-device-card, .new-template-card, .data-action-card, .nb-card, .detail-zone, .focus-panel, .premium-form-panel, .form-panel, .settings-panel) h2 { font-size: var(--fs-l); font-weight: 650; letter-spacing: -0.01em; }
:is(.panel-head, .card-head, .focus-panel-head) p { margin-top: var(--space-1); color: var(--text-3); font-size: var(--fs-s); }
:is(.detail-identity, .nb-launch-hero, .auth-card, .home-challenge-card, .challenge-active-card) {
border: 1px solid transparent;
background:
linear-gradient(160deg, color-mix(in srgb, var(--void) 70%, rgba(255, 255, 255, 0.09)), color-mix(in srgb, var(--void) 82%, rgba(255, 255, 255, 0.05))) padding-box,
var(--rim) border-box;
box-shadow: var(--edge-light), var(--elev-2), 0 0 60px -30px var(--accent);
}
[data-scheme='light'] :is(.detail-identity, .nb-launch-hero, .auth-card, .home-challenge-card, .challenge-active-card) {
background: linear-gradient(160deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.62)) padding-box, var(--rim) border-box;
}
:where(.primary-button, .small-button, .ghost-button, .danger-button, .button-link, .batch-submit-dock button) {
gap: var(--space-2);
min-height: var(--control-h);
padding: 0 var(--space-5);
border-radius: var(--radius-pill);
border: 1px solid var(--line);
background: var(--surface-1);
box-shadow: var(--edge-light);
color: var(--text-1);
font-family: var(--font-body);
font-size: var(--fs-s);
font-weight: 650;
transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
:where(.primary-button, .small-button, .ghost-button, .danger-button, .button-link, .batch-submit-dock button):hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--surface-2); }
:where(.primary-button, .small-button, .ghost-button, .danger-button, .button-link, .batch-submit-dock button):active { transform: scale(0.98); }
.primary-button {
border-color: transparent;
background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-2)));
color: var(--on-accent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 26px -10px var(--accent);
}
.primary-button:hover { border-color: transparent; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #fff), color-mix(in srgb, var(--accent) 50%, var(--accent-2))); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 32px -8px var(--accent); }
.small-button { min-height: 34px; padding: 0 var(--space-4); font-size: 13px; color: var(--text-2); }
.small-button:hover { color: var(--text-1); }
.ghost-button { background: transparent; box-shadow: none; border-color: transparent; color: var(--text-2); }
.ghost-button:hover { background: var(--surface-1); color: var(--text-1); }
.danger-button, .small-button.danger, .ghost-button.is-danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.small-button.success { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: var(--fs-s); font-weight: 600; text-decoration: none; }
.back-link:hover { color: var(--accent); }
:where(label) { color: var(--text-2); font-size: 13.5px; font-weight: 600; }
.form-grid { gap: var(--space-4); margin-top: var(--space-4); }
.form-grid > label, .form-stack label, .compact-settings label { gap: 6px; }
.form-stack { gap: var(--space-3); }
:where(input[type='text'], input[type='email'], input[type='password'], input[type='url'], input[type='number'], input[type='date'], input[type='time'], input[type='search'], input[type='tel'], input:not([type]), select, textarea) {
min-height: var(--control-h);
padding: 0 14px;
border-radius: 13px;
border: 1px solid var(--line-soft);
background: rgba(0, 0, 0, 0.22);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
color: var(--text-1);
font-family: var(--font-body);
font-size: var(--fs-m);
font-weight: 500;
transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
[data-scheme='light'] :where(input[type='text'], input[type='email'], input[type='password'], input[type='url'], input[type='number'], input[type='date'], input[type='time'], input[type='search'], input[type='tel'], input:not([type]), select, textarea) { background: rgba(255, 255, 255, 0.7); border-color: rgba(20, 17, 42, 0.1); box-shadow: inset 0 1px 2px rgba(20, 17, 42, 0.06); }
:where(textarea) { padding: 12px 14px; min-height: 96px; line-height: 1.55; }
:where(select) { padding-right: 34px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
:where(select option) { background: #14112A; color: #F6F4FF; }
[data-scheme='light'] :where(select option) { background: #FFFFFF; color: #14112A; }
:where(input[type='text'], input[type='email'], input[type='password'], input[type='url'], input[type='number'], input[type='date'], input[type='time'], input[type='search'], input[type='tel'], input:not([type]), select, textarea)::placeholder { color: var(--text-4); }
:where(input[type='text'], input[type='email'], input[type='password'], input[type='url'], input[type='number'], input[type='date'], input[type='time'], input[type='search'], input[type='tel'], input:not([type]), select, textarea):hover { border-color: var(--line); }
:where(input[type='text'], input[type='email'], input[type='password'], input[type='url'], input[type='number'], input[type='date'], input[type='time'], input[type='search'], input[type='tel'], input:not([type]), select, textarea):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 24px -10px var(--accent); }
:where(input[type='checkbox'], input[type='radio']) { accent-color: var(--accent); width: 18px; height: 18px; }
:where(input[type='range']) { accent-color: var(--accent); }
.form-note { padding: 12px 14px; border-radius: 13px; border: 1px solid var(--line-soft); background: var(--surface-0); color: var(--text-3); font-size: var(--fs-s); line-height: 1.55; }
.checkbox-label { gap: 10px; }
.optional-mark { color: var(--text-4); font-weight: 500; }
.segmented { gap: 2px; padding: 3px; border-radius: 14px; border: 1px solid var(--line-soft); background: var(--surface-0); }
.segmented legend { padding: 0 0 6px; color: var(--text-3); font-size: 11px; font-weight: 700; letter-spacing: var(--kicker-track); text-transform: uppercase; }
.segmented label { gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 11px; color: var(--text-2); font-size: 13.5px; font-weight: 600; }
.segmented label:has(input:checked) { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--text-1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 0 18px -8px var(--accent); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented-buttons { gap: 2px; padding: 3px; border-radius: 14px; border: 1px solid var(--line-soft); background: var(--surface-0); }
.segmented-buttons button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 11px; background: none; color: var(--text-2); font-size: 13px; font-weight: 600; }
.segmented-buttons button.is-on, .segmented-buttons button[aria-pressed='true'] { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--text-1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
:is(.count-pill, .stage-chip, .nb-pill, .nb-chip, .zone-tag, .chip) {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 24px;
padding: 0 10px;
border-radius: var(--radius-pill);
border: 1px solid var(--line-soft);
background: var(--surface-1);
color: var(--text-2);
font-size: var(--fs-xs);
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
:is(.table-scroll, .gantt-scroll, .recovery-codes, .audit-log, .correction-list, .schedule-history, .rest-trace, .empty-state) { border-radius: var(--radius-m); border: 1px solid var(--line-soft); background: var(--surface-0); }
.empty-state { gap: var(--space-2); padding: var(--space-6) var(--space-5); color: var(--text-3); }
.empty-state > span:first-child { font-size: 24px; color: var(--accent); filter: drop-shadow(0 0 10px var(--accent)); }
.empty-state h2 { font-size: var(--fs-l); color: var(--text-1); }
.empty-state p { max-width: 46ch; color: var(--text-2); font-size: var(--fs-s); }
.empty-state.compact { padding: var(--space-5) var(--space-4); }
.empty-state-action { margin-top: var(--space-2); }
.progress-track { height: 6px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.08); border: 0; }
[data-scheme='light'] .progress-track { background: rgba(20, 17, 42, 0.08); }
.progress-track > i { border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px -2px var(--accent); }
:where(table) { font-size: var(--fs-s); color: var(--text-2); }
:where(th) { padding: 10px 12px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
:where(td) { padding: 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
:where(tbody tr:hover td) { background: var(--surface-0); }
:where(tbody tr:last-child td) { border-bottom: 0; }
.table-scroll { padding: 0; }
.table-link { color: var(--accent); text-decoration: none; font-weight: 600; }
@media (max-width: 640px) {
table[data-responsive-table] tr { margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-1); }
table[data-responsive-table] td { padding: var(--space-2) 0; border-bottom: 1px solid var(--line-soft); }
table[data-responsive-table] td:last-child { border-bottom: 0; }
table[data-responsive-table] td::before { color: var(--text-3); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
}
.detail-zone { --zone-tone: var(--accent); overflow: hidden; }
.detail-zone + .detail-zone { margin-top: var(--space-3); }
.detail-zone > summary { gap: var(--space-3); min-height: 64px; padding: var(--space-3) var(--space-5); transition: background var(--dur-fast); }
.detail-zone > summary:hover { background: var(--surface-0); }
.zone-index { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--zone-tone) 40%, transparent); background: color-mix(in srgb, var(--zone-tone) 14%, transparent); color: var(--zone-tone); font-family: var(--font-display); font-size: 12.5px; font-weight: 700; }
.zone-title { font-family: var(--font-display); font-size: var(--fs-l); font-weight: 650; letter-spacing: -0.01em; }
.zone-toggle { width: 28px; height: 28px; border-radius: 50%; position: relative; transition: transform var(--dur) var(--ease-out); }
.zone-toggle::before { content: ''; position: absolute; left: 50%; top: 45%; width: 7px; height: 7px; border-right: 1.6px solid var(--text-3); border-bottom: 1.6px solid var(--text-3); transform: translate(-50%, -50%) rotate(45deg); }
.detail-zone[open] .zone-toggle { transform: rotate(180deg); }
.detail-zone[open] > summary { border-bottom: 1px solid var(--line-soft); }
.zone-body { padding: var(--space-5); display: grid; gap: var(--space-4); }
.zone-card { border-radius: var(--radius-m); border: 1px solid var(--line-soft); background: var(--surface-0); padding: var(--space-4); }
.zone-grid { gap: var(--space-4); }
.alert { --tone: var(--accent); padding: 12px 14px; border-radius: var(--radius-m); background: color-mix(in srgb, var(--tone) 12%, transparent); color: var(--text-1); font-size: var(--fs-s); border: 1px solid color-mix(in srgb, var(--tone) 34%, transparent); box-shadow: 0 0 24px -14px var(--tone); }
.alert.error { --tone: var(--bad); }
.alert.success { --tone: var(--ok); }
.alert.warning { --tone: var(--warn); }
:where(dialog) { border-radius: 26px; border: 1px solid var(--line); background: var(--glass-solid); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); color: var(--text-1); box-shadow: var(--edge-light), var(--elev-3); }
dialog::backdrop { background: rgba(5, 3, 14, 0.55); }
.reschedule-dialog { width: min(500px, calc(100vw - 24px)); }
.reschedule-dialog form { gap: var(--space-4); padding: var(--space-5); }
.reschedule-dialog label { gap: 6px; }
.dialog-head h2 { font-size: var(--fs-xl); }
.dialog-head button, [data-dialog-close], [data-resize-close] { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-1); color: var(--text-2); font-size: 18px; }
.bulk-delete-dialog { gap: var(--space-4); padding: var(--space-5); }
:is(.gantt-header, .detail-focus-tabs, .nb-actionbar, .nb-preview-actions) {
background: var(--glass-solid);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
}
:is(.wk-corner, .wk-dayhead, .wk-ruler) { background-color: var(--glass-solid); }
.skin-picker { gap: var(--space-3); }
.skin-picker legend { margin-bottom: var(--space-2); color: var(--text-3); font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--kicker-track); text-transform: uppercase; }
.skin-option {
gap: var(--space-3);
padding: var(--space-3);
border-radius: var(--radius-m);
border: 1px solid var(--line);
background: var(--surface-0);
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.skin-option:hover { border-color: var(--ink-4); }
.skin-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.skin-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.skin-option.is-soon { opacity: 0.62; }
.skin-swatch { border-radius: 10px; border: 1px solid var(--line-soft); }
.skin-text { gap: 4px; }
.skin-text strong { font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: var(--fs-l); color: var(--text-1); }
.skin-text small { color: var(--text-3); font-size: 13px; line-height: 1.45; }
.skin-text em { justify-self: start; margin-top: 4px; padding: 2px 9px; border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--accent-2); font-size: 11.5px; font-style: normal; font-weight: 700; }
.skin-option--derin .skin-swatch { background: radial-gradient(120% 90% at 80% 0%, #10244A, #050A14 70%); }
.skin-option--derin .skin-swatch i:nth-child(1) { left: 7%; top: 14%; width: 25%; height: 72%; border-radius: 8px; border: 1px solid #1D2B45;
background: linear-gradient(#7C9DFF, #7C9DFF) 22% 18% / 22% 13% no-repeat, linear-gradient(#4FE3A0, #4FE3A0) 22% 42% / 22% 13% no-repeat,
linear-gradient(#FFBD65, #FFBD65) 22% 66% / 22% 13% no-repeat, #070D19; }
.skin-option--derin .skin-swatch i:nth-child(2) { left: 38%; top: 18%; width: 54%; height: 36%; border-radius: 9px; border: 1px solid #1D2B45; background: linear-gradient(150deg, #101B30, #0B1322); }
.skin-option--derin .skin-swatch i:nth-child(3) { left: 38%; top: 64%; width: 40%; height: 11%; border-radius: 99px; background: linear-gradient(90deg, #F5A524, #5FD3B5, #6EA8FF); }
.skin-option--sade .skin-swatch { background: #F4F5F7; }
.skin-option--sade .skin-swatch i:nth-child(1) { left: 10%; top: 18%; width: 52%; height: 64%; border-radius: 14px; background: #FFFFFF; box-shadow: 0 6px 16px -10px rgba(20, 30, 50, 0.35); }
.skin-option--sade .skin-swatch i:nth-child(2) { left: 16%; top: 30%; width: 26%; height: 9%; border-radius: 99px; background: #1F2937; }
.skin-option--sade .skin-swatch i:nth-child(3) { right: 10%; top: 30%; width: 22%; height: 10%; border-radius: 99px; background: #3B82F6; box-shadow: 0 16px 0 #E5E7EB, 0 32px 0 #E5E7EB; }
.skin-option--cam .skin-swatch { background: radial-gradient(70% 90% at 15% 20%, #7C3AED, transparent 60%), radial-gradient(60% 80% at 90% 80%, #06B6D4, transparent 60%), #0B0618; }
.skin-option--cam .skin-swatch i:nth-child(1) { left: 10%; top: 18%; width: 52%; height: 64%; border-radius: 12px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(6px); }
.skin-option--cam .skin-swatch i:nth-child(2) { left: 16%; top: 30%; width: 26%; height: 9%; border-radius: 99px; background: #F0ABFC; box-shadow: 0 0 12px #F0ABFC; }
.skin-option--cam .skin-swatch i:nth-child(3) { right: 10%; top: 30%; width: 22%; height: 10%; border-radius: 99px; background: #22D3EE; box-shadow: 0 0 12px #22D3EE, 0 16px 0 rgba(255, 255, 255, 0.18), 0 32px 0 rgba(255, 255, 255, 0.18); }
.dock-picker { gap: var(--space-3); }
.dock-picker label { gap: 6px; }
.appearance-settings, .dock-settings { margin-top: var(--space-4); }
.palette-picker legend { margin-bottom: var(--space-2); padding: 0; }
.palette-picker .theme-grid { gap: var(--space-2); }
.theme-option { gap: 2px; padding: var(--space-2); border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--surface-0); text-align: left; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.theme-option:hover { border-color: var(--ink-4); }
.theme-option:has(input:checked), .theme-option.selected { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.theme-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-option .theme-swatch { height: 28px; margin-bottom: var(--space-1); padding: 0; gap: 3px; border: 0; border-radius: 8px; background: none; box-shadow: none; overflow: hidden; }
.theme-option .theme-swatch i { padding: 0; border-radius: 6px; }
@media (max-width: 760px) { .theme-option small { display: none; } .theme-option .theme-swatch { height: 22px; } }
.theme-option strong { color: var(--text-1); font-size: var(--fs-s); font-weight: 700; }
.theme-option small { color: var(--text-3); font-size: var(--fs-xs); line-height: 1.35; }
.mode-note { margin: calc(var(--space-2) * -1) 0 0; color: var(--text-3); font-size: var(--fs-s); }
.appearance-auto { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-m); background: var(--surface-0); }
.appearance-auto .form-grid { margin-top: 0; }
.appearance-scope { gap: var(--space-2); color: var(--text-2); font-size: var(--fs-s); font-weight: 600; }
.palette-picker legend { color: var(--text-3); font-size: 11px; font-weight: 700; letter-spacing: var(--kicker-track); text-transform: uppercase; }
.refresh-row > span small { margin-top: 2px; color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.refresh-row { gap: var(--space-2) var(--space-3); }
.skin-option:has(input:checked), .theme-option:has(input:checked) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent), 0 0 30px -12px var(--accent); }
.skin-option, .theme-option { background: var(--surface-1); box-shadow: var(--edge-light); }
.schedule-picker { gap: var(--space-2); }
.schedule-picker legend { margin-bottom: var(--space-2); padding: 0; color: var(--text-3); font-size: var(--fs-xs); font-weight: 700; }
.schedule-note { margin: 0; color: var(--text-3); font-size: var(--fs-s); }
.schedule-row { gap: var(--space-2) var(--space-3); padding: var(--space-3); border-radius: var(--radius-m); border: 1px solid var(--line-soft); background: var(--surface-0); }
.schedule-row label { gap: 4px; color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; }
.schedule-add { gap: var(--space-2); margin-top: var(--space-1); }
.schedule-add .nx-icon { --icon-size: 16px; }
.schedule-picker legend { font-size: 10.5px; font-weight: 800; letter-spacing: var(--kicker-track); text-transform: uppercase; }
.page-wrap, .dashboard-wrap { padding: var(--space-2) var(--page-gutter) var(--space-7); }
.nb-daybar, .nb-week-strip {
width: min(calc(100% - 2 * var(--page-gutter)), calc(var(--page-max) - 2 * var(--page-gutter)));
max-width: none;
margin: 0 auto var(--space-4);
}
.section-band { gap: var(--space-3); margin: var(--space-5) 0 var(--space-3); color: var(--text-3); font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--kicker-track); text-transform: uppercase; }
.section-band b { color: var(--text-2); font-weight: 700; letter-spacing: 0.06em; }
.section-band::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.score-ring {
--score: 0;
border-radius: 50%;
background:
radial-gradient(closest-side, var(--surface-1) 79%, transparent 81% 100%),
conic-gradient(from -90deg, var(--accent) 0, var(--accent-2) calc(var(--score) * 1%), var(--surface-0) 0);
box-shadow: inset 0 0 0 1px var(--line-soft), 0 0 40px -18px color-mix(in srgb, var(--accent) 60%, transparent);
}
.score-ring::before, .score-ring::after { content: none; }
.score-ring strong { font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: var(--fs-2xl); font-weight: 800; color: var(--text-1); background: none; -webkit-text-fill-color: currentColor; }
.score-ring span { margin-top: 2px; color: var(--text-3); font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; }
.score-breakdown > div { padding: var(--space-3) 0; border-bottom: 1px solid var(--line-soft); }
.score-breakdown > div:last-child { border-bottom: 0; }
.score-breakdown strong { font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: var(--fs-xl); color: var(--text-1); background: none; -webkit-text-fill-color: currentColor; }
.score-breakdown small { color: var(--text-3); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.dot.purple { background: var(--accent); }
.dot.cyan { background: var(--teal); }
.today-dashboard-grid { gap: var(--space-4); }
.category-kpi-grid { gap: var(--space-3); }
.category-kpi-grid article {
--area-color: var(--accent);
gap: 2px;
padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 6px);
border-radius: var(--radius-m);
border: 1px solid var(--line-soft);
background: linear-gradient(180deg, var(--surface-1), var(--plate-2));
box-shadow: var(--edge-light);
}
.category-kpi-grid article::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--area-color); }
.category-kpi-grid span { color: var(--text-2); font-size: var(--fs-s); font-weight: 700; }
.category-kpi-grid strong { font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: var(--fs-2xl); color: var(--text-1); line-height: 1.15; }
.category-kpi-grid small { color: var(--text-3); font-size: var(--fs-xs); }
.report-grid { gap: var(--space-4); }
.bar-chart { gap: 6px; min-height: 200px; padding-top: var(--space-3); }
.bar-stack { border-radius: 6px; background: var(--surface-0); overflow: hidden; }
.bar-stack .up-bar { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 60%, transparent)); }
.bar-stack .rp-bar { background: var(--accent-2); }
.bar-column span { color: var(--text-3); font-size: 11px; font-weight: 700; }
.category-score { gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line-soft); }
.category-score:last-child { border-bottom: 0; }
.category-score i { width: 10px; height: 10px; border-radius: 3px; }
.category-score span { color: var(--text-1); font-weight: 600; }
.category-score small { display: block; color: var(--text-3); font-size: var(--fs-xs); font-weight: 500; }
.category-score strong { font-family: var(--font-display); font-stretch: var(--display-stretch); color: var(--text-1); font-size: var(--fs-l); background: none; -webkit-text-fill-color: currentColor; }
.time-type-list > div, .hour-heatmap > div, .day-summary-grid article, .category-time-grid article {
border-radius: var(--radius-m);
border: 1px solid var(--line-soft);
background: var(--surface-0);
}
.time-type-list b, .hour-heatmap strong, .day-summary-grid strong, .category-time-grid strong { font-family: var(--font-display); font-stretch: var(--display-stretch); color: var(--text-1); }
@media (max-width: 760px) {
.unit-quick-actions { gap: var(--space-2); }
.unit-quick-actions .unit-plan-actions { gap: var(--space-2); }
.unit-quick-actions .plan-chip { min-height: 36px; padding: 0 var(--space-3); }
.category-kpi-grid strong { font-size: var(--fs-xl); }
.detail-zone > summary { row-gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.zone-title { font-size: var(--fs-m); }
.zone-body { padding: var(--space-4); }
}
.section-band { color: color-mix(in srgb, var(--accent) 70%, var(--text-2)); font-weight: 700; }
.section-band::after { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent), transparent); }
.score-ring {
background:
radial-gradient(closest-side, color-mix(in srgb, var(--void) 88%, transparent) 80%, transparent 82% 100%),
conic-gradient(from -90deg, var(--accent) 0, var(--accent-2) calc(var(--score) * 1%), rgba(255, 255, 255, 0.07) 0);
box-shadow: 0 0 46px -16px var(--accent);
}
[data-scheme='light'] .score-ring { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.92) 80%, transparent 82% 100%), conic-gradient(from -90deg, var(--accent) 0, var(--accent-2) calc(var(--score) * 1%), rgba(20, 17, 42, 0.08) 0); }
.score-ring strong, .score-breakdown strong, .category-kpi-grid strong, .category-score strong, .time-type-list b, .hour-heatmap strong, .day-summary-grid strong, .category-time-grid strong { font-weight: 650; letter-spacing: -0.02em; }
.score-ring span { letter-spacing: 0.14em; font-weight: 700; }
.category-kpi-grid article { background: linear-gradient(160deg, var(--plate-raise), var(--plate-2)); border-color: var(--line); box-shadow: var(--edge-light), var(--elev-1); }
.category-kpi-grid article::before { box-shadow: 0 0 12px var(--area-color); }
.bar-stack { background: rgba(255, 255, 255, 0.06); }
.bar-stack .up-bar { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 40%, transparent)); box-shadow: 0 0 14px -4px var(--accent); }
.bar-stack .rp-bar { background: var(--accent-2); }
.category-score i { box-shadow: 0 0 10px currentColor; }
.settings-page .settings-panel { padding: 0; border: 0; background: none; box-shadow: none; display: grid; gap: var(--space-4); }
.settings-page .settings-panel > form, .settings-page .settings-panel > .settings-section { margin: 0; }
.settings-page .settings-panel .settings-section + .settings-section { margin-top: 0; }
.appearance-settings .segmented { padding: 0; background: none; gap: var(--space-2); }
.appearance-settings .segmented label { border: 1px solid var(--line); background: var(--surface-1); box-shadow: var(--edge-light); }
.appearance-settings .segmented label:has(input:checked) { border-color: var(--accent); color: var(--text-1); background: color-mix(in srgb, var(--accent) 20%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 22px -8px var(--accent); }
.section-band b { text-transform: none; letter-spacing: 0.01em; }
.ver-grid { gap: var(--space-4); }
.ver-card { gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--surface-1); box-shadow: var(--edge-light); }
.ver-label { gap: var(--space-2); color: var(--text-3); font-size: var(--fs-s); font-weight: 700; }
.ver-label .nx-icon { --icon-size: 18px; color: var(--accent); }
.ver-number { margin-top: var(--space-1); font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 650; line-height: 1.1; color: var(--text-1); }
.ver-meta { color: var(--text-3); font-size: var(--fs-s); }
.ver-hint { color: var(--text-4); font-size: var(--fs-xs); }
.ver-status { gap: var(--space-2); margin: var(--space-1) 0 0; color: var(--text-2); font-size: var(--fs-s); font-weight: 600; }
.ver-status i { background: var(--text-4); }
.ver-status.is-ok i { background: var(--ok); }
.ver-status.is-new i { background: var(--accent); }
.ver-status.is-wait i { background: var(--warn); }
.ver-status.is-err { color: var(--bad); }
.ver-status.is-err i { background: var(--bad); }
.ver-actions { gap: var(--space-2); padding-top: var(--space-3); }
.ver-list { gap: var(--space-2); margin-top: var(--space-2); }
.ver-list li { gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--line-soft); }
.ver-list li:first-child { border-top: 0; padding-top: 0; }
.ver-list strong { color: var(--text-1); font-size: var(--fs-s); }
.ver-list small { color: var(--text-3); font-size: var(--fs-xs); }
.ver-body { gap: var(--space-3); }
.ver-subhead { margin: var(--space-3) 0 0; color: var(--text-2); font-size: var(--fs-s); font-weight: 700; }
.ver-peers { margin: 0; }
.ver-pill { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-1); border: 1px solid var(--line); color: var(--text-2); font-size: var(--fs-xs); font-weight: 700; }
.ver-pill.is-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.ver-pill.is-wait { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.nb-ring {
background:
radial-gradient(closest-side, color-mix(in srgb, var(--void) 90%, transparent) 78%, transparent 80% 100%),
conic-gradient(var(--accent) 0, var(--accent-2) calc(var(--p) * 1%), rgba(255, 255, 255, 0.08) 0);
box-shadow: inset 0 0 0 1px var(--line-soft), 0 0 40px -16px var(--accent);
}
[data-scheme='light'] .nb-ring { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.94) 78%, transparent 80% 100%), conic-gradient(var(--accent) 0, var(--accent-2) calc(var(--p) * 1%), rgba(20, 17, 42, 0.08) 0); }
.nb-ring b { font-family: var(--font-display); font-weight: 650; }
.nb-hello h1 em { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-splash] .nex-splash {
position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
background: radial-gradient(120% 90% at 50% 42%, #0E1626 0%, #070A10 46%, #030406 100%);
cursor: pointer;
}
html[data-splash] body { overflow: hidden; }
.nex-splash-stage { position: relative; display: grid; justify-items: center; gap: 22px; transform: translateY(-3vh); }
.nex-splash-mark { position: relative; width: min(46vw, 260px); aspect-ratio: 1; }
.nex-splash-mark img { width: 100%; height: 100%; display: block; opacity: 0; transform: scale(.78) translateY(14px); filter: blur(14px) brightness(.6);
animation: nex-splash-mark .95s cubic-bezier(.2, .8, .2, 1) .12s forwards; }
.nex-splash-shine { position: absolute; inset: 0; pointer-events: none;
-webkit-mask: url('../assets/brand/nex-mark.webp') center / contain no-repeat; mask: url('../assets/brand/nex-mark.webp') center / contain no-repeat;
background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .85) 48%, rgba(255, 236, 200, .55) 52%, transparent 64%) -160% 0 / 300% 100% no-repeat;
animation: nex-splash-shine 1s ease-in-out 1s forwards; mix-blend-mode: screen; }
.nex-splash-glow { position: absolute; top: 4%; width: 74%; aspect-ratio: 1; border-radius: 50%; filter: blur(42px); opacity: 0; pointer-events: none; }
.nex-splash-glow--blue { left: -26%; background: radial-gradient(circle, rgba(79, 168, 255, .75), transparent 66%); transform: translateX(-30%); animation: nex-splash-glow-l 1.2s ease-out .15s forwards, nex-splash-breathe 3.2s ease-in-out 1.4s infinite; }
.nex-splash-glow--gold { right: -26%; background: radial-gradient(circle, rgba(233, 185, 107, .72), transparent 66%); transform: translateX(30%); animation: nex-splash-glow-r 1.2s ease-out .3s forwards, nex-splash-breathe 3.2s ease-in-out 1.6s infinite; }
.nex-splash-word { display: flex; gap: .02em; font: 800 clamp(1.15rem, 4.4vw, 1.7rem)/1 var(--font-display); font-stretch: var(--display-stretch); letter-spacing: .34em; color: #F2F5FA; padding-left: .34em; }
.nex-splash-word span { display: inline-block; opacity: 0; transform: translateY(10px); filter: blur(6px); animation: nex-splash-letter .55s cubic-bezier(.2, .8, .2, 1) forwards; }
.nex-splash-word span:nth-child(1) { animation-delay: 1.00s; } .nex-splash-word span:nth-child(2) { animation-delay: 1.05s; }
.nex-splash-word span:nth-child(3) { animation-delay: 1.10s; } .nex-splash-word span:nth-child(4) { animation-delay: 1.15s; }
.nex-splash-word span:nth-child(5) { animation-delay: 1.20s; } .nex-splash-word span:nth-child(6) { animation-delay: 1.25s; }
.nex-splash-word span:nth-child(7) { animation-delay: 1.30s; } .nex-splash-word span:nth-child(8) { animation-delay: 1.35s; }
.nex-splash-word span:nth-child(9) { animation-delay: 1.40s; }
.nex-splash-line { width: min(52vw, 230px); height: 2px; border-radius: 2px; transform: scaleX(0); opacity: .9;
background: linear-gradient(90deg, transparent, #4FA8FF 22%, #E9B96B 78%, transparent);
box-shadow: 0 0 14px rgba(79, 168, 255, .45); animation: nex-splash-line .8s cubic-bezier(.2, .8, .2, 1) 1.35s forwards; }
.nex-splash.is-leaving { animation: nex-splash-out .55s ease-in forwards; }
@keyframes nex-splash-mark { to { opacity: 1; transform: none; filter: none; } }
@keyframes nex-splash-shine { to { background-position: 160% 0; } }
@keyframes nex-splash-glow-l { to { opacity: .85; transform: none; } }
@keyframes nex-splash-glow-r { to { opacity: .8; transform: none; } }
@keyframes nex-splash-breathe { 0%, 100% { opacity: .8; } 50% { opacity: .5; } }
@keyframes nex-splash-letter { to { opacity: 1; transform: none; filter: none; } }
@keyframes nex-splash-line { to { transform: scaleX(1); } }
@keyframes nex-splash-out { to { opacity: 0; transform: scale(1.04); visibility: hidden; } }
[data-motion='off'] .nex-splash *, [data-saver='on'] .nex-splash * { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
[data-motion='off'] .nex-splash-shine, [data-saver='on'] .nex-splash-shine { display: none; }
@media (prefers-reduced-motion: reduce) {
html:not([data-motion='full']) .nex-splash * { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
html:not([data-motion='full']) .nex-splash-shine { display: none; }
}
html[data-splash] .nex-splash { background: radial-gradient(60% 50% at 70% 20%, color-mix(in srgb, var(--aura-1) 55%, transparent), transparent 70%), radial-gradient(55% 45% at 20% 85%, color-mix(in srgb, var(--aura-2) 45%, transparent), transparent 70%), var(--canvas); }
.nex-splash-glow--blue { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 75%, transparent), transparent 66%); }
.nex-splash-glow--gold { background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 72%, transparent), transparent 66%); }
.nex-splash-word { color: var(--text-1); font-family: var(--font-display); font-stretch: 100%; font-weight: 700; letter-spacing: 0.3em; }
.nex-splash-line { background: linear-gradient(90deg, transparent, var(--accent) 22%, var(--accent-2) 78%, transparent) !important; box-shadow: 0 0 16px var(--accent) !important; }