.module-three-layout .lesson-hero {
    background:
        radial-gradient(circle at 12% 12%, rgba(255, 107, 145, 0.18), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(67, 217, 139, 0.16), transparent 30%),
        color-mix(in srgb, var(--surface) 92%, transparent);
}

.module-three-accordions .interactive-lab { overflow: hidden; }
.module-three-accordions button,
.module-three-accordions input,
.module-three-accordions textarea,
.module-three-accordions select { font: inherit; }

.module-three-intro-card { border-color: rgba(67, 217, 139, 0.28); }

.m3-thread-card {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    border: 1px solid rgba(67, 217, 139, 0.25);
    border-radius: 8px;
    padding: 22px;
    background:
        linear-gradient(120deg, rgba(67, 217, 139, 0.08), rgba(40, 213, 255, 0.04)),
        color-mix(in srgb, var(--surface) 91%, transparent);
    box-shadow: var(--shadow);
}

.m3-thread-icon {
    display: grid;
    width: 76px;
    height: 76px;
    place-items: center;
    border: 1px solid rgba(67, 217, 139, 0.35);
    border-radius: 8px;
    background: rgba(67, 217, 139, 0.1);
    color: var(--success);
    font-size: 1.7rem;
}

.m3-thread-card h2 { margin-bottom: 6px; }
.m3-thread-card p { color: var(--muted); }
.m3-thread-key { margin: 12px 0 0; border-left: 3px solid var(--success); padding: 9px 12px; color: var(--text) !important; font-weight: 800; }

.m3-theory-line,
.m3-key-note,
.m3-warning-note,
.m3-investigation-rule {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    border: 1px solid rgba(40, 213, 255, 0.24);
    border-radius: 8px;
    padding: 13px 15px;
    background: rgba(40, 213, 255, 0.07);
}

.m3-key-note > i,
.m3-theory-line > i,
.m3-investigation-rule > i { margin-top: 4px; color: var(--secondary); }
.m3-warning-note { border-color: rgba(255, 191, 71, 0.32); background: rgba(255, 191, 71, 0.08); }
.m3-warning-note > i { margin-top: 4px; color: var(--warning); }

/* Beginner setup */
.m3-setup-layout { display: grid; grid-template-columns: minmax(290px,.85fr) minmax(0,1.15fr); gap: 16px; }
.m3-setup-list { display: grid; align-content: start; gap: 8px; }
.m3-setup-list button { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 11px; background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; }
.m3-setup-list button > i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 8px; background: rgba(40,213,255,.08); color: var(--secondary); }
.m3-setup-list button > span { display: grid; gap: 2px; min-width: 0; }
.m3-setup-list small { color: var(--muted); }
.m3-setup-list b { border-radius: 999px; padding: 4px 8px; background: rgba(67,217,139,.1); color: var(--success); font-size: .68rem; white-space: nowrap; }
.m3-setup-list button.is-active { border-color: var(--secondary); background: rgba(40,213,255,.08); }
.m3-setup-detail { display: grid; min-height: 100%; grid-template-columns: 64px minmax(0,1fr); align-content: start; gap: 15px; border: 1px solid rgba(40,213,255,.28); border-radius: 8px; padding: 18px; background: color-mix(in srgb,var(--surface-2) 88%,transparent); }
.m3-setup-detail > span { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 8px; background: rgba(40,213,255,.1); color: var(--secondary); font-size: 1.35rem; }
.m3-setup-detail h3 { margin-bottom: 6px; }
.m3-setup-detail p:not(.eyebrow) { color: var(--muted); }
.m3-setup-action { margin: 14px 0 0; border-left: 3px solid var(--success); padding: 10px 12px; background: rgba(67,217,139,.06); }
.m3-setup-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid rgba(67,217,139,.3); border-radius: 8px; padding: 15px; background: rgba(67,217,139,.07); }
.m3-setup-summary > div { display: flex; align-items: center; gap: 11px; }
.m3-setup-summary i { color: var(--success); font-size: 1.4rem; }
.m3-setup-summary span span { display: grid; }
.m3-setup-summary small { color: var(--muted); }
.m3-setup-summary > span { color: var(--success); font-size: .76rem; font-weight: 900; }
.m3-setup-instructions { border: 1px solid var(--line); border-radius: 8px; padding: 15px; background: var(--surface-2); }
.m3-setup-instructions > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.m3-setup-instructions pre { max-height: 300px; white-space: pre-wrap; }

/* AI models */
.m3-model-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.m3-model-card {
    --model-rgb: 124, 92, 255;
    display: grid;
    min-height: 164px;
    place-items: center;
    gap: 5px;
    border: 1px solid rgba(var(--model-rgb), 0.32);
    border-radius: 8px;
    padding: 17px;
    background: linear-gradient(145deg, rgba(var(--model-rgb), 0.15), color-mix(in srgb, var(--surface-2) 92%, transparent));
    color: var(--text);
    cursor: pointer;
    transition: 180ms ease;
}

.model-luna { --model-rgb: 157, 126, 255; }
.model-terra { --model-rgb: 67, 217, 139; }
.model-sol { --model-rgb: 255, 191, 71; }
.m3-model-card:hover,
.m3-model-card:focus-visible,
.m3-model-card.is-active { border-color: rgb(var(--model-rgb)); box-shadow: 0 0 24px rgba(var(--model-rgb), 0.22); transform: translateY(-3px); }
.m3-model-card:focus-visible { outline: 2px solid var(--secondary); outline-offset: 3px; }
.m3-model-symbol { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; background: rgba(var(--model-rgb), 0.13); color: rgb(var(--model-rgb)); font-size: 1.5rem; }
.m3-model-card strong { font-size: 1.05rem; }
.m3-model-card small { color: var(--muted); }

.m3-model-detail {
    display: grid;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.m3-model-detail-heading { display: flex; align-items: center; gap: 12px; }
.m3-model-detail-heading > span { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 8px; background: rgba(124, 92, 255, 0.12); color: #a98fff; font-size: 1.25rem; }
.m3-model-detail-heading h3,
.m3-model-detail-heading p { margin-bottom: 0; }
.m3-model-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.m3-model-facts article { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--surface); }
.m3-model-facts span { color: var(--muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.m3-model-facts strong { font-size: 0.83rem; line-height: 1.35; }
.m3-model-example { margin: 0; border-left: 3px solid var(--primary); padding: 9px 12px; background: rgba(124, 92, 255, 0.07); }

.m3-effort-block { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.m3-effort-block h3 { margin-bottom: 0; }
.m3-effort-control { display: flex; flex-wrap: wrap; gap: 7px; }
.m3-effort-control button { border: 1px solid var(--line); border-radius: 999px; padding: 8px 11px; background: var(--surface-2); color: var(--muted); cursor: pointer; }
.m3-effort-control button.is-active { border-color: var(--secondary); background: rgba(40, 213, 255, 0.12); color: var(--text); }

.m3-ai-matrix { display: grid; grid-template-columns: minmax(230px, 0.7fr) minmax(0, 1.3fr); gap: 16px; }
.m3-scenario-list { display: grid; gap: 9px; }
.m3-scenario-list button { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; }
.m3-scenario-list button > i { color: var(--secondary); }
.m3-scenario-list button span { display: grid; gap: 2px; }
.m3-scenario-list button small { color: var(--muted); }
.m3-scenario-list button.is-active { border-color: var(--secondary); background: rgba(40, 213, 255, 0.1); }
.m3-ai-recommendation { border: 1px solid rgba(40, 213, 255, 0.24); border-radius: 8px; padding: 18px; background: rgba(40, 213, 255, 0.055); }
.m3-ai-recommendation h3 { margin-bottom: 5px; }
.m3-ai-recommendation > p:not(.eyebrow) { color: var(--muted); }
.m3-ai-gauges { display: grid; gap: 10px; margin-top: 16px; }
.m3-ai-gauges label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; color: var(--muted); font-size: 0.78rem; }
.m3-ai-gauges label > i { overflow: hidden; display: block; height: 8px; grid-column: 1 / -1; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.m3-ai-gauges b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--secondary)); transition: width 280ms ease; }
.m3-benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.m3-benefit-grid article { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: var(--surface-2); }
.m3-benefit-grid i { margin-bottom: 10px; color: var(--success); font-size: 1.25rem; }
.m3-benefit-grid strong { display: block; margin-bottom: 4px; }
.m3-benefit-grid p { margin: 0; color: var(--muted); font-size: 0.82rem; }

/* DevTools */
.m3-keycap { display: grid; min-width: 62px; min-height: 46px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 8px; background: #0a0d18; color: #fff; box-shadow: inset 0 -4px 0 rgba(255, 255, 255, 0.08), 0 8px 20px rgba(0, 0, 0, 0.24); font-weight: 900; }
.m3-devtools-shell { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #0b0f1b; color: #e9eef8; }
.m3-browser-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; min-height: 52px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 8px 14px; background: #151a27; }
.m3-browser-bar > div { overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 7px; padding: 7px 12px; background: #0f1420; color: #aeb8ca; text-overflow: ellipsis; white-space: nowrap; }
.m3-mac-dots { display: flex; gap: 6px; }
.m3-mac-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff645f; }
.m3-mac-dots i:nth-child(2) { background: #ffbd44; }
.m3-mac-dots i:nth-child(3) { background: #20ca55; }
.m3-devtools-tabs { display: flex; overflow-x: auto; gap: 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 0 10px; }
.m3-devtools-tabs button { border: 0; border-bottom: 2px solid transparent; padding: 11px 13px; background: transparent; color: #9ba6ba; cursor: pointer; }
.m3-devtools-tabs button.is-active { border-bottom-color: #28d5ff; color: #fff; }
.m3-devtools-workspace { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr); min-height: 330px; }
.m3-devtools-visual { overflow: auto; border-right: 1px solid rgba(255, 255, 255, 0.1); padding: 18px; font: 0.82rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.m3-devtools-visual p { margin-bottom: 7px; }
.console-error { border-left: 3px solid #ff6687; padding: 8px 10px; background: rgba(255, 102, 135, 0.1); color: #ff9bb1; }
.console-error span { margin-right: 8px; font-weight: 900; }
.console-link { color: #6abfff; }
.console-input { color: #aeb8ca; }
.m3-devtools-explanation { padding: 18px; background: #111724; }
.m3-devtools-explanation h3 { margin-bottom: 7px; }
.m3-devtools-explanation > p { color: #aeb8ca; }
.m3-devtools-explanation > div { border-left: 3px solid #28d5ff; padding: 9px 12px; background: rgba(40, 213, 255, 0.07); }
.m3-devtools-explanation > div p { margin: 3px 0 0; color: #c5cede; }
.network-table { width: 100%; border-collapse: collapse; }
.network-table th,
.network-table td { border-bottom: 1px solid rgba(255,255,255,.09); padding: 8px; text-align: left; }
.network-ok { color: #66e3a2; }
.network-fail { color: #ff7998; }
.element-tree .tag { color: #7fc8ff; }
.element-tree .attr { color: #caa8ff; }
.storage-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.storage-grid span { border: 1px solid rgba(255,255,255,.1); padding: 10px; background: rgba(255,255,255,.04); }

/* Bug laboratory */
.m3-bug-workspace { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; }
.m3-bug-list { display: grid; align-content: start; gap: 7px; max-height: 640px; overflow-y: auto; padding-right: 4px; }
.m3-bug-list button { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--surface-2); color: var(--muted); text-align: left; cursor: pointer; }
.m3-bug-list button i { width: 22px; color: var(--secondary); text-align: center; }
.m3-bug-list button.is-active { border-color: var(--warning); background: rgba(255, 191, 71, 0.09); color: var(--text); }
.m3-investigation { display: grid; gap: 13px; min-width: 0; }
.m3-investigation > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.m3-investigation > header h3 { margin-bottom: 0; }
.m3-investigation > header > span { border: 1px solid rgba(255, 191, 71, 0.38); border-radius: 999px; padding: 6px 10px; background: rgba(255,191,71,.09); color: var(--warning); font-weight: 850; }
.m3-real-page-launch { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 14px; border: 1px solid rgba(40,213,255,.3); border-radius: 8px; padding: 16px; background: linear-gradient(135deg,rgba(40,213,255,.08),rgba(124,92,255,.06)); }
.m3-real-page-launch > span { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 8px; background: rgba(40,213,255,.1); color: var(--secondary); font-size: 1.3rem; }
.m3-real-page-launch > div { display: grid; gap: 4px; min-width: 0; }
.m3-real-page-launch code { overflow: hidden; color: var(--secondary); text-overflow: ellipsis; white-space: nowrap; }
.m3-real-page-launch p { margin: 0; color: var(--muted); font-size: .8rem; }
.m3-real-page-launch .solid-button { text-decoration: none; white-space: nowrap; }
.m3-broken-page { overflow: hidden; min-height: 240px; border: 1px solid var(--line); border-radius: 8px; background: #f3f5fa; color: #151b2b; }
.m3-broken-browser { display: flex; align-items: center; gap: 12px; min-height: 42px; border-bottom: 1px solid #d2d8e3; padding: 8px 12px; background: #e6e9f0; }
.m3-broken-browser small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m3-broken-content { padding: 26px; }
.m3-broken-content button { border: 0; border-radius: 0; padding: 8px 12px; }
.m3-bug-description { margin: 0; color: var(--muted); }
.m3-investigation-actions,
.m3-ftp-actions,
.m3-backup-actions,
.m3-step-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.m3-bug-devtools { overflow: hidden; border: 1px solid rgba(255, 191, 71, 0.3); border-radius: 8px; background: #080b14; }
.m3-bug-devtools-tabs { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.1); padding: 9px 12px; color: #fff; }
.m3-bug-devtools-tabs span { border-bottom: 2px solid var(--warning); padding-bottom: 3px; }
.m3-bug-devtools-tabs small { color: #96a2b6; }
.m3-bug-devtools pre { max-height: 180px; }
.m3-bug-solution { border-top: 1px solid rgba(67, 217, 139, 0.24); padding: 15px; background: rgba(67,217,139,.06); }
.m3-bug-solution > div:first-child { margin-bottom: 10px; }
.m3-bug-solution .prompt-box { max-height: 240px; }

/* Environments */
.m3-environment-flow { display: grid; grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr); align-items: center; gap: 9px; }
.m3-environment-flow > i { color: var(--secondary); text-align: center; }
.m3-environment-flow button { --environment-rgb: 40,213,255; display: grid; min-height: 116px; grid-template-columns: 44px minmax(0,1fr); align-items: center; gap: 11px; border: 1px solid rgba(var(--environment-rgb),.28); border-radius: 8px; padding: 14px; background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; }
.m3-environment-flow button:nth-of-type(2) { --environment-rgb: 255,191,71; }
.m3-environment-flow button:nth-of-type(3) { --environment-rgb: 67,217,139; }
.m3-environment-flow button > i { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 8px; background: rgba(var(--environment-rgb),.1); color: rgb(var(--environment-rgb)); }
.m3-environment-flow button span { display: grid; gap: 3px; }
.m3-environment-flow button small { color: var(--muted); }
.m3-environment-flow button.is-active { border-color: rgb(var(--environment-rgb)); box-shadow: 0 0 22px rgba(var(--environment-rgb),.2); transform: translateY(-3px); }
.m3-environment-detail { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 15px; border: 1px solid rgba(40,213,255,.28); border-radius: 8px; padding: 17px; background: var(--surface-2); }
.m3-environment-detail > span { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 8px; background: rgba(40,213,255,.1); color: var(--secondary); font-size: 1.35rem; }
.m3-environment-detail h3 { margin-bottom: 5px; }
.m3-environment-detail > div > p:not(.eyebrow) { color: var(--muted); }
.m3-environment-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-top: 13px; }
.m3-environment-facts span { display: grid; gap: 4px; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: var(--surface); }
.m3-environment-facts strong { color: var(--muted); font-size: .68rem; text-transform: uppercase; }
.m3-environment-facts b { overflow-wrap: anywhere; font-size: .8rem; }

/* Domains */
.m3-domain-stage { position: relative; display: grid; min-height: 480px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 140px 1fr; gap: 100px 34px; align-items: center; border: 1px solid rgba(40,213,255,.22); border-radius: 8px; padding: 28px; background: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),#090e20; background-size: 34px 34px; }
.m3-domain-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.m3-domain-stage svg path { fill: none; stroke: rgba(239,246,255,.58); stroke-width: .45; vector-effect: non-scaling-stroke; }
.m3-domain-infra { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 7px 10px; background: rgba(9,14,32,.92); color: #c4cee0; font-size: .7rem; font-weight: 850; transition: 180ms ease; }
.m3-domain-infra.dns { top: 16px; left: 16px; }
.m3-domain-infra.hosting { right: 16px; bottom: 16px; }
.m3-domain-infra i { color: var(--secondary); }
.m3-domain-stage [data-domain-concept-target].is-concept-highlight:not(svg) { border-color: var(--secondary); box-shadow: 0 0 28px rgba(40,213,255,.42); transform: translateY(-3px); }
.m3-domain-stage svg.is-concept-highlight path { stroke: #28d5ff; stroke-width: .8; filter: drop-shadow(0 0 4px rgba(40,213,255,.9)); }
.m3-domain-node { --domain-rgb: 40, 213, 255; position: relative; z-index: 2; display: grid; min-height: 112px; place-items: center; gap: 5px; border: 1px solid rgba(var(--domain-rgb),.38); border-radius: 8px; padding: 12px; background: linear-gradient(145deg,rgba(var(--domain-rgb),.15),rgba(14,20,39,.96)); color: #f6f9ff; cursor: pointer; transition: 180ms ease; }
.m3-domain-node.root { grid-column: 2; --domain-rgb: 255,191,71; }
.m3-domain-node.academy { grid-column: 1; --domain-rgb: 124,92,255; }
.m3-domain-node.taskflow { grid-column: 2; --domain-rgb: 67,217,139; }
.m3-domain-node.api { grid-column: 3; --domain-rgb: 40,213,255; }
.m3-domain-node i { color: rgb(var(--domain-rgb)); font-size: 1.35rem; }
.m3-domain-node small { color: #aeb9ce; }
.m3-domain-node:hover,
.m3-domain-node:focus-visible,
.m3-domain-node.is-active { border-color: rgb(var(--domain-rgb)); box-shadow: 0 0 24px rgba(var(--domain-rgb),.25); transform: translateY(-3px); }
.m3-domain-packet { position: absolute; z-index: 4; left: 50%; top: 17%; display: grid; width: 42px; height: 42px; place-items: center; border-radius: 8px; background: linear-gradient(135deg,var(--primary),var(--secondary)); color: #fff; box-shadow: 0 0 24px rgba(40,213,255,.45); translate: -50% -50%; transition: left 460ms ease, top 460ms ease; }
.m3-domain-detail { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 15px; border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: var(--surface-2); }
.m3-domain-detail > span { display: grid; width: 62px; height: 62px; place-items: center; border-radius: 8px; background: rgba(40,213,255,.1); color: var(--secondary); font-size: 1.35rem; }
.m3-domain-detail h3,
.m3-domain-detail p { margin-bottom: 4px; }
.m3-domain-definitions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.m3-domain-definitions button { border: 1px solid var(--line); border-radius: 8px; padding: 13px; background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; transition: 180ms ease; }
.m3-domain-definitions button:hover,
.m3-domain-definitions button:focus-visible,
.m3-domain-definitions button.is-active { border-color: var(--secondary); background: rgba(40,213,255,.08); transform: translateY(-2px); }
.m3-domain-definitions i { margin-bottom: 9px; color: var(--secondary); }
.m3-domain-definitions strong { display: block; }
.m3-domain-definitions p { margin: 3px 0 0; color: var(--muted); font-size: .8rem; }
.m3-domain-definitions small { display: block; margin-top: 8px; color: var(--secondary); font-weight: 800; }

/* FTP */
.m3-filezilla-shell { display: grid; grid-template-columns: minmax(0,1fr) 100px minmax(0,1fr); gap: 12px; align-items: stretch; }
.m3-ftp-pane { overflow: hidden; min-height: 390px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.m3-ftp-pane > header { display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); padding: 13px; background: rgba(40,213,255,.06); }
.m3-ftp-pane > header > i { color: var(--secondary); font-size: 1.25rem; }
.m3-ftp-pane > header div { display: grid; min-width: 0; }
.m3-ftp-pane > header small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.m3-file-list,
.m3-remote-list { display: grid; align-content: start; gap: 7px; min-height: 316px; padding: 12px; }
.m3-file-list button,
.m3-remote-file { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: var(--surface); color: var(--text); text-align: left; cursor: grab; }
.m3-file-list button i,
.m3-remote-file i { color: var(--secondary); }
.m3-file-list button span,
.m3-remote-file span { display: grid; }
.m3-file-list button small { color: var(--muted); }
.m3-file-list button.is-uploaded { opacity: .52; cursor: default; }
.m3-file-list button.is-modified { border-color: var(--warning); opacity: 1; cursor: pointer; box-shadow: 0 0 18px rgba(255,191,71,.16); }
.m3-file-list button.is-modified::after { content: "Modifié"; color: var(--warning); font-size: .68rem; font-weight: 900; }
.m3-file-list button.is-uploading { border-color: var(--secondary); box-shadow: 0 0 18px rgba(40,213,255,.18); }
.m3-remote-list > p { align-self: center; color: var(--muted); text-align: center; }
.m3-remote-list > p i { display: block; margin-bottom: 8px; font-size: 1.5rem; }
.m3-remote-file::after { content: attr(data-version); color: var(--success); font-size: .66rem; font-weight: 900; }
.m3-remote-file.is-updated { border-color: var(--secondary); animation: m3-remote-update 600ms ease; }
@keyframes m3-remote-update { 50% { box-shadow: 0 0 26px rgba(40,213,255,.45); transform: translateY(-2px); } }
.remote-pane.is-dragover { border-color: var(--success); box-shadow: inset 0 0 28px rgba(67,217,139,.12); }
.m3-transfer-lane { position: relative; display: grid; place-items: center; align-content: center; gap: 11px; color: var(--secondary); text-align: center; }
.m3-transfer-lane > i { font-size: 1.4rem; }
.m3-transfer-lane small { color: var(--muted); font-size: .7rem; }
.m3-transfer-lane > span { position: absolute; top: 42%; left: 5%; display: none; width: 42px; height: 42px; place-items: center; border-radius: 8px; background: linear-gradient(135deg,var(--primary),var(--secondary)); color: #fff; box-shadow: 0 0 22px rgba(40,213,255,.4); }
.m3-transfer-lane > span.is-moving { display: grid; animation: m3-upload-flight 900ms ease-in-out forwards; }
@keyframes m3-upload-flight { from { left: 0; transform: rotate(-6deg); } to { left: calc(100% - 42px); transform: rotate(6deg); } }
.m3-upload-status { display: grid; gap: 7px; }
.m3-upload-status > div { display: flex; justify-content: space-between; gap: 12px; }
.m3-upload-status > i { overflow: hidden; height: 10px; border-radius: 999px; background: rgba(255,255,255,.08); }
.m3-upload-status b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--primary),var(--success)); transition: width 160ms linear; }
.m3-ftp-update { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 13px; border: 1px solid rgba(255,191,71,.35); border-radius: 8px; padding: 14px; background: rgba(255,191,71,.07); }
.m3-ftp-update[hidden] { display: none; }
.m3-ftp-update > i { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 8px; background: rgba(255,191,71,.12); color: var(--warning); }
.m3-ftp-update p { margin: 3px 0 0; color: var(--muted); }
.m3-ftp-update.is-complete { border-color: rgba(67,217,139,.38); background: rgba(67,217,139,.07); }
.m3-ftp-update.is-complete > i { background: rgba(67,217,139,.12); color: var(--success); }

/* Backup */
.m3-backup-stage { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr); align-items: center; gap: 9px; min-height: 320px; border: 1px solid rgba(124,92,255,.24); border-radius: 8px; padding: 22px; background: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),#0a0e20; background-size: 34px 34px; }
.m3-backup-stage > article { display: grid; min-height: 210px; align-content: center; justify-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: 15px; background: rgba(16,22,43,.94); color: #f6f8ff; text-align: center; transition: 220ms ease; }
.m3-backup-stage > article > i { color: var(--secondary); font-size: 2rem; }
.m3-backup-stage > article ul { margin: 0; padding: 0; color: #abb6ca; font-size: .78rem; list-style: none; }
.m3-backup-stage > .fa-arrow-right,
.m3-backup-stage > .fa-arrow-left { color: rgba(255,255,255,.65); text-align: center; }
.m3-backup-project.is-deleted { border-color: rgba(255,107,145,.5); opacity: .45; filter: grayscale(1); transform: scale(.95); }
.m3-backup-project.is-deleted > i { color: var(--danger); }
.m3-backup-result.is-restored { border-color: var(--success); box-shadow: 0 0 24px rgba(67,217,139,.24); }
.m3-restore-packet { position: absolute; z-index: 4; left: 50%; top: 50%; display: none; width: 46px; height: 46px; place-items: center; border-radius: 8px; background: linear-gradient(135deg,var(--primary),var(--secondary)); color: #fff; }
.m3-restore-packet.is-moving { display: grid; animation: m3-restore 1.1s ease-in-out forwards; }
@keyframes m3-restore { from { left: 50%; } to { left: 18%; } }
.danger-button { border-color: rgba(255,107,145,.35) !important; color: var(--danger) !important; }
.m3-backup-rules { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.m3-backup-rules article { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: var(--surface-2); }
.m3-backup-rules i { margin-bottom: 9px; color: var(--secondary); }
.m3-backup-rules strong { display: block; }
.m3-backup-rules p { margin: 3px 0 0; color: var(--muted); font-size: .82rem; }
.m3-backup-guide { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.m3-backup-tree,
.m3-backup-checklist { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: var(--surface-2); }
.m3-backup-tree h3,
.m3-backup-checklist h3 { margin-bottom: 12px; }
.m3-backup-tree pre { max-height: 390px; margin: 0; white-space: pre; overflow: auto; }
.m3-backup-checklist ol { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; counter-reset: backup-step; }
.m3-backup-checklist li { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 3px 9px; border-bottom: 1px solid var(--line); padding: 0 0 9px; counter-increment: backup-step; }
.m3-backup-checklist li::before { content: counter(backup-step); display: grid; width: 26px; height: 26px; grid-row: 1/3; place-items: center; border-radius: 50%; background: rgba(40,213,255,.1); color: var(--secondary); font-weight: 900; }
.m3-backup-checklist li span { color: var(--muted); font-size: .79rem; }

/* Security */
.m3-security-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.m3-security-grid button { display: flex; min-height: 78px; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--surface-2); color: var(--muted); text-align: left; cursor: pointer; }
.m3-security-grid button i { display: grid; width: 34px; height: 34px; place-items: center; flex: 0 0 auto; border-radius: 8px; background: rgba(40,213,255,.08); color: var(--secondary); }
.m3-security-grid button.is-active { border-color: var(--secondary); background: rgba(40,213,255,.08); color: var(--text); }
.m3-security-detail { display: grid; gap: 14px; border: 1px solid var(--line); border-radius: 8px; padding: 18px; background: color-mix(in srgb,var(--surface-2) 88%,transparent); }
.m3-security-detail > header { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 14px; }
.m3-security-detail > header > span { display: grid; width: 62px; height: 62px; place-items: center; border-radius: 8px; background: rgba(40,213,255,.1); color: var(--secondary); font-size: 1.35rem; }
.m3-security-detail h3 { margin-bottom: 4px; }
.m3-security-detail header p:last-child { margin: 0; color: var(--muted); }
.m3-security-compare { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.m3-security-compare article { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 13px; background: var(--surface); }
.m3-security-compare article > span { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 9px; font-weight: 900; }
.m3-security-compare pre { max-height: 180px; }
.m3-security-compare p { margin: 9px 0 0; color: var(--muted); font-size: .8rem; }
.security-bad { border-color: rgba(255,107,145,.28) !important; }
.security-bad > span { color: var(--danger); }
.security-good { border-color: rgba(67,217,139,.28) !important; }
.security-good > span { color: var(--success); }
.m3-security-codex { display: flex; align-items: flex-start; gap: 11px; margin: 0; border-left: 3px solid var(--secondary); padding: 10px 12px; background: rgba(40,213,255,.06); }
.m3-security-codex > i { margin-top: 4px; color: var(--secondary); }
.m3-security-codex > span { display: grid; gap: 3px; }
.m3-security-impact { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.m3-security-impact article { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 10px; border: 1px solid rgba(255,107,145,.28); border-radius: 8px; padding: 12px; background: rgba(255,107,145,.06); }
.m3-security-impact article > i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 8px; background: rgba(255,107,145,.1); color: var(--danger); }
.m3-security-impact article > span { display: grid; gap: 3px; }
.m3-security-impact article span span { color: var(--muted); font-size: .8rem; }

/* Codex permissions */
.m3-permission-layout { display: grid; grid-template-columns: minmax(270px,.75fr) minmax(0,1.25fr); gap: 16px; }
.m3-permission-list { display: grid; align-content: start; gap: 8px; }
.m3-permission-list button { display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 11px; background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; }
.m3-permission-list button > i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 8px; background: rgba(40,213,255,.08); color: var(--secondary); }
.m3-permission-list button span { display: grid; gap: 2px; }
.m3-permission-list button small { color: var(--muted); }
.m3-permission-list button.is-active { border-color: var(--secondary); background: rgba(40,213,255,.08); }
.m3-permission-dialog { display: grid; align-content: start; gap: 14px; border: 1px solid rgba(40,213,255,.3); border-radius: 8px; padding: 18px; background: var(--surface-2); box-shadow: var(--shadow); }
.m3-permission-dialog-top { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 12px; }
.m3-permission-dialog-top > span { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 8px; background: rgba(40,213,255,.1); color: var(--secondary); font-size: 1.2rem; }
.m3-permission-dialog h3 { margin-bottom: 0; }
.m3-permission-dialog > p { margin: 0; color: var(--muted); }
.m3-permission-risk { display: grid; gap: 4px; border-left: 3px solid var(--warning); padding: 10px 12px; background: rgba(255,191,71,.07); }
.m3-permission-risk span { color: var(--muted); }
.m3-permission-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.m3-permission-choices button { border: 1px solid var(--line); border-radius: 8px; padding: 9px; background: var(--surface); color: var(--text); cursor: pointer; }
.m3-permission-choices button.is-recommended { border-color: var(--success); }
.m3-permission-choices button.is-selected { background: rgba(40,213,255,.1); box-shadow: 0 0 16px rgba(40,213,255,.16); }
.m3-permission-feedback { border-radius: 8px; padding: 9px 11px; background: rgba(40,213,255,.06); color: var(--text) !important; }
.m3-permission-revoke { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 14px; border: 1px solid rgba(124,92,255,.28); border-radius: 8px; padding: 16px; background: rgba(124,92,255,.06); }
.m3-permission-revoke > i { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 8px; background: rgba(124,92,255,.1); color: #ac98ff; font-size: 1.3rem; }
.m3-permission-revoke h3 { margin-bottom: 8px; }
.m3-permission-revoke ol { margin: 0; padding-left: 20px; color: var(--muted); }

/* Mission and challenge */
.mission-progress { overflow: hidden; height: 10px; border-radius: 999px; background: rgba(255,255,255,.08); }
.mission-progress > div { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--primary),var(--success)); transition: width 220ms ease; }
.m3-mission-list { display: grid; gap: 10px; }
.m3-mission-step { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb,var(--surface-2) 86%,transparent); }
.m3-mission-step.is-open { border-color: rgba(40,213,255,.34); }
.m3-mission-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 13px; }
.m3-mission-heading label { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.m3-mission-heading input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 4px; accent-color: var(--success); }
.m3-mission-heading label > span { display: grid; gap: 2px; }
.m3-mission-heading small { color: var(--secondary); font-weight: 900; text-transform: uppercase; }
.m3-mission-heading em { color: var(--muted); font-size: .8rem; font-style: normal; }
.m3-mission-heading button { min-width: 155px; }
.m3-mission-heading button i { margin-left: 6px; transition: transform 160ms ease; }
.m3-mission-heading button[aria-expanded="true"] i { transform: rotate(180deg); }
.m3-mission-panel { display: grid; gap: 13px; border-top: 1px solid var(--line); padding: 15px; }
.m3-mission-panel[hidden] { display: none; }
.m3-mission-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.m3-mission-meta > span { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: var(--surface); font-size: .8rem; }
.m3-mission-meta i { color: var(--secondary); }
.m3-mission-prompt > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.m3-mission-prompt pre { max-height: 390px; white-space: pre-wrap; overflow-wrap: anywhere; }
.m3-mission-test { display: flex; align-items: flex-start; gap: 9px; margin: 0; border-left: 3px solid var(--success); padding: 11px; background: rgba(67,217,139,.07); }
.m3-mission-test > i { margin-top: 4px; color: var(--success); }
.m3-mission-test span { display: grid; gap: 3px; }
.m3-mission-complete { display: flex; align-items: center; gap: 14px; border: 1px solid rgba(67,217,139,.38); border-radius: 8px; padding: 18px; background: rgba(67,217,139,.09); }
.m3-mission-complete > i { color: var(--success); font-size: 2rem; }
.m3-mission-complete p { margin: 3px 0 0; }
/* Light mode */
[data-theme="light"] .m3-devtools-shell,
[data-theme="light"] .m3-domain-stage,
[data-theme="light"] .m3-backup-stage { box-shadow: inset 0 0 0 1px rgba(15,23,42,.04); }
[data-theme="light"] .m3-domain-node { background: linear-gradient(145deg,rgba(var(--domain-rgb,40,213,255),.14),rgba(255,255,255,.98) 74%); color: #10182e; }
[data-theme="light"] .m3-domain-node small { color: #53627d; }
[data-theme="light"] .m3-file-list button,
[data-theme="light"] .m3-remote-file { background: #fff; }

@media (max-width: 1050px) {
    .m3-model-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .m3-benefit-grid,
    .m3-security-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .m3-domain-definitions { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 820px) {
    .m3-model-grid,
    .m3-backup-rules { grid-template-columns: 1fr; }
    .m3-model-card { min-height: 120px; }
    .m3-effort-block { align-items: flex-start; flex-direction: column; }
    .m3-ai-matrix,
    .m3-devtools-workspace,
    .m3-bug-workspace,
    .m3-setup-layout,
    .m3-backup-guide,
    .m3-permission-layout { grid-template-columns: 1fr; }
    .m3-devtools-visual { min-height: 260px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
    .m3-bug-list { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: 260px; }
    .m3-filezilla-shell { grid-template-columns: 1fr; }
    .m3-transfer-lane { min-height: 80px; }
    .m3-transfer-lane > .fa-arrow-right { transform: rotate(90deg); }
    .m3-transfer-lane > span.is-moving { animation-name: m3-upload-flight-mobile; }
    @keyframes m3-upload-flight-mobile { from { left: calc(50% - 21px); top: 0; } to { left: calc(50% - 21px); top: calc(100% - 42px); } }
    .m3-backup-stage { grid-template-columns: 1fr; }
    .m3-backup-stage > .fa-arrow-left,
    .m3-backup-stage > .fa-arrow-right { transform: rotate(90deg); }
    .m3-restore-packet { display: none !important; }
    .m3-security-compare,
    .m3-security-impact,
    .m3-mission-meta { grid-template-columns: 1fr; }
    .m3-mission-heading { grid-template-columns: 1fr; }
    .m3-mission-heading button { width: 100%; }
    .m3-environment-facts { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .m3-thread-card,
    .m3-domain-detail,
    .m3-security-detail > header,
    .m3-permission-revoke,
    .m3-setup-detail,
    .m3-environment-detail,
    .m3-real-page-launch,
    .m3-ftp-update { grid-template-columns: 1fr; }
    .m3-thread-icon,
    .m3-domain-detail > span,
    .m3-security-detail > header > span,
    .m3-setup-detail > span { width: 56px; height: 56px; }
    .m3-setup-list button { grid-template-columns: 36px minmax(0,1fr); }
    .m3-setup-list b { grid-column: 2; justify-self: start; }
    .m3-setup-summary { align-items: flex-start; flex-direction: column; }
    .m3-setup-instructions > div { align-items: stretch; flex-direction: column; }
    .m3-setup-instructions button { width: 100%; }
    .m3-real-page-launch .solid-button,
    .m3-ftp-update button { width: 100%; }
    .m3-permission-choices { grid-template-columns: 1fr; }
    .m3-environment-flow { grid-template-columns: 1fr; }
    .m3-environment-flow > i { transform: rotate(90deg); }
    .m3-model-facts,
    .m3-benefit-grid,
    .m3-security-grid,
    .m3-domain-definitions { grid-template-columns: 1fr; }
    .m3-effort-control { display: grid; width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .m3-effort-control button:last-child { grid-column: 1 / -1; }
    .m3-bug-list { grid-template-columns: 1fr; }
    .m3-investigation > header { align-items: flex-start; flex-direction: column; }
    .m3-domain-stage { min-height: 720px; grid-template-columns: 1fr; grid-template-rows: repeat(4,140px); gap: 24px; }
    .m3-domain-stage svg { display: none; }
    .m3-domain-node.root,
    .m3-domain-node.academy,
    .m3-domain-node.taskflow,
    .m3-domain-node.api { grid-column: 1; }
    .m3-domain-packet { display: none; }
    .m3-step-controls > *,
    .m3-ftp-actions > *,
    .m3-backup-actions > *,
    .m3-investigation-actions > * { width: 100%; }
    .m3-mission-prompt > div { align-items: stretch; flex-direction: column; }
    .m3-mission-prompt button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .module-three-layout *,
    .module-three-layout *::before,
    .module-three-layout *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}