.offline-page { min-height: 100vh; }
.offline-topbar { justify-content: space-between; }
.offline-badge { display: flex; align-items: center; gap: 7px; color: #6d88a0; font-size: 10px; letter-spacing: .12em; }
.offline-badge i { width: 7px; height: 7px; border-radius: 50%; background: #76acd4; box-shadow: 0 0 0 4px #8fc4ed22; }
.offline-hero { min-height: 120px; }
.offline-summary { display: flex; align-items: center; gap: 11px; padding: 12px 16px; border: 1px solid #d2e4f3; border-radius: 12px; color: #71889b; background: #ffffffa8; font-size: 11px; }
.offline-summary i { color: #75a9cf; font-style: normal; }

.offline-workspace { position: relative; display: grid; grid-template-columns: minmax(210px, 260px) minmax(250px, 310px) minmax(390px, 1fr); gap: clamp(52px, 6vw, 96px); min-height: 650px; padding: 24px; overflow: hidden; }
.offline-workspace::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 0 30%, #d6eaff1a 30% 31%, transparent 31% 64%, #d6eaff1a 64% 65%, transparent 65%); }
.offline-flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.offline-flow-path { fill: none; stroke: #9fc8e5; stroke-width: 1.5; stroke-dasharray: 6 8; animation: offlineDash 1.4s linear infinite; }
.offline-flow-path.output { stroke-width: 1.3; opacity: .8; }
.offline-flow-path.active { stroke: #398dcc; filter: url(#offlineGlow); }
.offline-flow-packet { fill: #3b91cf; filter: url(#offlineGlow); }
.dataset-column, .offline-model-column, .results-column { position: relative; z-index: 2; min-width: 0; }
.offline-step { display: flex; align-items: center; gap: 10px; height: 42px; margin-bottom: 16px; }
.offline-step > span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #bbd8ee; border-radius: 8px; color: #5581a3; background: #eff7ff; font-size: 10px; font-weight: 800; }
.offline-step > div { display: grid; gap: 2px; }
.offline-step strong { color: #264e6d; font-size: 14px; }
.offline-step small { color: #87a0b4; font-size: 9px; letter-spacing: .08em; }

.dataset-list { display: grid; gap: 9px; max-height: 600px; padding-right: 5px; overflow-y: auto; scrollbar-color: #b9d5e9 transparent; scrollbar-width: thin; }
.dataset-loading { padding: 24px 12px; color: #7894aa; text-align: center; font-size: 10px; }
.dataset-card { position: relative; display: grid; grid-template-columns: 38px 1fr 20px; align-items: center; gap: 10px; width: 100%; min-height: 62px; padding: 10px 11px; border: 1px solid #d6e5f2; border-radius: 12px; color: #355b77; background: linear-gradient(145deg, #fff, #f5faff); text-align: left; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.dataset-card:hover { transform: translateY(-2px); border-color: #9fcbea; }
.dataset-card:disabled { cursor: wait; opacity: .72; transform: none; }
.dataset-card.active { border-color: #69aadd; box-shadow: 0 10px 28px #5594c51a, inset 3px 0 #398dcc; }
.dataset-card > span:nth-child(2) { display: grid; gap: 5px; }
.dataset-card strong { font-size: 13px; }
.dataset-card small { color: #90a6b8; font-size: 8px; letter-spacing: .08em; }
.dataset-card > i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #8ea6b8; background: #eaf3f9; font-size: 9px; font-style: normal; }
.dataset-card.active > i { color: #fff; background: #438fca; }
.dataset-card.ready > i { color: #4b9875; background: #e6f5ed; }
.dataset-card.ready.active > i { color: #fff; background: #4b9875; }
.dataset-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #cfe1ef; border-radius: 10px; color: #4d86b3; background: #edf6ff; font: 800 10px/1 system-ui; }

.offline-model-column { display: flex; flex-direction: column; align-items: stretch; }
.offline-model { position: relative; display: grid; place-items: center; min-height: 414px; margin-top: 6px; border: 1px solid #bddaf0; border-radius: 24px; background: radial-gradient(circle at center, #d6edff 0, #eef8ff 37%, #f9fcff 70%); box-shadow: inset 0 0 45px #8dc2eb26, 0 24px 50px #5489b014; overflow: hidden; }
.offline-model::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, #75b5e332, transparent 63%); animation: modelPulse 2.4s ease-in-out infinite; }
.offline-orbit { position: absolute; border: 1px solid #72afe044; border-radius: 50%; animation: offlineSpin 13s linear infinite; }
.offline-orbit::before, .offline-orbit::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #5ba3d8; box-shadow: 0 0 10px #5ba3d8; }
.orbit-one { width: 240px; height: 240px; }
.orbit-one::before { left: 21px; top: 37px; }
.orbit-one::after { right: 21px; bottom: 37px; }
.orbit-two { width: 190px; height: 190px; animation-direction: reverse; animation-duration: 9s; }
.orbit-two::before { right: 8px; top: 65px; }
.orbit-two::after { left: 8px; bottom: 65px; }
.offline-model-core { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 146px; height: 146px; border: 1px solid #8fc0e5; border-radius: 50%; background: radial-gradient(circle at 37% 30%, #fff, #d9edfd 55%, #b9daf4); box-shadow: 0 0 46px #62a6db40, inset 0 0 26px #fff; }
.offline-model-core strong { width: 110px; color: #2877b4; text-align: center; font-size: 19px; line-height: 1.15; }
.offline-model-core small { margin-top: 7px; color: #6b91ae; font-size: 7px; letter-spacing: .15em; }
.model-brain { margin-bottom: 6px; color: #4e96cd; font-size: 28px; font-weight: 300; }
.offline-neural { position: absolute; inset: 0; }
.offline-neural i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #8ec2e9; box-shadow: 0 0 10px #8ec2e9; }
.offline-neural i:nth-child(1) { left: 13%; top: 25%; }.offline-neural i:nth-child(2) { right: 14%; top: 19%; }.offline-neural i:nth-child(3) { left: 18%; bottom: 21%; }.offline-neural i:nth-child(4) { right: 12%; bottom: 28%; }.offline-neural i:nth-child(5) { left: 48%; top: 10%; }.offline-neural i:nth-child(6) { left: 51%; bottom: 9%; }
.offline-model.processing .offline-orbit { animation-duration: 2.5s; }
.offline-model.processing .offline-model-core { box-shadow: 0 0 70px #3d9be05c, inset 0 0 26px #fff; }
.offline-model-state { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; color: #6d899f; font-size: 10px; }
.offline-model-state i { width: 6px; height: 6px; border-radius: 50%; background: #92aabd; }
.offline-model-state.active i { background: #42a2db; box-shadow: 0 0 0 4px #42a2db1e; animation: statusBlink 1s ease-in-out infinite; }
.offline-run-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; border: 1px solid #9ac7e8; border-radius: 12px; color: #286fa6; background: linear-gradient(135deg, #dcefff, #eff8ff); cursor: pointer; transition: .2s ease; }
.offline-run-button:hover { transform: translateY(-1px); box-shadow: 0 9px 20px #4b92c91a; }
.offline-run-button:disabled { cursor: wait; opacity: .65; transform: none; }
.offline-run-button span { font-size: 9px; }.offline-run-button b { font-size: 11px; }

.offline-results { display: grid; gap: 12px; }
.offline-result-card { --result-color:#378bce; min-height: 166px; padding: 16px 18px; border: 1px solid #d3e4f2; border-radius: 15px; background: linear-gradient(145deg, #fff, #f5faff); box-shadow: 0 10px 30px #5584a70b; transition: border-color .25s ease, transform .25s ease; }
.selected-task-card { display: flex; flex-direction: column; min-height: 508px; padding: 22px; }
.selected-task-card > header { padding-bottom: 17px; border-bottom: 1px solid #e1ebf3; }
.result-view { display: none; flex: 1; align-content: start; animation: resultReveal .35s ease; }
.result-view.active { display: grid; }
.result-view-label { display: flex; align-items: center; gap: 9px; align-self: start; margin-bottom: 20px; color: #829bad; font-size: 9px; letter-spacing: .08em; }
.result-view-label i { display: block; width: 34px; height: 1px; background: var(--result-color); opacity: .55; }
.offline-result-card.updated { border-color: color-mix(in srgb, var(--result-color) 55%, white); transform: translateX(3px); }
.multiclass-card { --result-color:#8a6ac0; }.regression-card { --result-color:#4d9a78; }
.offline-result-card header { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; margin-bottom: 14px; }
.result-type-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--result-color); background: color-mix(in srgb, var(--result-color) 10%, white); font-size: 9px; font-weight: 800; }
.offline-result-card header > div { display: grid; gap: 2px; }
.offline-result-card header strong { color: #31566f; font-size: 13px; }
.offline-result-card header small { color: #91a6b6; font-size: 8px; letter-spacing: .11em; }
.result-status { padding: 4px 7px; border-radius: 5px; color: #7c94a6; background: #edf4f9; font-size: 7px; letter-spacing: .1em; }
.result-status.done { color: var(--result-color); background: color-mix(in srgb, var(--result-color) 11%, white); }
.evaluation-summary { display: grid; grid-template-columns: 122px 1fr; align-items: center; gap: 24px; }
.donut { --percent:0deg; position: relative; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: conic-gradient(var(--result-color) var(--percent), #e3edf5 0); transition: --percent .6s ease; }
.donut::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fafdff; }
.donut > div { position: relative; display: grid; place-items: center; gap: 2px; }
.donut strong { color: #2b638b; font-size: 24px; }.donut small { color: #8ca3b5; font-size: 8px; }
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.metric-grid > div, .compact-metrics > div { display: grid; gap: 5px; padding: 12px; border: 1px solid #deebf4; border-radius: 10px; background: #f7fbff; }
.metric-grid > div:last-child { grid-column: 1 / -1; }
.metric-grid span, .compact-metrics span { color: #8aa1b2; font-size: 8px; letter-spacing: .05em; }
.metric-grid strong, .compact-metrics strong { color: #315f80; font-size: 16px; }
.compact-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.compact-metrics > div:first-child { border-color: #d5c7e8; background: #faf7ff; }
.compact-metrics > div:first-child strong { color: #7c5cae; }
.chart-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.chart-title strong { color: #496a82; font-size: 10px; }.chart-title span { color: #91a6b6; font-size: 8px; }
.matrix-section { margin-top: 18px; padding-top: 15px; border-top: 1px solid #e4edf4; }
.confusion-wrap { position: relative; padding-left: 18px; }
.matrix-y { position: absolute; left: -17px; top: 53%; transform: rotate(-90deg); color: #91a6b6; font-size: 7px; letter-spacing: .06em; }
.confusion-matrix { display: grid; gap: 5px; }
.matrix-axis { display: grid; place-items: center; min-height: 18px; color: #7792a6; font-size: 8px; }
.matrix-cell { display: grid; place-items: center; min-height: 38px; border-radius: 7px; color: #44667f; font-size: 9px; font-weight: 700; }
.matrix-cell.strong { color: #fff; }
.multiclass-matrix { gap: 4px; }.multiclass-matrix .matrix-cell { min-height: 27px; border-radius: 5px; font-size: 8px; }
.multi-matrix-section { margin-top: 22px; }
.regression-dashboard { display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center; gap: 20px; padding: 4px 12px 8px; }
.regression-ring { --ring-value:0deg; position: relative; display: grid; place-items: center; width: 142px; height: 142px; border-radius: 50%; background: conic-gradient(#4d9a78 var(--ring-value), #e3eee8 0); box-shadow: 0 12px 30px #4d9a7814; transition: --ring-value .7s ease; }
.regression-ring.secondary { background: conic-gradient(#5995bd var(--ring-value), #e4edf3 0); box-shadow: 0 12px 30px #5995bd14; }
.regression-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: linear-gradient(145deg, #fff, #f5fbf8); }
.regression-ring.secondary::before { background: linear-gradient(145deg, #fff, #f4f9fc); }
.regression-ring > div { position: relative; display: grid; justify-items: center; gap: 4px; }
.regression-ring strong { color: #34795b; font-size: 29px; line-height: 1; }
.regression-ring.secondary strong { color: #3d769e; }
.regression-ring span { color: #55786a; font-size: 9px; font-weight: 700; }
.regression-ring small { color: #92a79d; font-size: 7px; }
.error-section { margin-top: 22px; padding-top: 16px; border-top: 1px solid #e4edf4; }
.regression-errors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.regression-errors > div { display: grid; gap: 5px; padding: 12px; border: 1px solid #dce9e2; border-radius: 10px; background: #f6fbf8; }
.regression-errors span { color: #809a8d; font-size: 8px; letter-spacing: .06em; }
.regression-errors strong { color: #3d725b; font-size: 18px; }
.regression-errors small { color: #9aada4; font-size: 7px; }
.offline-footer { display: flex; align-items: center; gap: 13px; min-height: 56px; margin-top: 14px; padding: 0 20px; color: #748ea3; font-size: 10px; }
.offline-footer > i { width: 1px; height: 14px; background: #d4e4f0; }.offline-footer > strong { margin-left: auto; color: #58809e; font-size: 9px; font-weight: 600; }

@property --percent { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --ring-value { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes offlineDash { to { stroke-dashoffset: -28; } }
@keyframes offlineSpin { to { transform: rotate(360deg); } }
@keyframes modelPulse { 50% { transform: scale(1.12); opacity: .55; } }
@keyframes statusBlink { 50% { opacity: .35; } }
@keyframes resultReveal { from { opacity: 0; transform: translateY(5px); } }

@media (max-width: 1080px) {
  .offline-workspace { grid-template-columns: 210px 260px minmax(330px, 1fr); gap: 42px; }
}
@media (max-width: 880px) {
  .offline-workspace { grid-template-columns: 1fr; gap: 50px; }
  .offline-flow-svg { display: none; }
  .dataset-list { grid-template-columns: repeat(2, 1fr); }
  .offline-model { min-height: 360px; }
}
@media (max-width: 640px) {
  .offline-summary { display: none; }
  .offline-hero { min-height: 105px; }
  .offline-workspace { padding: 16px; }
  .dataset-list { grid-template-columns: 1fr; }
  .offline-footer > span:nth-of-type(2), .offline-footer > i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .offline-flow-path, .offline-orbit, .offline-model::before { animation: none !important; }
}