:root {
    --csm-bg: #eef6ff;
    --csm-panel: #ffffff;
    --csm-panel-soft: #f7fbff;
    --csm-ink: #0f1f49;
    --csm-muted: #66738f;
    --csm-line: rgba(28, 66, 137, .14);
    --csm-primary: #3768f4;
    --csm-primary-2: #1b4bc4;
    --csm-success: #18b899;
    --csm-warn: #ff9f1c;
    --csm-danger: #ef476f;
    --csm-purple: #7c55e7;
    --csm-yellow: #ffc43d;
    --csm-shadow: 0 22px 60px rgba(30, 69, 126, .14);
    --csm-shadow-soft: 0 10px 28px rgba(30, 69, 126, .12);
}

* {
    box-sizing: border-box;
}

body.csm-page {
    margin: 0;
    min-height: 100vh;
    color: var(--csm-ink);
    background:
        linear-gradient(135deg, rgba(24, 184, 153, .14), transparent 38%),
        linear-gradient(220deg, rgba(55, 104, 244, .12), transparent 42%),
        linear-gradient(180deg, #f7fbff 0%, #eaf4ff 100%);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
}

body.csm-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(15, 23, 42, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, .035) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .38), transparent 82%);
}

.csm-hidden {
    display: none !important;
}

.csm-app-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 20px;
    min-height: 100vh;
    padding: 22px;
}

.csm-sidebar {
    position: sticky;
    top: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: calc(100vh - 44px);
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .62));
    box-shadow: var(--csm-shadow);
    backdrop-filter: blur(18px);
}

.csm-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 2px 10px;
}

.csm-logo-mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--csm-primary), var(--csm-success));
    color: #fff;
    font-size: 24px;
    font-weight: 950;
    box-shadow: 0 12px 28px rgba(55, 104, 244, .28);
}

.csm-brand h1 {
    margin: 0;
    font-size: 20px;
    line-height: 1.16;
}

.csm-brand small {
    display: block;
    margin-top: 4px;
    color: var(--csm-muted);
    font-size: 12px;
    font-weight: 850;
}

.csm-class-card {
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, #173ea3, #285eef);
    color: #fff;
    box-shadow: 0 18px 34px rgba(23, 62, 163, .25);
}

.csm-class-card>span {
    font-size: 12px;
    font-weight: 850;
    opacity: .78;
}

.csm-class-card>strong {
    display: block;
    margin: 8px 0 10px;
    font-size: 21px;
    line-height: 1.2;
}

.csm-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.csm-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .15);
    font-size: 12px;
    font-weight: 900;
}

.csm-side-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.csm-side-nav .csm-tab {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 17px;
    background: transparent;
    color: #24335d;
    text-align: left;
    box-shadow: none;
}

.csm-side-nav .csm-tab span:first-child {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 11px;
    background: #edf4ff;
    font-size: 15px;
}

.csm-side-nav .csm-tab.is-active {
    background: #fff;
    color: var(--csm-primary);
    box-shadow: 0 10px 24px rgba(30, 69, 126, .11);
}

.csm-side-nav .csm-tab.is-active span:first-child {
    background: linear-gradient(135deg, var(--csm-primary), var(--csm-success));
    color: #fff;
}

.csm-side-nav--static .csm-tab {
    cursor: default;
}

.csm-side-stats {
    display: grid;
    gap: 10px;
    margin-top: auto;
}

.csm-mini-stat {
    padding: 13px;
    border: 1px solid var(--csm-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, .72);
}

.csm-mini-stat span {
    display: block;
    color: var(--csm-muted);
    font-size: 12px;
    font-weight: 900;
}

.csm-mini-stat strong {
    display: block;
    margin-top: 6px;
    font-size: 18px;
}

.csm-shell-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.csm-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 28px;
    background: rgba(255, 255, 255, .72);
    box-shadow: var(--csm-shadow-soft);
    backdrop-filter: blur(18px);
}

.csm-top-title {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 13px;
}

.csm-top-title h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.18;
}

.csm-top-title p {
    margin: 4px 0 0;
    color: var(--csm-muted);
    font-size: 13px;
    font-weight: 850;
}

.csm-phase-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 9px 12px;
    border-radius: 999px;
    background: #eef4ff;
    color: #2454d6;
    font-size: 13px;
    font-weight: 950;
}

.csm-top-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.csm-wrap {
    width: min(1540px, calc(100% - 34px));
    margin: 0 auto;
    padding: 26px 0 56px;
}

.csm-guard {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
}

.csm-guard-card {
    width: min(520px, 100%);
    padding: 28px;
    border: 1px solid rgba(219, 227, 238, .92);
    border-radius: 24px;
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--csm-shadow);
}

.csm-guard-card h1,
.csm-hero h1,
.csm-panel h2,
.csm-card h3 {
    margin: 0;
    letter-spacing: 0;
}

.csm-guard-card p,
.csm-hero p,
.csm-panel p {
    line-height: 1.55;
}

.csm-muted {
    color: var(--csm-muted);
}

.csm-small {
    font-size: 13px;
}

.csm-tiny {
    font-size: 12px;
}

.csm-btn,
.csm-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 10px 14px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--csm-primary), var(--csm-primary-2));
    color: #fff;
    font: inherit;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(49, 87, 255, .22);
    transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.csm-btn:hover,
.csm-link-btn:hover {
    transform: translateY(-1px);
}

.csm-btn:disabled {
    opacity: .46;
    cursor: not-allowed;
    transform: none;
}

.csm-btn--ghost,
.csm-link-btn--ghost {
    border: 1px solid var(--csm-line);
    background: #fff;
    color: var(--csm-ink);
    box-shadow: none;
}

.csm-btn--green {
    background: linear-gradient(135deg, #21c5a6, #0f9d83);
}

.csm-btn--warn {
    background: linear-gradient(135deg, #ffb020, #fb7c18);
}

.csm-btn--danger {
    background: linear-gradient(135deg, #ff6b7a, #ef476f);
}

.csm-btn--purple {
    background: linear-gradient(135deg, #8b64f0, #6e44d5);
}

.csm-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.csm-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 520px);
    gap: 18px;
    min-height: 174px;
    padding: 26px 28px;
    border: 1px solid rgba(55, 104, 244, .18);
    border-radius: 24px;
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--csm-shadow);
    backdrop-filter: blur(14px);
}

.csm-kicker {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--csm-primary);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0;
}

.csm-hero h1 {
    font-size: 44px;
    line-height: 1.05;
}

.csm-hero p {
    max-width: 780px;
    margin: 12px 0 0;
    color: var(--csm-muted);
    font-weight: 750;
}

.csm-concept-strip {
    display: inline-flex;
    max-width: 100%;
    margin-top: 14px;
    padding: 10px 14px;
    border: 1px solid rgba(24, 184, 153, .28);
    border-radius: 999px;
    background: #ecfdf7;
    color: #0f766e;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.35;
}

.csm-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-content: stretch;
}

.csm-stat {
    display: grid;
    gap: 3px;
    min-height: 64px;
    padding: 13px 14px;
    border: 1px solid var(--csm-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--csm-shadow-soft);
}

.csm-stat span {
    color: var(--csm-muted);
    font-size: 12px;
    font-weight: 850;
}

.csm-stat strong {
    font-size: 22px;
    line-height: 1.1;
}

.csm-tabs {
    position: sticky;
    top: 10px;
    z-index: 20;
    display: flex;
    width: max-content;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0;
    padding: 10px;
    border: 1px solid var(--csm-line);
    border-radius: 22px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(14px);
    box-shadow: var(--csm-shadow-soft);
}

.csm-tab {
    min-height: 40px;
    padding: 11px 18px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: #334155;
    font: inherit;
    font-weight: 850;
    cursor: pointer;
}

.csm-tab.is-active {
    background: linear-gradient(135deg, var(--csm-primary), var(--csm-primary-2));
    color: #fff;
    box-shadow: 0 12px 26px rgba(49, 87, 255, .25);
}

.csm-panel {
    overflow: hidden;
    border: 1px solid var(--csm-line);
    border-radius: 24px;
    background: rgba(255, 255, 255, .84);
    box-shadow: var(--csm-shadow);
    backdrop-filter: blur(14px);
}

.csm-panel__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--csm-line);
}

.csm-panel__body {
    padding: 20px;
}

.csm-teacher-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.csm-admin-shell .csm-teacher-shell {
    grid-template-columns: 1fr;
}

.csm-rail,
.csm-student-aside {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 18px;
}

.csm-admin-shell .csm-rail {
    position: static;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: stretch;
}

.csm-main {
    display: grid;
    gap: 18px;
}

.csm-student-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 22px;
    align-items: start;
    margin-top: 18px;
}

.csm-card {
    padding: 14px;
    border: 1px solid var(--csm-line);
    border-radius: 18px;
    background: #fff;
}

.csm-stage-card {
    position: relative;
    overflow: hidden;
    border: 0;
    background: linear-gradient(135deg, #1541b3, #164fd3 45%, #0d2d88);
    color: #fff;
}

.csm-stage-card .csm-muted {
    color: rgba(255, 255, 255, .78);
}

.csm-stage-card .csm-chip {
    border-color: rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.csm-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.csm-action-grid .csm-btn {
    justify-content: flex-start;
    min-height: 86px;
    padding: 16px 18px;
    border-radius: 22px;
    font-size: 16px;
    box-shadow: 0 16px 32px rgba(30, 69, 126, .16);
}

.csm-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.csm-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 1px solid var(--csm-line);
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 12px;
    font-weight: 850;
}

.csm-chip--blue {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.csm-chip--green {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

.csm-chip--yellow {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.csm-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.csm-flow--rail {
    grid-template-columns: 1fr;
    gap: 14px;
}

.csm-admin-shell .csm-flow--rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.csm-flow--rail .csm-flow-step {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.csm-admin-shell .csm-flow--rail .csm-flow-step {
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 76px;
}

.csm-flow--rail .csm-flow-step strong {
    margin-top: 0;
}

.csm-flow--rail .csm-flow-step small {
    display: block;
    margin-top: 3px;
}

.csm-flow-step {
    position: relative;
    min-height: 98px;
    padding: 14px;
    border: 1px solid rgba(55, 104, 244, .14);
    border-radius: 20px;
    background: #fff;
    color: var(--csm-muted);
    box-shadow: 0 12px 24px rgba(30, 69, 126, .08);
}

.csm-flow-step span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--csm-primary), var(--csm-primary-2));
    color: #fff;
    font-size: 20px;
    font-weight: 950;
}

.csm-flow-step strong {
    display: block;
    margin-top: 9px;
    color: var(--csm-ink);
}

.csm-flow-step.is-active {
    border-color: rgba(55, 104, 244, .45);
    background: linear-gradient(135deg, #eef6ff, #fff);
    color: var(--csm-primary-2);
    transform: translateY(-1px);
}

.csm-flow-step.is-complete {
    border-color: rgba(24, 184, 153, .3);
    background: #f3fffb;
}

.csm-tip-card {
    display: grid;
    gap: 6px;
    margin-top: 16px;
    padding: 14px;
    border: 1px dashed rgba(55, 104, 244, .25);
    border-radius: 18px;
    background: #f7fbff;
    color: var(--csm-muted);
    font-size: 13px;
    font-weight: 750;
}

.csm-market-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.csm-market-card {
    position: relative;
    overflow: hidden;
    min-height: 132px;
    padding: 14px 14px 12px 20px;
    border: 1px solid rgba(55, 104, 244, .13);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(30, 69, 126, .08);
}

.csm-market-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: var(--sector-color, var(--csm-primary));
}

.csm-market-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}

.csm-sector-name {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 950;
}

.csm-sector-name small {
    display: inline-grid;
    place-items: center;
    min-width: 36px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef5ff;
    color: var(--csm-primary-2);
    font-size: 11px;
}

.csm-price {
    margin-top: 8px;
    font-size: 42px;
    font-weight: 950;
    line-height: .95;
}

.csm-delta.up {
    color: #047857;
}

.csm-delta.down {
    color: #b91c1c;
}

.csm-track {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 2px;
    height: 8px;
    margin-top: 11px;
}

.csm-track span {
    border-radius: 999px;
    background: #e2e8f0;
}

.csm-track .on {
    background: linear-gradient(90deg, var(--csm-primary), var(--csm-primary-2));
}

.csm-news {
    overflow: hidden;
    border: 1px solid #dbeafe;
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--csm-shadow-soft);
}

.csm-news__top {
    padding: 18px 20px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #eff6ff, #fff 74%);
}

.csm-news__title {
    margin: 8px 0;
    font-size: 28px;
    line-height: 1.18;
}

.csm-news__body {
    padding: 18px 20px;
}

.csm-news__body p {
    margin: 0;
    font-size: 16px;
    line-height: 1.72;
    font-weight: 750;
}

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

.csm-news-mini {
    min-height: 96px;
    padding: 13px;
    border: 1px solid var(--csm-line);
    border-radius: 16px;
    background: #f8fafc;
}

.csm-news-mini strong {
    display: block;
    margin-bottom: 5px;
    color: var(--csm-primary-2);
}

.csm-submission-grid,
.csm-roster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}

.csm-student-tile {
    min-height: 72px;
    padding: 9px;
    border: 1px solid var(--csm-line);
    border-radius: 16px;
    background: #fff;
}

.csm-student-tile.is-done {
    border-color: #a7f3d0;
    background: linear-gradient(135deg, #ecfdf5, #fff);
}

.csm-student-tile.is-auto {
    border-color: #ddd6fe;
    background: linear-gradient(135deg, #f5f3ff, #fff);
}

.csm-table-wrap {
    overflow-x: auto;
}

.csm-table {
    width: 100%;
    border-collapse: collapse;
}

.csm-table th,
.csm-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--csm-line);
    text-align: left;
    vertical-align: top;
}

.csm-table th {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
}

.csm-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.csm-field {
    display: grid;
    gap: 5px;
}

.csm-field label {
    color: #475569;
    font-size: 12px;
    font-weight: 900;
}

.csm-field input,
.csm-field select,
.csm-field textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--csm-line);
    border-radius: 12px;
    padding: 9px 10px;
    background: #fff;
    color: var(--csm-ink);
    font: inherit;
}

.csm-field textarea {
    min-height: 110px;
    resize: vertical;
}

.csm-order-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.csm-trade-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(55, 104, 244, .14);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(30, 69, 126, .08);
}

.csm-trade-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: var(--sector-color, var(--csm-primary));
}

.csm-trade-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 16px 10px 20px;
}

.csm-basket-title {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.csm-sector-icon {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 8px;
    border-radius: 16px;
    background: #eef5ff;
    color: var(--csm-primary-2);
    font-size: 12px;
    font-weight: 950;
}

.csm-price-tag {
    flex: 0 0 auto;
    padding: 8px 10px;
    border-radius: 999px;
    background: #fff7db;
    color: #8a5a00;
    font-weight: 950;
}

.csm-trade-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 16px 16px 20px;
}

.csm-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--csm-line);
    border-radius: 16px;
    background: #f7faff;
}

.csm-qty-row label {
    color: #415070;
    font-size: 13px;
    font-weight: 950;
}

.csm-counter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.csm-counter button {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--csm-line);
    border-radius: 11px;
    background: #fff;
    color: var(--csm-primary);
    font-weight: 950;
    box-shadow: none;
}

.csm-counter input {
    width: 44px;
    min-height: 30px;
    padding: 4px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    text-align: center;
    font-weight: 900;
}

.csm-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.csm-coach-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(55, 104, 244, .14);
    border-radius: 20px;
    background: linear-gradient(180deg, #fff, #f7fbff);
    box-shadow: 0 10px 24px rgba(30, 69, 126, .08);
}

.csm-preview-item {
    padding: 10px;
    border: 1px solid var(--csm-line);
    border-radius: 14px;
    background: #fff;
}

.csm-preview-item span {
    color: var(--csm-muted);
    font-size: 12px;
    font-weight: 850;
}

.csm-preview-item strong {
    display: block;
    margin-top: 2px;
    font-size: 22px;
}

.csm-risk-line {
    display: grid;
    gap: 7px;
}

.csm-risk-line span {
    color: var(--csm-muted);
    font-size: 12px;
    font-weight: 900;
}

.csm-risk-line i {
    display: block;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--csm-success) 0 var(--risk), #e2e8f0 var(--risk) 100%);
}

.csm-principles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.csm-principles div {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 850;
}

.csm-principles span {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    color: #fff;
    font-weight: 950;
}

.csm-principles .is-ok {
    background: #ecfdf5;
    color: #065f46;
}

.csm-principles .is-ok span {
    background: #16b978;
}

.csm-principles .is-warn {
    background: #fffbeb;
    color: #92400e;
}

.csm-principles .is-warn span {
    background: var(--csm-warn);
}

.csm-feedback {
    display: grid;
    gap: 8px;
}

.csm-feedback-item {
    padding: 10px 12px;
    border: 1px solid var(--csm-line);
    border-radius: 14px;
    background: #f8fafc;
    line-height: 1.45;
}

.csm-feedback-item.good {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #065f46;
}

.csm-feedback-item.warn {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.csm-feedback-item.danger {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.csm-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1000;
    max-width: min(520px, calc(100% - 32px));
    padding: 12px 16px;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    box-shadow: var(--csm-shadow);
    opacity: 0;
    transform: translateX(-50%) translateY(18px);
    transition: .18s ease;
}

.csm-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.csm-tutorial-mask {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(15, 23, 42, .58);
}

.csm-tutorial-card {
    width: min(520px, 100%);
    padding: 22px;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--csm-shadow);
}

body.csm-page {
    background:
        radial-gradient(circle at 6% 8%, rgba(24, 184, 153, .22), transparent 28%),
        radial-gradient(circle at 92% 9%, rgba(55, 104, 244, .18), transparent 28%),
        radial-gradient(circle at 74% 96%, rgba(124, 85, 231, .16), transparent 24%),
        linear-gradient(135deg, #f8fbff 0%, #eef6ff 55%, #f9fcff 100%);
}

body.csm-page .teacher-quick-nav-host,
body.csm-page .teacher-quick-nav,
body.csm-page #teacherQuickNavHost {
    display: none !important;
}

.csm-admin-shell {
    padding: 22px;
}

.csm-grid {
    display: grid;
    gap: 18px;
}

.csm-screen {
    animation: csmFadeIn .22s ease;
}

@keyframes csmFadeIn {
    from {
        opacity: .2;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.csm-top-title h2 {
    margin: 0;
    font-size: 24px;
    letter-spacing: 0;
}

.csm-ghost-btn {
    min-height: 44px;
    padding: 11px 14px;
    border: 1px solid var(--csm-line);
    border-radius: 14px;
    background: #fff;
    color: #25345f;
    font: inherit;
    font-weight: 950;
    box-shadow: 0 8px 20px rgba(30, 69, 126, .06);
}

.csm-profile {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 7px 12px;
    border: 1px solid var(--csm-line);
    border-radius: 999px;
    background: #fff;
    color: #25345f;
    font-weight: 950;
}

.csm-avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffe0a5, var(--csm-warn));
}

.csm-side-bar {
    display: block;
    height: 7px;
    margin-top: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #eaf0fb;
}

.csm-side-bar b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--csm-success), var(--csm-primary));
}

.csm-operate-grid {
    align-items: start;
}

.csm-stage-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.csm-stage-step {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    padding: 14px;
    border: 1px solid var(--csm-line);
    border-radius: 20px;
    background: #fff;
    color: var(--csm-ink);
}

.csm-stage-num {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 14px;
    background: #edf4ff;
    color: var(--csm-primary);
    font-weight: 950;
}

.csm-stage-step strong,
.csm-stage-step small {
    display: block;
}

.csm-stage-step strong {
    font-size: 15px;
}

.csm-stage-step small {
    margin-top: 3px;
    color: var(--csm-muted);
    font-size: 12px;
    font-weight: 800;
}

.csm-stage-step.is-active {
    border-color: transparent;
    background: linear-gradient(135deg, #2762f4, #1749c6);
    color: #fff;
    box-shadow: 0 14px 30px rgba(55, 104, 244, .25);
}

.csm-stage-step.is-active .csm-stage-num {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.csm-stage-step.is-active small {
    color: rgba(255, 255, 255, .82);
}

.csm-cta-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.csm-cta {
    position: relative;
    min-height: 102px;
    overflow: hidden;
    padding: 18px;
    border: 0;
    border-radius: 22px;
    color: #fff;
    text-align: left;
    font: inherit;
    box-shadow: 0 16px 32px rgba(30, 69, 126, .16);
}

.csm-cta::after {
    content: "";
    position: absolute;
    top: -36px;
    right: -36px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
}

.csm-cta span,
.csm-cta strong,
.csm-cta small {
    position: relative;
    display: block;
}

.csm-cta span {
    font-size: 30px;
}

.csm-cta strong {
    margin-top: 10px;
    font-size: 20px;
}

.csm-cta small {
    margin-top: 4px;
    opacity: .9;
    font-size: 13px;
    font-weight: 800;
}

.csm-cta--blue {
    background: linear-gradient(135deg, #4476ff, #1749c6);
}

.csm-cta--green {
    background: linear-gradient(135deg, #20c997, #0f9d78);
}

.csm-cta--purple {
    background: linear-gradient(135deg, #8b63f1, #653fd1);
}

.csm-cta--orange {
    background: linear-gradient(135deg, #ffb02e, #f57c00);
}

.csm-teacher-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
    gap: 18px;
    align-items: start;
}

.csm-panel {
    border-color: rgba(255, 255, 255, .86);
    border-radius: var(--csm-radius, 26px);
    background: rgba(255, 255, 255, .82);
}

.csm-panel__head {
    align-items: center;
    padding: 20px;
    border-bottom: 0;
}

.csm-card-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 18px;
    font-weight: 950;
    letter-spacing: 0;
}

.csm-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: #eef4ff;
    color: #2b59d8;
    font-size: 12px;
    font-weight: 950;
}

.csm-mini-btn {
    min-height: 34px;
    padding: 8px 10px;
    border: 1px solid var(--csm-line);
    border-radius: 12px;
    background: #edf4ff;
    color: #2f5be0;
    font: inherit;
    font-size: 12px;
    font-weight: 950;
    box-shadow: none;
}

.csm-market-grid--teacher {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.csm-sector-mini {
    min-height: 118px;
    padding: 13px;
    border-radius: 18px;
}

.csm-sector-mini::before {
    display: none;
}

.csm-sector-mini .csm-sector-name {
    color: #364464;
    font-size: 13px;
}

.csm-sector-mini .csm-sector-name small {
    min-width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    font-size: 16px;
}

.csm-sector-mini .csm-price {
    margin-top: 11px;
    font-size: 24px;
}

.csm-sector-mini .csm-price small {
    margin-left: 2px;
    color: var(--csm-muted);
    font-size: 12px;
}

.csm-roster-strip {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 8px;
}

.csm-student-chip {
    min-width: 0;
    padding: 8px 6px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #edf4ff;
    color: #44506e;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 950;
}

.csm-student-chip.done {
    border-color: #b9ecd8;
    background: #e8fbf4;
    color: #0b8b63;
}

.csm-student-chip.wait {
    border-color: #ffd0d8;
    background: #fff1f3;
    color: #c9264c;
}

.csm-donut-wrap {
    display: flex;
    align-items: center;
    gap: 22px;
}

.csm-donut {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 156px;
    height: 156px;
    border-radius: 50%;
    background: conic-gradient(var(--csm-success) calc(var(--p) * 1%), #ffd3da 0);
}

.csm-donut::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    background: #fff;
}

.csm-donut-inner {
    position: relative;
    text-align: center;
}

.csm-donut-inner b {
    display: block;
    font-size: 42px;
}

.csm-donut-inner small {
    color: var(--csm-muted);
    font-weight: 900;
}

.csm-legend {
    display: grid;
    gap: 12px;
}

.csm-legend span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 950;
}

.csm-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.csm-legend .teal {
    background: var(--csm-success);
}

.csm-legend .red {
    background: var(--csm-danger);
}

.csm-legend .yellow {
    background: var(--csm-yellow);
}

.csm-gauge {
    position: relative;
    display: grid;
    place-items: center;
    height: 150px;
    overflow: hidden;
    border: 1px solid var(--csm-line);
    border-radius: 24px;
    background: linear-gradient(180deg, #f8fbff, #fff);
}

.csm-gauge-arc {
    position: absolute;
    top: 26px;
    width: 190px;
    height: 95px;
    border-radius: 190px 190px 0 0;
    background: conic-gradient(from 270deg, var(--csm-success) 0 122deg, var(--csm-yellow) 122deg 150deg, var(--csm-danger) 150deg 180deg, transparent 0);
}

.csm-gauge-arc::after {
    content: "";
    position: absolute;
    right: 19px;
    bottom: 0;
    left: 19px;
    height: 76px;
    border-radius: 152px 152px 0 0;
    background: #fff;
}

.csm-gauge-text {
    position: relative;
    margin-top: 26px;
    text-align: center;
}

.csm-gauge-text b {
    display: block;
    font-size: 36px;
}

.csm-gauge-text span {
    color: var(--csm-muted);
    font-size: 13px;
    font-weight: 900;
}

.csm-coach-list {
    display: grid;
    gap: 10px;
}

.csm-coach-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--csm-line);
    border-radius: 16px;
    background: #f6f9ff;
    font-weight: 850;
    line-height: 1.45;
}

.csm-coach-item span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 9px;
    background: var(--csm-primary);
    color: #fff;
    font-size: 12px;
}

.csm-coach-item p {
    margin: 0;
}

.csm-student-preview-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
}

.csm-student-coach-preview {
    position: sticky;
    top: 22px;
}

.csm-preview-grid--compact {
    grid-template-columns: 1fr 1fr;
}

.csm-article {
    color: #3d4968;
    line-height: 1.75;
}

.csm-article h3 {
    margin: 0 0 12px;
    color: var(--csm-ink);
    font-size: 25px;
    letter-spacing: 0;
}

.csm-article p {
    margin: 0 0 12px;
}

.csm-projector-hero {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 24px;
    min-height: calc(100vh - 142px);
    padding: 34px;
    border-radius: 34px;
    background: linear-gradient(135deg, #0f2b74, #1749c6 58%, #0f9d91);
    color: #fff;
    box-shadow: var(--csm-shadow);
}

.csm-projector-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.csm-projector-title h2 {
    margin: 0;
    font-size: 42px;
    letter-spacing: 0;
}

.csm-projector-title p {
    margin: 10px 0 0;
    opacity: .88;
    font-size: 18px;
}

.csm-projector-round {
    flex: 0 0 auto;
    padding: 14px 20px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    font-size: 22px;
    font-weight: 950;
}

.csm-projector-center {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 22px;
    align-items: stretch;
}

.csm-big-news,
.csm-metric-block,
.csm-projector-sector {
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .13);
}

.csm-big-news {
    padding: 26px;
    border-radius: 28px;
}

.csm-big-news span {
    color: #baf5e7;
    font-weight: 950;
}

.csm-big-news h3 {
    margin: 14px 0;
    font-size: 38px;
    line-height: 1.22;
}

.csm-big-news p {
    opacity: .9;
    font-size: 18px;
    line-height: 1.7;
}

.csm-big-metric {
    display: grid;
    gap: 16px;
}

.csm-metric-block {
    padding: 24px;
    border-radius: 26px;
}

.csm-metric-block span {
    opacity: .82;
    font-weight: 900;
}

.csm-metric-block strong {
    display: block;
    margin-top: 10px;
    font-size: 52px;
}

.csm-projector-markets {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.csm-projector-sector {
    padding: 16px;
    border-radius: 20px;
}

.csm-projector-sector b {
    display: block;
    margin-top: 8px;
    font-size: 22px;
}

.csm-news-studio-grid {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.csm-news-tabs {
    display: grid;
    gap: 10px;
}

.csm-news-card {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--csm-line);
    border-radius: 18px;
    background: #fff;
    color: var(--csm-ink);
    text-align: left;
    font: inherit;
}

.csm-news-card.active {
    border-color: rgba(55, 104, 244, .42);
    box-shadow: 0 10px 26px rgba(55, 104, 244, .12);
}

.csm-news-card strong,
.csm-news-card span {
    display: block;
}

.csm-news-card span {
    margin-top: 6px;
    color: var(--csm-muted);
    font-size: 12px;
    font-weight: 850;
}

.csm-news-editor {
    margin-top: 14px;
}

.csm-compact-setup {
    align-items: end;
    margin-bottom: 12px;
}

.csm-roster-cache {
    margin-top: 12px;
}

.csm-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.csm-podium {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    gap: 14px;
    align-items: end;
}

.csm-award {
    min-height: 170px;
    padding: 18px;
    border: 1px solid var(--csm-line);
    border-radius: 24px;
    background: #fff;
    text-align: center;
    box-shadow: var(--csm-shadow-soft);
}

.csm-award.first {
    min-height: 210px;
    background: linear-gradient(180deg, #fffaf0, #fff);
}

.csm-award span {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 12px;
    border-radius: 22px;
    background: linear-gradient(135deg, #ffd36b, var(--csm-warn));
    font-size: 26px;
}

.csm-award h3,
.csm-award p {
    margin: 0;
}

.csm-award p {
    margin-top: 8px;
    color: var(--csm-muted);
    font-weight: 850;
}

@media (max-width: 1180px) {
    .csm-app-shell {
        grid-template-columns: 1fr;
    }

    .csm-sidebar {
        position: relative;
        top: auto;
        height: auto;
    }

    .csm-side-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .csm-hero,
    .csm-teacher-shell,
    .csm-student-shell,
    .csm-teacher-grid,
    .csm-student-preview-grid,
    .csm-projector-center,
    .csm-news-studio-grid,
    .csm-result-grid {
        grid-template-columns: 1fr;
    }

    .csm-rail,
    .csm-admin-shell .csm-rail,
    .csm-student-aside {
        position: static;
        grid-template-columns: 1fr;
    }

    .csm-market-grid,
    .csm-market-grid--teacher,
    .csm-projector-markets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .csm-action-grid,
    .csm-stage-rail,
    .csm-cta-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .csm-student-coach-preview {
        position: static;
    }
}

@media (max-width: 720px) {
    .csm-app-shell {
        padding: 12px;
    }

    .csm-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .csm-top-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .csm-side-nav {
        grid-template-columns: 1fr 1fr;
    }

    .csm-wrap {
        width: min(100% - 20px, 1500px);
        padding-top: 10px;
    }

    .csm-hero,
    .csm-panel__head,
    .csm-panel__body {
        padding: 16px;
    }

    .csm-stat-grid,
    .csm-flow,
    .csm-stage-rail,
    .csm-cta-row,
    .csm-market-grid,
    .csm-market-grid--teacher,
    .csm-projector-markets,
    .csm-news-mini-grid,
    .csm-form-grid,
    .csm-order-grid,
    .csm-preview-grid,
    .csm-principles,
    .csm-action-grid,
    .csm-podium,
    .csm-roster-strip {
        grid-template-columns: 1fr;
    }

    .csm-projector-hero {
        min-height: auto;
        padding: 22px;
    }

    .csm-projector-top,
    .csm-donut-wrap {
        align-items: flex-start;
        flex-direction: column;
    }

    .csm-projector-title h2,
    .csm-big-news h3 {
        font-size: 30px;
    }

    .csm-tabs {
        position: static;
        border-radius: 18px;
    }

    .csm-hero h1 {
        font-size: 34px;
    }

    .csm-admin-shell .csm-flow--rail {
        grid-template-columns: 1fr;
    }
}

/* v14 operational frontend */
.csm-page {
    --csm-v14-bg: #f4f7ff;
    --csm-v14-card: rgba(255, 255, 255, .88);
    --csm-v14-ink: #0f172a;
    --csm-v14-muted: #667085;
    --csm-v14-line: #dbe5f5;
    --csm-v14-blue: #2563eb;
    --csm-v14-purple: #6d4aff;
    --csm-v14-green: #16a34a;
    --csm-v14-orange: #f59e0b;
    --csm-v14-red: #ef4444;
    color: var(--csm-v14-ink);
    background:
        radial-gradient(circle at 6% 0%, rgba(109, 74, 255, .16), transparent 36%),
        radial-gradient(circle at 98% 2%, rgba(37, 99, 235, .14), transparent 32%),
        linear-gradient(135deg, #fbfdff 0, #eef5ff 54%, #fbfbff 100%);
}

.csm-app-shell {
    width: min(1580px, calc(100vw - 28px));
    margin: 16px auto 30px;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 18px;
    padding: 0;
    background: transparent;
}

.csm-sidebar {
    position: sticky;
    top: 16px;
    align-self: start;
    background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(246, 250, 255, .88));
    border: 1px solid rgba(216, 226, 246, .95);
    border-radius: 30px;
    padding: 18px;
    color: var(--csm-v14-ink);
    box-shadow: 0 20px 55px rgba(38, 56, 107, .13);
    backdrop-filter: blur(16px);
}

.csm-brand h1,
.csm-brand small,
.csm-class-card,
.csm-mini-stat,
.csm-top-title h2,
.csm-card-title,
.csm-panel h2,
.csm-panel h3 {
    color: var(--csm-v14-ink);
}

.csm-logo-mark {
    background: linear-gradient(135deg, var(--csm-v14-blue), var(--csm-v14-purple));
    border: 0;
    color: #fff;
}

.csm-class-card,
.csm-mini-stat,
.csm-side-stats {
    background: #fff;
    border-color: var(--csm-v14-line);
    box-shadow: none;
}

.csm-side-nav {
    display: grid;
    gap: 8px;
}

.csm-tab,
.csm-side-nav--static .csm-tab {
    justify-content: flex-start;
    border: 0;
    background: transparent;
    color: #30405f;
    font-weight: 900;
    border-radius: 16px;
    padding: 13px 14px;
    box-shadow: none;
}

.csm-tab:hover {
    background: #f1f5ff;
}

.csm-tab.is-active,
.csm-side-nav--static .csm-tab.is-active {
    background: linear-gradient(135deg, var(--csm-v14-blue), var(--csm-v14-purple));
    color: #fff;
    box-shadow: 0 14px 28px rgba(37, 99, 235, .25);
}

.csm-shell-main {
    min-width: 0;
}

.csm-topbar {
    background: rgba(255, 255, 255, .84);
    border: 1px solid rgba(216, 226, 246, .95);
    border-radius: 30px;
    padding: 18px 22px;
    box-shadow: 0 10px 28px rgba(38, 56, 107, .08);
    backdrop-filter: blur(18px);
    margin-bottom: 18px;
}

.csm-phase-badge,
.csm-pill,
.csm-tag,
.csm-ghost-btn,
.csm-mini-btn,
.csm-btn,
.csm-link-btn {
    border-radius: 15px;
}

.csm-panel {
    background: var(--csm-v14-card);
    border: 1px solid rgba(216, 226, 246, .95);
    border-radius: 24px;
    box-shadow: 0 10px 28px rgba(38, 56, 107, .08);
    color: var(--csm-v14-ink);
    backdrop-filter: blur(12px);
}

.csm-panel__head {
    border-color: var(--csm-v14-line);
}

.csm-cta-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.csm-cta {
    min-height: 116px;
    border: 0;
    border-radius: 22px;
    color: #fff;
    box-shadow: 0 18px 35px rgba(37, 99, 235, .2);
}

.csm-cta strong {
    font-size: 21px;
}

.csm-cta--blue {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
}

.csm-cta--green {
    background: linear-gradient(135deg, #10b981, #0f9f72);
}

.csm-cta--purple {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.csm-cta--orange {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.csm-market-card,
.csm-trade-card,
.csm-news,
.csm-article,
.csm-preview-item,
.csm-feedback-item,
.csm-news-mini,
.csm-coach-item,
.csm-projector-sector {
    background: #fff;
    border-color: var(--csm-v14-line);
    color: var(--csm-v14-ink);
}

.csm-market-card,
.csm-trade-card {
    border-top: 4px solid var(--sector-color, var(--csm-v14-blue));
}

.csm-market-grid,
.csm-market-grid--teacher {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.csm-price,
.csm-price-tag {
    color: var(--csm-v14-ink);
}

.csm-track span {
    background: #e8eef8;
}

.csm-track span.on {
    background: var(--sector-color, var(--csm-v14-blue));
}

.csm-chip-list,
.csm-company-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.csm-company-row {
    margin-top: 12px;
}

.csm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 7px 10px;
    background: #f2f6ff;
    border: 1px solid #dbe7ff;
    color: #2148b4;
    font-size: 12px;
    font-weight: 900;
}

.csm-chip--company {
    background: #fff;
    border-color: #d6e0ef;
    color: #334155;
}

.csm-chip--blue {
    background: #edf5ff;
    color: #1d4ed8;
    border-color: #cfe0ff;
}

.csm-chip--yellow {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

.csm-section-title {
    margin: 12px 0 8px;
    color: #1d4ed8;
    font-size: 14px;
    font-weight: 950;
}

.csm-preview-tags {
    border-top: 1px solid var(--csm-v14-line);
}

.csm-company-link-grid {
    display: grid;
    gap: 8px;
}

.csm-company-link {
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    border: 1px solid var(--csm-v14-line);
    border-radius: 16px;
    background: #fff;
}

.csm-company-link small,
.csm-muted,
.csm-small {
    color: var(--csm-v14-muted);
}

.csm-company-studio-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 16px;
}

.csm-company-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.csm-company-filter {
    padding: 10px 13px;
    border: 1px solid var(--csm-v14-line);
    border-radius: 16px;
    background: #fff;
    color: #30405f;
    font-weight: 950;
}

.csm-company-filter.active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
}

.csm-company-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.csm-company-item {
    display: grid;
    grid-template-columns: 44px 160px 88px minmax(0, 1fr) 70px;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--csm-v14-line);
    border-radius: 18px;
    background: #fff;
    color: var(--csm-v14-ink);
    text-align: left;
}

.csm-company-item.active {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.csm-company-avatar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #2563eb, #6d4aff);
    color: #fff;
    font-weight: 1000;
}

.csm-company-item em {
    display: inline-flex;
    justify-content: center;
    border-radius: 999px;
    padding: 6px 9px;
    background: #edf5ff;
    color: #1d4ed8;
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
}

.csm-company-item small {
    color: var(--csm-v14-muted);
    font-weight: 750;
}

.csm-company-visible {
    justify-self: end;
    border-radius: 999px;
    padding: 6px 9px;
    background: #fff1f2;
    color: #be123c;
    font-size: 12px;
    font-weight: 900;
}

.csm-company-visible.on {
    background: #ecfdf3;
    color: #15803d;
}

.csm-toggle-row {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--csm-v14-ink);
    font-weight: 900;
}

.csm-toggle-row input {
    width: 20px;
    height: 20px;
}

.csm-projector-hero {
    background: linear-gradient(135deg, #f8fbff, #eef5ff);
    border: 1px solid var(--csm-v14-line);
    border-radius: 34px;
    box-shadow: 0 20px 55px rgba(38, 56, 107, .13);
}

.csm-big-news {
    background: #fff;
    border: 1px solid var(--csm-v14-line);
}

.csm-projector-companies {
    margin: 16px 0;
}

.csm-projector-questions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.csm-question {
    padding: 16px;
    border: 1px solid var(--csm-v14-line);
    border-radius: 20px;
    background: #fff;
    color: var(--csm-v14-ink);
    font-weight: 950;
}

.csm-question span {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-right: 8px;
    border-radius: 14px;
    background: #f4f0ff;
    color: var(--csm-v14-purple);
}

.csm-field input,
.csm-field textarea,
.csm-field select {
    background: #fff;
    border: 1px solid var(--csm-v14-line);
    color: var(--csm-v14-ink);
    border-radius: 14px;
}

.csm-pill--blue {
    background: #edf5ff;
    color: #1d4ed8;
    border-color: #cfe0ff;
}

.csm-pill--green {
    background: #ecfdf3;
    color: #15803d;
    border-color: #bbf7d0;
}

.csm-pill--yellow {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

.csm-pill--red {
    background: #fff1f2;
    color: #be123c;
    border-color: #fecdd3;
}

.csm-student-stepper {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.csm-step-tab {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 86px;
    padding: 13px;
    border: 1px solid var(--csm-v14-line);
    border-radius: 18px;
    background: #fff;
    color: #475569;
    text-align: left;
    font: inherit;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(38, 56, 107, .07);
}

.csm-step-tab span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #edf5ff;
    color: #2563eb;
    font-weight: 1000;
}

.csm-step-tab strong,
.csm-step-tab small {
    display: block;
    min-width: 0;
}

.csm-step-tab small {
    grid-column: 2;
    margin-top: 3px;
    color: var(--csm-v14-muted);
    font-size: 11px;
    line-height: 1.25;
}

.csm-step-tab.is-active {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
    box-shadow: 0 12px 26px rgba(37, 99, 235, .13);
}

.csm-step-tab.is-active span {
    background: linear-gradient(135deg, var(--csm-v14-blue), var(--csm-v14-purple));
    color: #fff;
}

.csm-step-tab.is-complete {
    border-color: #bbf7d0;
    background: #f3fff8;
}

.csm-step-content {
    display: none;
}

.csm-step-content.is-active {
    display: block;
}

.csm-student-order-form {
    display: contents;
}

.csm-step-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 0 20px 20px;
}

.csm-step-actions .csm-btn {
    min-width: 124px;
}

.csm-thesis-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.csm-thesis-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--csm-v14-line);
    border-left: 4px solid var(--sector-color, var(--csm-v14-blue));
    border-radius: 20px;
    background: #fff;
}

.csm-thesis-card.is-active {
    border-color: #93c5fd;
    border-left-color: var(--sector-color, var(--csm-v14-blue));
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.csm-thesis-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}

.csm-thesis-price {
    color: var(--csm-v14-muted);
    font-size: 13px;
    font-weight: 900;
}

.csm-thesis-price strong {
    color: var(--csm-v14-ink);
    font-size: 22px;
}

.csm-company-pick,
.csm-thesis-select {
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--csm-v14-line);
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.csm-company-pick.is-active,
.csm-thesis-select:hover,
.csm-company-pick:hover {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
}

.csm-thesis-select {
    justify-self: start;
    border-radius: 14px;
}

.csm-thesis-form,
.csm-reason-field,
.csm-review-preview,
.csm-submit-row {
    margin-top: 14px;
}

.csm-summary-list {
    display: grid;
    gap: 8px;
}

.csm-summary-row {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) 120px;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--csm-v14-line);
    border-radius: 15px;
    background: #fff;
    font-weight: 900;
}

.csm-summary-row b.buy {
    color: #1d4ed8;
}

.csm-summary-row b.sell {
    color: #be123c;
}

.csm-summary-row--note {
    background: #f8fbff;
    color: var(--csm-v14-muted);
}

@media (max-width: 1180px) {
    .csm-app-shell {
        grid-template-columns: 1fr;
    }

    .csm-sidebar {
        position: static;
    }

    .csm-side-nav {
        grid-template-columns: repeat(3, 1fr);
    }

    .csm-cta-row,
    .csm-market-grid,
    .csm-market-grid--teacher,
    .csm-projector-questions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .csm-company-studio-grid,
    .csm-student-shell--steps {
        grid-template-columns: 1fr;
    }

    .csm-student-stepper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .csm-app-shell {
        width: calc(100vw - 18px);
        margin: 9px auto;
    }

    .csm-side-nav {
        grid-template-columns: 1fr 1fr;
    }

    .csm-cta-row,
    .csm-market-grid,
    .csm-market-grid--teacher,
    .csm-projector-questions {
        grid-template-columns: 1fr;
    }

    .csm-company-item {
        grid-template-columns: 44px 1fr;
    }

    .csm-student-stepper,
    .csm-thesis-grid,
    .csm-summary-row {
        grid-template-columns: 1fr;
    }

    .csm-step-actions {
        align-items: stretch;
        flex-direction: column;
    }
}