/* Support Guide Shared Styles */

.wizard-flow {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.wizard-step {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #d8e5f4;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.wizard-step-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.wizard-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    background: #e8f1ff;
    border: 1px solid #bfd3ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 800;
    padding: 5px 10px;
    letter-spacing: .04em;
}

.wizard-step h3 {
    margin: 8px 0 4px;
    font-size: 18px;
    color: #0f172a;
}

.wizard-step p {
    margin: 0;
    font-size: 14px;
    color: #475569;
    line-height: 1.75;
}

.wizard-tip {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 13px;
    color: #475569;
}

.wizard-warning {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #9a3412;
    font-size: 13px;
    line-height: 1.7;
}

.step-guide-note {
    margin: 4px 0 12px;
    font-size: 13px;
    color: #475569;
}

.step-screen-title {
    margin: 8px 0 8px;
    font-size: 15px;
    color: #1f2937;
}

.step-ol {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    counter-reset: guide-step;
    display: grid;
    gap: 10px;
}

.step-ol li {
    counter-increment: guide-step;
    position: relative;
    background: #f8fbff;
    border: 1px solid #d8e5f4;
    border-radius: 10px;
    padding: 10px 12px 10px 90px;
    line-height: 1.7;
}

.step-ol li::before {
    content: "STEP " counter(guide-step);
    position: absolute;
    left: 10px;
    top: 9px;
    font-size: 12px;
    font-weight: 800;
    color: #1d4ed8;
    background: #e8f1ff;
    border: 1px solid #bfd3ff;
    border-radius: 9999px;
    padding: 3px 10px;
}

.guide-intro {
    color: var(--text-main);
    font-size: 15px;
    line-height: 1.8;
}

.guide-note-box,
.guide-tip-box,
.guide-warning-box {
    border-radius: 18px;
    padding: 18px 20px;
    margin-top: 14px;
}

.guide-note-box {
    background: #f6fbff;
    border: 1px solid #cfe0f6;
}

.guide-tip-box {
    background: #f4f8f3;
    border: 1px solid #cfe3cf;
}

.guide-warning-box {
    background: #fff8eb;
    border: 1px solid #f0d7a8;
}

.guide-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 800;
}

.guide-steps {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.guide-step {
    border: 1px solid #dce6f2;
    border-radius: 24px;
    background: #fff;
    padding: 24px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .06);
}

.guide-step h3 {
    margin: 10px 0 8px;
    font-size: 24px;
}

.guide-step p {
    margin: 0;
    color: var(--text-main);
    line-height: 1.8;
}

.guide-mini-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.guide-mini-grid dl {
    margin: 0;
    background: #f8fbff;
    border: 1px solid #dae7f8;
    border-radius: 16px;
    padding: 12px 14px;
}

.guide-mini-grid dt {
    font-size: 12px;
    color: #56708f;
    margin-bottom: 6px;
}

.guide-mini-grid dd {
    margin: 0;
    font-weight: 700;
    color: #14324f;
}

.settings-mini-table {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.settings-mini-item {
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #fff;
    padding: 10px 12px;
}

.settings-mini-item dt {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 4px;
}

.settings-mini-item dd {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.screen-title {
    margin: 0 0 10px;
    font-size: 15px;
    color: #1f2937;
}

.mock-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 6px;
}

.mock-pill-row,
.screen-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mock-pill,
.screen-pill {
    font-size: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 9999px;
    padding: 5px 10px;
    color: #475569;
}

.mock-pill.active,
.screen-pill.active {
    border-color: #2563eb;
    color: #1d4ed8;
    background: #eaf2ff;
    font-weight: 700;
}

.mock-toggle,
.screen-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #334155;
}

.mock-switch {
    width: 34px;
    height: 20px;
    border-radius: 9999px;
    background: #34c759;
    position: relative;
}

.mock-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 16px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
}

.mock-actions,
.screen-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.mock-note,
.screen-note {
    margin-top: 10px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.6;
}

.mock-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    font-size: 12px;
}

.mock-toolbar-status {
    margin-left: auto;
    font-weight: 700;
}

.mock-guide {
    margin-top: 14px;
    border: 1px solid #d7e1ee;
    border-radius: 18px;
    overflow: hidden;
    background: #f8fafc;
    box-shadow: 0 16px 36px rgba(15,23,42,.08);
}

.mock-titlebar,
.app-titlebar,
.desktop-titlebar,
.legacy-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-size: 13px;
}

.mock-titlebar {
    background: linear-gradient(180deg,#f3f6fb,#e7edf5);
    border-bottom: 1px solid #d6dfea;
    color: #334155;
}

.mock-dots,
.app-titlebar-dots,
.desktop-dots {
    display: flex;
    gap: 7px;
}

.mock-dots span,
.app-titlebar-dots span,
.desktop-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
}

.mock-dot-orange {
    background: #f97316;
}

.mock-dot-yellow {
    background: #facc15;
}

.mock-dot-green {
    background: #22c55e;
}

.mock-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 320px;
}

.app-frame {
    margin-top: 18px;
    border: 1px solid #c7d3e5;
    border-radius: 18px;
    overflow: hidden;
    background: #eef4fb;
    box-shadow: 0 24px 48px rgba(15,23,42,.14);
}

.app-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 360px;
}

.mock-main,
.desktop-main,
.legacy-main,
.app-main {
    display: grid;
    gap: 12px;
}

.app-sidebar {
    padding: 14px;
}

.app-sidebar h4 {
    margin: 0 0 10px;
    font-size: 13px;
    color: #516274;
}

.app-tree {
    display: grid;
    gap: 8px;
}

.app-tree div {
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 13px;
    color: #334155;
}

.app-tree div.active {
    background: #fff;
    border: 1px solid #cad7e6;
    color: #111827;
    font-weight: 700;
}

.desktop-toolbar,
.app-toolbar,
.legacy-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    font-size: 12px;
    border-bottom: 1px solid #d8dfeb;
}

.desktop-shell,
.legacy-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 320px;
}

.desktop-sidebar,
.legacy-side,
.mock-side {
    padding: 14px;
}

.desktop-sidebar h4,
.legacy-side h4 {
    margin: 0 0 10px;
    font-size: 13px;
    color: #475569;
}

.desktop-sidebar ul,
.legacy-list {
    display: grid;
    gap: 8px;
}

.desktop-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.desktop-sidebar li,
.legacy-list > div {
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 13px;
    color: #334155;
}

.desktop-sidebar li.active,
.legacy-list > div.active {
    background: #fff;
    border: 1px solid #cbd5e1;
    font-weight: 700;
    color: #0f172a;
}

.screen-panel,
.legacy-panel {
    border: 1px solid #d8e1ec;
    border-radius: 16px;
    background: #fff;
    padding: 16px;
}

.screen-panel h5,
.legacy-panel h5 {
    margin: 0 0 12px;
    font-size: 15px;
    color: #172554;
}

.screen-grid,
.legacy-grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 10px 12px;
    align-items: center;
}

.screen-grid label,
.legacy-grid label {
    font-size: 13px;
    color: #475569;
}

.screen-value,
.legacy-input {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #fff;
    color: #111827;
    font-size: 13px;
}

.screen-value.dim,
.legacy-input.dim {
    background: #f8fafc;
    color: #475569;
}

.screen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
}

.screen-btn.primary {
    background: #2563eb;
    color: #fff;
}

.screen-btn.secondary {
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #334155;
}

.screen-box,
.legacy-box {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1px solid #7aa2e8;
    background: #1d4ed8;
    position: relative;
    flex-shrink: 0;
}

.screen-box::after,
.legacy-box::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.legacy-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #334155;
}

.legacy-status {
    margin-top: 10px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.7;
}

.legacy-filepane {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.filepane {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.legacy-filebox {
    border: 1px solid #d7e2f0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.filelist {
    border: 1px solid #d9e2ee;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}

.legacy-filehead {
    padding: 8px 10px;
    background: #f3f4f6;
    border-bottom: 1px solid #d7e2f0;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
}

.filelist-head {
    display: grid;
    grid-template-columns: 1.4fr .6fr .7fr;
    gap: 8px;
    padding: 10px 12px;
    background: #f3f7fc;
    border-bottom: 1px solid #d9e2ee;
    font-size: 12px;
    color: #4b6380;
    font-weight: 700;
}

.legacy-filerow {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #eef2f7;
    font-size: 12px;
    color: #334155;
}

.filelist-row {
    display: grid;
    grid-template-columns: 1.4fr .6fr .7fr;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #eef2f7;
    font-size: 13px;
    color: #1f2937;
}

.legacy-filerow:last-child {
    border-bottom: none;
}

.filelist-row:last-child {
    border-bottom: none;
}

.status-note {
    padding: 12px 14px;
    border-radius: 14px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 13px;
}

.mock-win .mock-wrap,
.mock-ios .mock-wrap,
.mock-android .mock-wrap {
    margin-top: 14px;
    overflow: hidden;
}

.mock-win .mock-wrap {
    border: 1px solid #c5d4e8;
    border-radius: 12px;
    background: #fdfefe;
}

.mock-win .mock-head {
    background: linear-gradient(180deg, #f3f8ff 0%, #e8f1ff 100%);
    border-bottom: 1px solid #cfdcee;
    padding: 10px 14px;
    font-size: 13px;
    color: #1e3a5f;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mock-win .mock-head-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: 12px;
    letter-spacing: .08em;
    white-space: nowrap;
}

.mock-win .mock-toolbar {
    background: #f1f6ff;
    border-bottom: 1px solid #d5e2f3;
    color: #24415f;
}

.mock-win .mock-body {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 360px;
}

.mock-win .mock-side {
    display: block;
    background: #f6f9ff;
    border-right: 1px solid #d7e1f1;
    padding: 14px;
}

.mock-win .mock-side li.active {
    background: #dbeafe;
    color: #1e3a8a;
    border: 1px solid #93c5fd;
}

.mock-win .mock-main {
    padding: 16px;
    background: transparent;
    max-width: none;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    position: static;
}

.mock-win .mock-main::before {
    content: none;
}

.mock-win .mock-panel {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
    background: #fff;
}

.mock-win .mock-grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 8px 10px;
    align-items: center;
}

.mock-win .mock-input {
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
}

.mock-win .mock-toolbar-status {
    color: #1d4ed8;
}

.mock-win .mock-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d5e2f3;
    border-radius: 7px;
    background: #fff;
    padding: 5px 8px;
}

.mock-win .legacy-frame {
    margin-top: 18px;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    overflow: hidden;
    background: #eceff4;
    box-shadow: 0 24px 48px rgba(15,23,42,.14);
}

.mock-win.mock-outlook-new .mock-wrap {
    border-radius: 10px;
}

.mock-win.mock-outlook-new .mock-main {
    padding: 12px 14px 16px;
    background: #fbfdff;
}

.mock-win.mock-outlook-new .mock-panel {
    border: 1px solid #d7e2f0;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
}

.mock-win.mock-outlook-new .mock-input {
    padding: 7px 9px;
    border: 1px solid #b9c8dc;
    border-radius: 6px;
}

.mock-win.mock-thunderbird .mock-wrap {
    border-color: #c7d1df;
    background: #f7f9fc;
}

.mock-win.mock-thunderbird .mock-head {
    background: #e6ebf3;
    border-bottom-color: #c9d3e2;
    color: #1f2a3a;
}

.mock-win.mock-thunderbird .mock-toolbar {
    gap: 8px;
    padding: 7px 10px;
    background: #e9eef6;
    border-bottom-color: #ccd6e6;
    color: #273449;
}

.mock-win.mock-thunderbird .mock-toolbar span {
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
}

.mock-win.mock-thunderbird .mock-toolbar .active {
    background: #fff;
    border-color: #c8d2e3;
    font-weight: 700;
}

.mock-win.mock-thunderbird .mock-side {
    background: #eef2f7;
    border-right-color: #d4dce8;
}

.mock-win.mock-thunderbird .mock-side li.active {
    background: #dce9ff;
    color: #123b80;
    border-color: #9ebcf0;
}

.mock-win.mock-becky .guide-note-box {
    background: #f7f7fb;
    border-color: #ddd9f5;
}

.mock-win.mock-becky .guide-mini-grid dl {
    background: #f9f8ff;
    border-color: #ded8fa;
}

.mock-win.mock-becky .guide-mini-grid dt {
    color: #615b8d;
}

.mock-win.mock-becky .guide-mini-grid dd {
    color: #2f2856;
}

.mock-win.mock-becky .guide-badge {
    background: #eef2ff;
    color: #4338ca;
}

.mock-win.mock-becky .legacy-titlebar {
    background: linear-gradient(180deg,#f8f9fb,#e8edf3);
    border-bottom: 1px solid #d5dde7;
    color: #334155;
}

.mock-win.mock-becky .legacy-toolbar {
    gap: 16px;
    background: #f6f8fb;
    border-bottom-color: #dbe3ed;
    color: #475569;
}

.mock-win.mock-becky .legacy-side {
    background: #f5f7fb;
    border-right-color: #dbe3ed;
    padding: 12px;
}

.mock-win.mock-becky .legacy-side h4 {
    color: #516274;
}

.mock-win.mock-becky .legacy-list > div {
    padding: 8px 10px;
    border-radius: 10px;
    border-color: #d7dfea;
}

.mock-win.mock-becky .legacy-list > div.active {
    background: #e9efff;
    border-color: #b6c7ff;
    color: #2f3d8f;
}

.mock-win.mock-becky .legacy-main {
    padding: 14px;
    background: #fbfcfe;
}

.mock-win.mock-becky .legacy-panel {
    border-radius: 12px;
    padding: 14px;
}

.mock-win.mock-becky .legacy-status {
    padding: 12px 14px;
    border-radius: 12px;
    background: #eef2ff;
    color: #3730a3;
}

.mock-win.mock-becky .legacy-box {
    border-color: #7c86d9;
    background: #4338ca;
}

.mock-filezilla .guide-badge {
    background: #e7f1ff;
    color: #1d4ed8;
}

.mock-filezilla .app-titlebar {
    background: linear-gradient(180deg,#f4f8fd,#e6edf7);
    border-bottom: 1px solid #d6e0ec;
    color: #30455f;
}

.mock-filezilla .app-toolbar {
    gap: 18px;
    padding: 10px 14px;
    background: #f8fbff;
    border-bottom-color: #dce5f0;
    color: #47627f;
}

.mock-filezilla .app-toolbar .active {
    color: #0f4c81;
    font-weight: 800;
}

.mock-filezilla .app-sidebar {
    background: #f5f8fc;
    border-right: 1px solid #dce5f0;
}

.mock-filezilla .app-main {
    padding: 16px;
    background: #fbfdff;
}

.mock-filezilla .screen-panel {
    border-color: #d9e2ee;
}

.mock-filezilla .filelist,
.mock-filezilla .filelist-head {
    border-color: #d9e2ee;
}

.mock-filezilla .filelist-head {
    background: #f3f7fc;
}

.mock-ffftp .guide-badge {
    background: #eef2ff;
    color: #4338ca;
}

.mock-ffftp .legacy-titlebar {
    background: linear-gradient(180deg,#f8f9fb,#e8edf3);
    border-bottom: 1px solid #d5dde7;
    color: #334155;
}

.mock-ffftp .legacy-toolbar {
    gap: 16px;
    background: #f6f8fb;
    border-bottom-color: #dbe3ed;
    color: #475569;
}

.mock-ffftp .legacy-side {
    background: #f5f7fb;
    border-right: 1px solid #dbe3ed;
    padding: 12px;
}

.mock-ffftp .legacy-side h4 {
    color: #516274;
}

.mock-ffftp .legacy-list > div {
    padding: 8px 10px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #d7dfea;
}

.mock-ffftp .legacy-list > div.active {
    background: #e9efff;
    border-color: #b6c7ff;
    color: #2f3d8f;
}

.mock-ffftp .legacy-main {
    padding: 14px;
    background: #fbfcfe;
}

.mock-ffftp .legacy-panel,
.mock-ffftp .legacy-filebox {
    border-radius: 12px;
}

.mock-ffftp .legacy-status {
    padding: 12px 14px;
    border-radius: 12px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 13px;
}

.mock-ffftp .legacy-filehead {
    background: #eef2f7;
    border-bottom-color: #d8e1ec;
    color: #475569;
}

.mock-ffftp .legacy-filerow {
    display: grid;
    grid-template-columns: 1.4fr .6fr;
    font-size: 13px;
    color: #1f2937;
}

.mock-mac .desktop-frame {
    margin-top: 18px;
    border: 1px solid #ccd5ea;
    border-radius: 22px;
    overflow: hidden;
    background: #fafbff;
    box-shadow: 0 22px 46px rgba(15,23,42,.12);
}

.mock-mac .desktop-titlebar {
    justify-content: flex-start;
    gap: 12px;
}

.mock-mac .desktop-dots {
    order: -1;
}

.mock-mac .desktop-toolbar {
    gap: 16px;
    padding: 10px 16px;
    background: #f6f8fb;
    border-bottom: 1px solid #d8dfeb;
    color: #475569;
}

.mock-mac .desktop-shell {
    min-height: 360px;
}

.mock-mac .desktop-sidebar {
    background: #eef3f8;
    border-right: 1px solid #d9e2ec;
    padding: 18px 14px;
}

.mock-mac .desktop-main {
    padding: 18px;
}

.mock-mac .screen-panel {
    border-radius: 18px;
}

.mock-mac.mock-apple-mail .guide-badge {
    background: #e7f1ff;
    color: #1d4ed8;
    letter-spacing: .04em;
}

.mock-mac.mock-apple-mail .desktop-frame {
    border-color: #cfd9e6;
    background: #f8fafc;
}

.mock-mac.mock-apple-mail .desktop-titlebar {
    background: linear-gradient(180deg,#f7f8fb,#e9eef5);
    border-bottom-color: #d5dfea;
    color: #324155;
}

.mock-mac.mock-apple-mail .desktop-sidebar li.active {
    border-color: #cad7e6;
}

.mock-mac.mock-apple-mail .screen-pill.active {
    background: #e8f1ff;
    border-color: #9dbcf2;
    color: #1d4ed8;
}

.mock-mac.mock-outlook-mac .guide-badge {
    background: #e7f1ff;
    color: #1d4ed8;
    letter-spacing: .04em;
}

.mock-mac.mock-outlook-mac .desktop-frame {
    border-color: #c9d7eb;
    border-radius: 20px;
    background: #f6f8fc;
}

.mock-mac.mock-outlook-mac .desktop-titlebar {
    background: linear-gradient(180deg,#edf4ff,#e3ebf9);
    border-bottom-color: #d1ddee;
    color: #27415f;
}

.mock-mac.mock-outlook-mac .desktop-toolbar {
    gap: 18px;
    background: #f5f8fd;
    border-bottom-color: #d7e1ef;
    color: #38506d;
}

.mock-mac.mock-outlook-mac .desktop-toolbar strong {
    color: #1d4ed8;
}

.mock-mac.mock-outlook-mac .desktop-sidebar {
    background: #eef4fb;
    border-right-color: #d7e0ec;
}

.mock-mac.mock-outlook-mac .desktop-sidebar li.active {
    background: #dceaff;
    border-color: #9ec2ff;
    color: #1e3a8a;
}

.mock-mac.mock-outlook-mac .screen-panel {
    border-color: #d7e1ee;
}

.mock-mac.mock-outlook-mac .screen-panel h5 {
    color: #172554;
}

.mock-mac.mock-outlook-mac .screen-pill.active {
    background: #e8f1ff;
    border-color: #9dbcf2;
    color: #1d4ed8;
}

.mock-mac.mock-outlook-mac .screen-box {
    border-color: #7aa2e8;
    background: #1d4ed8;
}

.mock-mac.mock-outlook-mac .screen-btn.primary {
    background: #2563eb;
}

.mock-mac.mock-thunderbird-mac .guide-badge {
    background: #e8efff;
    color: #3346b1;
}

.mock-mac.mock-thunderbird-mac .desktop-titlebar {
    background: linear-gradient(180deg,#f2f5ff,#e8eef9);
    border-bottom-color: #d8def0;
    color: #3b4a73;
}

.mock-mac.mock-thunderbird-mac .desktop-toolbar {
    gap: 16px;
    background: #f8f9fe;
    border-bottom-color: #e0e6f3;
    color: #46557d;
}

.mock-mac.mock-thunderbird-mac .desktop-toolbar strong {
    color: #4338ca;
}

.mock-mac.mock-thunderbird-mac .desktop-sidebar {
    background: #f1f4fb;
    border-right-color: #dde4f2;
}

.mock-mac.mock-thunderbird-mac .desktop-sidebar h4 {
    color: #5a6787;
}

.mock-mac.mock-thunderbird-mac .desktop-sidebar li.active {
    border-color: #c8d2ea;
    color: #1f2f64;
}

.mock-mac.mock-thunderbird-mac .screen-panel {
    border-color: #d9e0ec;
}

.mock-mac.mock-thunderbird-mac .screen-panel h5 {
    color: #1f2f64;
}

.mock-mac.mock-thunderbird-mac .screen-pill.active {
    background: #eef2ff;
    border-color: #a5b4fc;
    color: #4338ca;
}

.mock-mac.mock-thunderbird-mac .screen-btn.primary {
    background: #4338ca;
}

.mock-ios .phone-stage,
.mock-android .phone-stage {
    margin-top: 18px;
    padding: 18px;
    border-radius: 28px;
}

.mock-ios .phone-frame,
.mock-android .phone-frame {
    max-width: 390px;
    margin: 0 auto;
    border-radius: 34px;
    padding: 10px;
    box-shadow: 0 24px 48px rgba(15,23,42,.22);
    position: relative;
}

.mock-ios .phone-screen,
.mock-android .phone-screen {
    border-radius: 26px;
    overflow: hidden;
    min-height: 400px;
    position: relative;
}

.phone-notch {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

.phone-notch-ios {
    width: 124px;
    height: 24px;
    border-radius: 999px;
    background: #111827;
    box-shadow: 0 6px 14px rgba(15,23,42,.22);
}

.phone-notch-ios::before {
    content: "";
    position: absolute;
    inset: 6px 14px 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
    opacity: .85;
}

.phone-notch-android {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #111827;
    box-shadow: 0 3px 8px rgba(15,23,42,.24);
}

.phone-notch-android::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
}

.phone-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px 6px;
    font-size: 12px;
    color: #111827;
    background: #fff;
}

.phone-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-weight: 700;
}

.phone-body {
    padding: 16px;
    display: grid;
    gap: 12px;
}

.phone-card {
    background: #fff;
    border: 1px solid #d9e0eb;
    border-radius: 18px;
    padding: 14px;
}

.phone-card h5 {
    margin: 0 0 12px;
    font-size: 15px;
    color: #0f172a;
}

.phone-row {
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
}

.phone-row:last-child {
    margin-bottom: 0;
}

.phone-label {
    font-size: 12px;
    color: #64748b;
}

.phone-value {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    background: #fff;
    font-size: 14px;
    color: #111827;
}

.phone-value.dim {
    background: #f8fafc;
    color: #475569;
}

.phone-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    background: #fff;
    font-size: 14px;
    color: #111827;
}

.phone-option.active {
    border-color: #93c5fd;
    background: #e9f3ff;
    color: #1d4ed8;
    font-weight: 700;
}

.phone-check {
    color: #1d4ed8;
    font-weight: 800;
}

.phone-tabs {
    display: flex;
    gap: 8px;
}

.phone-tab {
    flex: 1;
    text-align: center;
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 13px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #475569;
}

.phone-tab.active {
    background: #e9f3ff;
    border-color: #93c5fd;
    color: #1d4ed8;
    font-weight: 800;
}

.phone-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
}

.phone-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: #111827;
}

.phone-switch {
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: #34c759;
    position: relative;
}

.phone-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 21px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
}

.phone-action {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.phone-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 14px;
}

.phone-btn.primary {
    background: #007aff;
    color: #fff;
}

.phone-btn.secondary {
    background: #fff;
    border: 1px solid #d1d5db;
    color: #334155;
}

.recommended,
.deprecated {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.recommended {
    border: 1px solid #86efac;
    background: #f0fdf4;
    color: #166534;
}

.deprecated {
    border: 1px solid #fca5a5;
    background: #fef2f2;
    color: #b91c1c;
}

@media (max-width: 900px) {
    .wizard-step-head {
        flex-direction: column;
    }

    .mock-win .mock-body,
    .mock-shell,
    .desktop-shell,
    .legacy-layout,
    .app-layout {
        grid-template-columns: 1fr;
    }

    .mock-win .mock-side,
    .desktop-sidebar,
    .legacy-side,
    .app-sidebar {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }

    .mock-win .mock-grid,
    .screen-grid,
    .legacy-grid {
        grid-template-columns: 1fr;
    }

    .guide-mini-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-mini-table {
        grid-template-columns: 1fr;
    }

    .mock-ios .phone-stage,
    .mock-android .phone-stage {
        padding: 12px;
    }

    .legacy-filepane,
    .filepane {
        grid-template-columns: 1fr;
    }
}


/* Support Page Shared Layouts */

body.theme-support-tools .hero-premium.support-hero {
    background-color: #5f3205;
    background-image: url('../support/images/support-hero-main.png');
    --image-hero-overlay:
        radial-gradient(circle at 18% 24%, rgba(254, 243, 199, 0.10) 0%, transparent 36%),
        radial-gradient(circle at 82% 72%, rgba(251, 146, 60, 0.09) 0%, transparent 40%),
        linear-gradient(180deg, rgba(24, 24, 27, 0.16) 0%, rgba(24, 24, 27, 0.26) 100%);
    --image-hero-mesh-display: none;
    --image-hero-icons-opacity: 0;
}

.support-link-emphasis,
.content-section .detail-card ul a,
.content-section .detail-card p a,
.content-section .detail-card ul .support-link-emphasis,
.content-section .detail-card p .support-link-emphasis {
    color: #0f4ca8;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.support-link-emphasis:hover,
.content-section .detail-card ul a:hover,
.content-section .detail-card p a:hover,
.content-section .detail-card ul .support-link-emphasis:hover,
.content-section .detail-card p .support-link-emphasis:hover {
    color: #0b3d87;
    background: #e9f2ff;
    border-radius: 6px;
}

.support-hover-link {
    box-shadow: 0 0 0 2px #dbeafe inset;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.support-hover-link:hover {
    box-shadow: 0 0 0 2px #60a5fa inset;
    background: #eff6ff !important;
    transform: translateY(-1px);
}

#mail-settings ul .support-link-emphasis {
    font-weight: 400;
}

.teamviewer-step {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
    margin-bottom: 12px;
}

.teamviewer-step h3 {
    margin-bottom: 8px;
    font-size: 18px;
}

.teamviewer-step p {
    margin-bottom: 10px;
}

.teamviewer-step img {
    width: 100%;
    height: auto;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #f8fafc;
}

.teamviewer-step img.teamviewer-step-image-sm {
    max-width: 420px;
    margin: 0 auto;
    display: block;
}

.teamviewer-quick-note {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
}

.teamviewer-download-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 18px 0 14px;
}

.teamviewer-download-btn {
    min-height: 48px;
    padding: 12px 20px;
    background: #0f766e;
    color: #fff;
    border-radius: 999px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(15, 118, 110, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.teamviewer-download-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 118, 110, 0.22);
}

.howto-step-grid {
    display: grid;
    gap: 16px;
}

.howto-step-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    padding: 14px;
}

.howto-step-no {
    display: inline-block;
    font-weight: 800;
    font-size: 12px;
    color: #1d4ed8;
    background: #eaf2ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    padding: 3px 10px;
    margin-bottom: 8px;
}

.howto-step-card img {
    width: min(100%, 680px);
    height: auto;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    display: block;
    margin: 10px auto 0;
}

.img-step {
    width: min(100%, 760px);
    height: auto;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    display: block;
    margin: 10px 0 14px;
}

.mini-note {
    font-size: 13px;
    color: #475569;
}

.mini-note-alert {
    color: #b91c1c;
}

.toc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.toc-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    border: 1px solid #dbeafe;
    background: #f8fbff;
    border-radius: 10px;
    padding: 10px 12px;
    color: #0f172a;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    transition: .15s ease;
}

.toc-link:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    transform: translateY(-1px);
}

.toc-no {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #1d4ed8;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}

.step-list {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.step-list li {
    counter-increment: step;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    padding: 12px 14px 12px 46px;
    position: relative;
    line-height: 1.75;
    color: #334155;
}

.step-list li::before {
    content: counter(step);
    position: absolute;
    left: 12px;
    top: 12px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #0ea5e9;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
}

.step-list a {
    color: #0f4ca8;
    font-weight: 700;
}

.mock-value {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #fff;
    color: #111827;
    font-size: 13px;
}

.mock-value.dim {
    background: #f8fafc;
    color: #475569;
}

.mock-box.off {
    background: #fff;
    border-color: #94a3b8;
}

.mock-box.off::after {
    display: none;
}

.mock-subnote {
    margin-top: 10px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.7;
}

.support-mt-10 {
    margin-top: 10px;
}

.explain-note {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.8;
    color: #334155;
}

.imap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.imap-card {
    border: 1px solid #dbe4ef;
    border-radius: 14px;
    background: #f8fbff;
    padding: 14px 16px;
}

.imap-card h3 {
    margin: 0 0 8px;
    font-size: 15px;
    color: #172554;
}

.imap-card p,
.imap-card li {
    font-size: 13px;
    line-height: 1.8;
    color: #334155;
}

.imap-card ul {
    margin: 0;
    padding-left: 18px;
}