/* ===== DESIGN TOKENS (KMITL Theme) ===== */
    :root {
        --kmitl-orange: #E65525;
        --kmitl-orange-light: #F0764D;
        --kmitl-orange-dark: #C44319;
        --navy-900: #0F172A;
        --navy-800: #1E293B;
        --navy-700: #334155;
        --gray-50: #F8FAFC;
        --gray-100: #F1F5F9;
        --gray-200: #E2E8F0;
        --gray-300: #CBD5E1;
        --gray-500: #64748B;

        --bg: var(--gray-50);
        --card-bg: #FFFFFF;
        --text-main: var(--navy-800);
        --text-muted: var(--gray-500);
        --border: var(--gray-200);

        --success: #059669;
        --success-light: #D1FAE5;
        --warning: #D97706;
        --warning-light: #FEF3C7;
        --danger: #DC2626;
        --danger-light: #FEE2E2;

        --radius: 8px;
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: 'Sarabun', sans-serif;
        background: var(--bg);
        color: var(--text-main);
        min-height: 100vh;
        line-height: 1.5;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .font-prompt {
        font-family: 'Prompt', sans-serif;
    }

    .container {
        max-width: 1024px;
        margin: 0 auto;
        padding: 0 24px 40px;
    }

    /* ===== HEADER ===== */
    header {
        background-color: var(--card-bg);
        border-bottom: 2px solid var(--kmitl-orange);
        padding: 24px 0;
        margin-bottom: 40px;
        box-shadow: var(--shadow-sm);
    }

    .header-content {
        max-width: 1024px;
        margin: 0 auto;
        padding: 0 24px;
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .advisor-login-link {
        margin-left: auto;
        padding: 9px 14px;
        border: 1px solid var(--kmitl-orange);
        border-radius: 7px;
        color: var(--kmitl-orange);
        background: #fff;
        font-family: 'Sarabun', sans-serif;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color .2s, color .2s;
    }

    .advisor-login-link:hover {
        background: var(--kmitl-orange);
        color: #fff;
    }

    @media (max-width: 600px) {
        .header-content {
            flex-wrap: wrap;
        }

        .advisor-login-link {
            margin-left: 72px;
            margin-top: -8px;
        }
    }

    .logo-box {
        width: 56px;
        height: 56px;
        background-color: var(--kmitl-orange);
        color: white;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        font-weight: bold;
        font-family: 'Prompt', sans-serif;
    }

    .header-text h1 {
        font-size: 20px;
        color: var(--navy-900);
        margin-bottom: 4px;
    }

    .header-text p {
        font-size: 14px;
        color: var(--text-muted);
        font-family: 'Sarabun', sans-serif;
    }

    /* ===== CARD ===== */
    .card {
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 32px;
        margin-bottom: 24px;
        box-shadow: var(--shadow-sm);
    }

    .card-title {
        font-family: 'Prompt', sans-serif;
        font-size: 18px;
        font-weight: 600;
        color: var(--navy-900);
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--gray-100);
    }

    .card-title .icon {
        color: var(--kmitl-orange);
    }

    /* ===== UPLOAD ZONE ===== */
    #upload-zone {
        border: 2px dashed var(--gray-300);
        border-radius: var(--radius);
        background-color: var(--gray-50);
        padding: 48px 24px;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
    }

    #upload-zone:hover,
    #upload-zone.drag-over {
        border-color: var(--kmitl-orange);
        background-color: #FFF7F5;
    }

    #upload-zone .upload-icon {
        font-size: 48px;
        margin-bottom: 16px;
        display: block;
        color: var(--gray-500);
    }

    #upload-zone:hover .upload-icon {
        color: var(--kmitl-orange);
    }

    #upload-zone p {
        color: var(--text-muted);
        font-size: 15px;
        margin-top: 8px;
    }

    #upload-zone strong {
        color: var(--navy-800);
        font-family: 'Prompt', sans-serif;
    }

    #file-input {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        width: 100%;
        height: 100%;
    }

    #file-label {
        display: inline-block;
        margin-top: 16px;
        background: var(--card-bg);
        color: var(--navy-800);
        border: 1px solid var(--border);
        padding: 10px 24px;
        border-radius: 6px;
        font-size: 15px;
        font-weight: 500;
        font-family: 'Prompt', sans-serif;
        transition: all 0.2s;
    }

    #upload-zone:hover #file-label {
        border-color: var(--kmitl-orange);
        color: var(--kmitl-orange);
    }

    #selected-file {
        display: none;
        margin-top: 16px;
        padding: 12px 16px;
        background: #FFF7F5;
        border: 1px solid #FADED5;
        border-radius: var(--radius);
        font-size: 15px;
        color: var(--kmitl-orange-dark);
        align-items: center;
        gap: 8px;
        font-weight: 500;
    }

    #selected-file.show {
        display: flex;
    }

    /* ===== BUTTONS ===== */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 24px;
        border-radius: 6px;
        font-size: 15px;
        font-weight: 500;
        border: 1px solid transparent;
        cursor: pointer;
        transition: all 0.2s;
        font-family: 'Prompt', sans-serif;
    }

    .btn-primary {
        background-color: var(--kmitl-orange);
        color: #fff;
        width: 100%;
        justify-content: center;
        margin-top: 24px;
        box-shadow: 0 2px 4px rgba(230, 85, 37, 0.2);
    }

    .btn-primary:hover:not(:disabled) {
        background-color: var(--kmitl-orange-dark);
        transform: translateY(-1px);
    }

    .btn-primary:disabled {
        background-color: var(--gray-300);
        color: var(--gray-500);
        cursor: not-allowed;
        box-shadow: none;
    }

    .btn-success {
        background-color: var(--success);
        color: #fff;
    }

    .btn-success:hover {
        background-color: #047857;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
    }

    .btn-outline {
        background-color: transparent;
        border-color: var(--border);
        color: var(--navy-700);
    }

    .btn-outline:hover {
        background-color: var(--gray-50);
        border-color: var(--gray-300);
    }

    /* ===== ALERTS & NOTES ===== */
    .note {
        margin-top: 24px;
        padding: 16px;
        background: var(--gray-50);
        border-left: 4px solid var(--kmitl-orange);
        border-radius: 0 var(--radius) var(--radius) 0;
        font-size: 14px;
        color: var(--navy-700);
    }

    .error-box {
        padding: 16px;
        background: var(--danger-light);
        border-left: 4px solid var(--danger);
        border-radius: 0 var(--radius) var(--radius) 0;
        font-size: 14px;
        color: var(--danger);
        margin-top: 16px;
        font-family: 'Prompt', sans-serif;
    }

    /* ===== SPINNER ===== */
    .spinner {
        display: none;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 24px;
        color: var(--text-muted);
        font-size: 15px;
        font-family: 'Prompt', sans-serif;
    }

    .spinner.show {
        display: flex;
    }

    .spin {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 3px solid var(--gray-200);
        border-top-color: var(--kmitl-orange);
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* ===== STEP INDICATOR ===== */
    .steps {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        margin-bottom: 32px;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .step-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        position: relative;
        z-index: 2;
    }

    .step-dot {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--card-bg);
        border: 2px solid var(--gray-300);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 600;
        color: var(--gray-500);
        transition: all 0.3s;
        font-family: 'Prompt', sans-serif;
    }

    .step-dot.active {
        background: var(--kmitl-orange);
        border-color: var(--kmitl-orange);
        color: #fff;
    }

    .step-dot.done {
        background: var(--success);
        border-color: var(--success);
        color: #fff;
    }

    .step-label {
        font-size: 13px;
        color: var(--gray-500);
        font-family: 'Prompt', sans-serif;
        font-weight: 500;
    }

    .step-label.active {
        color: var(--navy-900);
    }

    .step-line {
        flex: 1;
        height: 2px;
        background: var(--gray-200);
        margin: 0 -16px;
        position: relative;
        top: -12px;
        z-index: 1;
    }

    .step-line.done {
        background: var(--success);
    }

    /* ===== REVIEW TABLE ===== */
    #review-section {
        display: none;
    }

    #review-section.show {
        display: block;
    }

    .review-info {
        display: flex;
        gap: 16px;
        margin-bottom: 24px;
        flex-wrap: wrap;
    }

    .review-badge {
        background: var(--gray-50);
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 12px 20px;
        font-size: 15px;
        color: var(--navy-800);
    }

    .review-badge strong {
        color: var(--kmitl-orange);
        font-family: 'Prompt', sans-serif;
        font-size: 16px;
    }

    .table-wrap {
        overflow-x: auto;
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }

    table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
    }

    thead {
        background: var(--gray-50);
        border-bottom: 2px solid var(--gray-200);
    }

    th {
        padding: 12px 16px;
        text-align: left;
        font-size: 14px;
        font-family: 'Prompt', sans-serif;
        color: var(--navy-700);
        font-weight: 600;
        white-space: nowrap;
    }

    td {
        padding: 12px 16px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
    }

    tbody tr:last-child td {
        border-bottom: none;
    }

    tbody tr:hover {
        background-color: var(--gray-50);
    }

    .code-cell {
        font-family: monospace;
        font-size: 14px;
        color: var(--text-muted);
    }

    .credit-cell {
        text-align: center;
        font-weight: 500;
    }

    .grade-input {
        background: transparent;
        border: 1px solid transparent;
        border-radius: 4px;
        color: var(--navy-900);
        padding: 4px 8px;
        font-size: 14px;
        width: 72px;
        text-align: center;
        font-family: 'Prompt', sans-serif;
        font-weight: 500;
        transition: all 0.2s;
    }

    .grade-input:hover {
        border-color: var(--gray-300);
        background: #fff;
    }

    .grade-input:focus {
        outline: none;
        border-color: var(--kmitl-orange);
        box-shadow: 0 0 0 2px rgba(230, 85, 37, 0.1);
    }

    .grade-input.overridden {
        border-color: var(--warning);
        color: var(--warning);
        background-color: var(--warning-light);
    }

    .sem-header td {
        background: var(--gray-100);
        border-bottom: 1px solid var(--gray-200);
        font-size: 14px;
        font-weight: 600;
        color: var(--navy-800);
        padding: 10px 16px;
        font-family: 'Prompt', sans-serif;
    }

    .btn-add-row {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        font-size: 12px;
        font-family: 'Prompt', sans-serif;
        font-weight: 500;
        color: var(--kmitl-orange);
        background: #FFFFFF;
        border: 1px solid var(--kmitl-orange-light);
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.15s;
    }

    .btn-add-row:hover {
        background: var(--kmitl-orange);
        color: #FFFFFF;
    }

    .btn-del-row {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 4px;
        border: 1px solid transparent;
        background: transparent;
        color: var(--gray-500);
        cursor: pointer;
        font-size: 16px;
        line-height: 1;
        transition: all 0.15s;
    }

    .btn-del-row:hover {
        background: var(--danger-light);
        color: var(--danger);
        border-color: #FCA5A5;
    }

    .btn-add-semester {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 16px;
        font-size: 14px;
        font-family: 'Prompt', sans-serif;
        font-weight: 500;
        color: var(--navy-700);
        background: #FFFFFF;
        border: 1px dashed var(--gray-300);
        border-radius: var(--radius);
        cursor: pointer;
        margin-top: 16px;
        width: 100%;
        justify-content: center;
        transition: all 0.2s;
    }

    .btn-add-semester:hover {
        border-color: var(--kmitl-orange);
        color: var(--kmitl-orange);
        background: var(--gray-50);
    }

    .badge-current {
        display: inline-block;
        font-size: 12px;
        font-weight: 500;
        font-family: 'Prompt', sans-serif;
        background: var(--warning-light);
        color: var(--warning);
        border: 1px solid rgba(217, 119, 6, 0.2);
        border-radius: 4px;
        padding: 2px 8px;
        margin-left: 8px;
    }

    .badge-pass {
        display: inline-block;
        font-size: 13px;
        font-weight: 600;
        font-family: 'Prompt', sans-serif;
        background: var(--success-light);
        color: var(--success);
        border-radius: 4px;
        padding: 4px 12px;
    }

    .badge-fail {
        display: inline-block;
        font-size: 13px;
        font-weight: 600;
        font-family: 'Prompt', sans-serif;
        background: var(--danger-light);
        color: var(--danger);
        border-radius: 4px;
        padding: 4px 12px;
    }

    .confirm-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 24px;
        gap: 16px;
        flex-wrap: wrap;
        background: var(--gray-50);
        padding: 20px;
        border-radius: var(--radius);
        border: 1px solid var(--gray-200);
    }

    .confirm-bar p {
        font-size: 15px;
        color: var(--navy-800);
        font-family: 'Prompt', sans-serif;
    }

    .confirm-bar strong {
        color: var(--kmitl-orange);
    }

    /* ===== DASHBOARD ===== */
    #dashboard-section {
        display: none;
    }

    #dashboard-section.show {
        display: block;
    }

    /* overview cards */
    .overview-grid {
        display: grid;
        grid-template-columns: 1fr;
        margin-bottom: 24px;
    }

    .ov-card {
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 24px;
        position: relative;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }

    .ov-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 4px;
    }

    .ov-card.primary::before {
        background: var(--kmitl-orange);
    }

    .ov-card.success::before {
        background: var(--success);
    }

    .ov-card.warning::before {
        background: var(--warning);
    }

    .ov-label {
        font-size: 14px;
        color: var(--text-muted);
        font-family: 'Prompt', sans-serif;
        font-weight: 500;
        margin-bottom: 8px;
    }

    .ov-value {
        font-size: 32px;
        font-weight: 700;
        font-family: 'Prompt', sans-serif;
        line-height: 1;
    }

    .ov-card.primary .ov-value {
        color: var(--navy-900);
    }

    .ov-card.success .ov-value {
        color: var(--success);
    }

    .ov-card.warning .ov-value {
        color: var(--warning);
    }

    .ov-value span {
        font-size: 16px;
        font-weight: 500;
        color: var(--gray-400);
    }

    .ov-sub {
        font-size: 14px;
        color: var(--text-muted);
        margin-top: 8px;
    }

    /* progress bar */
    .prog-bar-wrap {
        margin-top: 16px;
    }

    .prog-bar-top {
        display: flex;
        justify-content: space-between;
        font-size: 15px;
        margin-bottom: 12px;
        font-family: 'Prompt', sans-serif;
    }

    .prog-bar-top span {
        color: var(--navy-700);
        font-weight: 500;
    }

    .prog-bar-top strong {
        color: var(--kmitl-orange);
        font-size: 18px;
    }

    .prog-track {
        background: var(--gray-200);
        border-radius: 99px;
        height: 12px;
        overflow: hidden;
    }

    .prog-fill {
        height: 100%;
        border-radius: 99px;
        background-color: var(--kmitl-orange);
        transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ===== CATEGORIES ===== */
    .cat-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    @media (max-width: 768px) {
        .cat-grid {
            grid-template-columns: 1fr;
        }
    }

    .cat-card {
        background: var(--gray-50);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 20px;
        transition: all 0.2s;
        cursor: pointer;
    }

    .cat-card:hover {
        border-color: var(--gray-300);
        background: #fff;
        box-shadow: var(--shadow-sm);
    }

    .cat-card.active {
        border-color: var(--kmitl-orange);
        background: #FFF7F5;
    }

    .cat-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
    }

    .cat-name {
        font-size: 15px;
        font-weight: 600;
        font-family: 'Prompt', sans-serif;
        color: var(--navy-800);
    }

    .cat-credits {
        font-size: 20px;
        font-weight: 700;
        font-family: 'Prompt', sans-serif;
        color: var(--navy-900);
    }

    .cat-credits small {
        font-size: 14px;
        font-weight: 400;
        color: var(--gray-400);
    }

    .cat-track {
        background: var(--gray-200);
        border-radius: 99px;
        height: 6px;
        overflow: hidden;
        margin-bottom: 8px;
    }

    .cat-fill {
        height: 100%;
        border-radius: 99px;
        transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .cat-pct {
        font-size: 13px;
        color: var(--text-muted);
        font-family: 'Prompt', sans-serif;
        font-weight: 500;
        text-align: right;
    }

    /* cat detail expand */
    .cat-detail {
        display: none;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px dashed var(--gray-300);
    }

    .cat-detail.show {
        display: block;
    }

    .cat-course-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 8px 0;
        font-size: 14px;
        border-bottom: 1px solid var(--gray-100);
    }

    .cat-course-item:last-child {
        border-bottom: none;
    }

    .cat-course-left {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .cat-course-code {
        font-family: monospace;
        color: var(--text-muted);
        font-size: 13px;
    }

    .cat-course-name {
        color: var(--navy-800);
        font-weight: 500;
    }

    .cat-grade {
        font-weight: 600;
        font-size: 14px;
        font-family: 'Prompt', sans-serif;
        color: var(--success);
    }

    .cat-grade.in-prog {
        color: #d97706;
        font-size: 12px;
        background: #fffbeb;
        padding: 2px 8px;
        border-radius: 4px;
        border: 1px solid #fde68a;
        font-weight: 500;
    }

    .cat-cr {
        color: var(--text-muted);
        font-size: 13px;
    }

    /* ===== TIMELINE ===== */
    .timeline-item {
        margin-bottom: 12px;
        border-radius: var(--radius);
        overflow: hidden;
        border: 1px solid var(--border);
    }

    .timeline-header {
        background: var(--gray-50);
        padding: 16px 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: background 0.2s;
    }

    .timeline-header:hover {
        background: var(--gray-100);
    }

    .timeline-header-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .timeline-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--kmitl-orange);
        flex-shrink: 0;
    }

    .timeline-label {
        font-size: 15px;
        font-weight: 600;
        font-family: 'Prompt', sans-serif;
        color: var(--navy-800);
    }

    .timeline-meta {
        font-size: 14px;
        color: var(--text-muted);
    }

    .timeline-chevron {
        font-size: 12px;
        color: var(--gray-400);
        transition: transform 0.2s;
    }

    .timeline-chevron.open {
        transform: rotate(180deg);
    }

    .timeline-body {
        display: none;
        background: #fff;
        border-top: 1px solid var(--border);
    }

    .timeline-body.show {
        display: block;
    }

    .tl-row {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 12px 20px;
        border-bottom: 1px solid var(--gray-100);
        font-size: 14px;
    }

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

    .tl-code {
        font-family: monospace;
        font-size: 13px;
        color: var(--text-muted);
        width: 80px;
        flex-shrink: 0;
    }

    .tl-name {
        flex: 1;
        color: var(--navy-800);
        font-weight: 500;
    }

    .tl-cr {
        color: var(--text-muted);
        font-size: 13px;
        flex-shrink: 0;
    }

    .tl-grade {
        font-weight: 600;
        font-size: 14px;
        font-family: 'Prompt', sans-serif;
        width: 40px;
        text-align: right;
        flex-shrink: 0;
        color: var(--navy-900);
    }

    /* ===== REMAINING TABLE ===== */
    .prereq-ok {
        color: var(--success);
        font-size: 13px;
        font-weight: 500;
    }

    .prereq-block {
        color: var(--danger);
        font-size: 13px;
        font-weight: 500;
    }

    /* ===== IN-PROGRESS ===== */
    .inprog-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .inprog-chip {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--warning-light);
        border: 1px solid rgba(217, 119, 6, 0.3);
        border-radius: 6px;
        padding: 8px 16px;
        font-size: 14px;
    }

    .inprog-chip span.code {
        font-family: monospace;
        color: var(--warning);
        font-weight: 600;
    }

    .inprog-chip span.name {
        color: var(--navy-800);
        font-weight: 500;
    }

    /* ===== RESET LINK ===== */
    .reset-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 24px;
        font-size: 15px;
        color: var(--navy-700);
        cursor: pointer;
        background: none;
        border: none;
        font-weight: 500;
        font-family: 'Prompt', sans-serif;
        padding: 0;
        transition: color 0.2s;
    }

    .reset-link:hover {
        color: var(--kmitl-orange);
    }

    /* ===== STUDY PLAN ===== */
    #plan-section {
        display: none;
    }

    #plan-section.show {
        display: block;
    }

    .plan-actions {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        margin-bottom: 24px;
    }

    .btn-plan {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 28px;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        transition: all 0.25s;
        font-family: 'Prompt', sans-serif;
        background: linear-gradient(135deg, var(--kmitl-orange), var(--kmitl-orange-light));
        color: #fff;
        box-shadow: 0 4px 12px rgba(230, 85, 37, 0.3);
    }

    .btn-plan:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(230, 85, 37, 0.4);
    }

    .btn-plan:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    .plan-toggle {
        display: inline-flex;
        border-radius: 8px;
        overflow: hidden;
        border: 2px solid var(--gray-200);
        background: var(--card-bg);
    }

    .plan-toggle-btn {
        padding: 10px 20px;
        border: none;
        background: transparent;
        font-family: 'Prompt', sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: var(--gray-500);
        cursor: pointer;
        transition: all 0.2s;
    }

    .plan-toggle-btn.active {
        background: var(--kmitl-orange);
        color: #fff;
    }

    .plan-toggle-btn:hover:not(.active) {
        background: var(--gray-50);
        color: var(--navy-800);
    }

    .plan-alert {
        padding: 16px 20px;
        border-radius: var(--radius);
        margin-bottom: 16px;
        font-size: 14px;
        font-family: 'Prompt', sans-serif;
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .plan-alert.warning {
        background: #FEF3C7;
        border: 1px solid #FCD34D;
        color: #92400E;
    }

    .plan-alert.danger {
        background: var(--danger-light);
        border: 1px solid #FCA5A5;
        color: #991B1B;
    }

    .plan-alert.success {
        background: var(--success-light);
        border: 1px solid #6EE7B7;
        color: #065F46;
    }

    .plan-alert.info {
        background: #DBEAFE;
        border: 1px solid #93C5FD;
        color: #1E40AF;
    }

    .plan-alert-icon {
        font-size: 20px;
        flex-shrink: 0;
        line-height: 1;
    }

    .plan-alert-content {
        flex: 1;
    }

    .plan-alert-title {
        font-weight: 600;
        margin-bottom: 4px;
    }

    .plan-summary-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
    }

    .plan-stat {
        background: var(--gray-50);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 16px 20px;
        text-align: center;
    }

    .plan-stat-value {
        font-size: 28px;
        font-weight: 700;
        font-family: 'Prompt', sans-serif;
        color: var(--navy-900);
        line-height: 1;
    }

    .plan-stat-value.ok {
        color: var(--success);
    }

    .plan-stat-value.warn {
        color: var(--warning);
    }

    .plan-stat-label {
        font-size: 13px;
        color: var(--text-muted);
        margin-top: 6px;
        font-family: 'Prompt', sans-serif;
    }

    .plan-term {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 16px;
        overflow: hidden;
    }

    .plan-term-header {
        background: var(--gray-50);
        padding: 16px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        transition: background 0.2s;
    }

    .plan-term-header:hover {
        background: var(--gray-100);
    }

    .plan-term-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .plan-term-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--kmitl-orange);
        flex-shrink: 0;
    }

    .plan-term-label {
        font-size: 16px;
        font-weight: 600;
        font-family: 'Prompt', sans-serif;
        color: var(--navy-800);
    }

    .plan-term-meta {
        display: flex;
        gap: 16px;
        font-size: 13px;
        font-family: 'Prompt', sans-serif;
    }

    .plan-term-meta span {
        color: var(--text-muted);
    }

    .plan-term-meta strong {
        color: var(--navy-800);
    }

    .plan-term-chevron {
        font-size: 12px;
        color: var(--gray-400);
        transition: transform 0.2s;
    }

    .plan-term-chevron.open {
        transform: rotate(180deg);
    }

    .plan-term-body {
        display: none;
        border-top: 1px solid var(--border);
        background: #fff;
    }

    .plan-term-body.show {
        display: block;
    }

    .plan-course-row {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 12px 20px;
        border-bottom: 1px solid var(--gray-100);
        font-size: 14px;
    }

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

    .plan-course-code {
        font-family: monospace;
        font-size: 13px;
        color: var(--text-muted);
        width: 80px;
        flex-shrink: 0;
    }

    .plan-course-name {
        flex: 1;
        color: var(--navy-800);
        font-weight: 500;
    }

    .plan-course-credit {
        color: var(--text-muted);
        font-size: 13px;
        flex-shrink: 0;
    }

    .plan-badge {
        display: inline-block;
        font-size: 11px;
        font-weight: 600;
        font-family: 'Prompt', sans-serif;
        padding: 2px 8px;
        border-radius: 4px;
        flex-shrink: 0;
    }

    .plan-badge.required {
        background: #FFF7ED;
        color: #C2410C;
        border: 1px solid #FDBA74;
    }

    .plan-badge.deferred {
        background: #FEF3C7;
        color: #92400E;
        border: 1px solid #FCD34D;
    }

    .plan-term-footer {
        padding: 12px 20px;
        background: var(--gray-50);
        border-top: 1px solid var(--border);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        font-family: 'Prompt', sans-serif;
    }

    .plan-term-footer span {
        color: var(--text-muted);
    }

    .plan-term-footer strong {
        color: var(--navy-800);
    }

    .plan-credits-bar {
        height: 6px;
        border-radius: 99px;
        background: var(--gray-200);
        flex: 1;
        margin: 0 16px;
        max-width: 200px;
        overflow: hidden;
    }

    .plan-credits-fill {
        height: 100%;
        border-radius: 99px;
        background: var(--kmitl-orange);
        transition: width 0.6s ease;
    }

    .plan-suggestion-list {
        list-style: none;
        padding: 0;
    }

    .plan-suggestion-list li {
        padding: 8px 0;
        font-size: 14px;
        color: var(--navy-700);
        border-bottom: 1px solid var(--gray-100);
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .plan-suggestion-list li:last-child {
        border-bottom: none;
    }

    /* ===== DRAG AND DROP & CUSTOM COURSES ===== */
    .unplanned-pool {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 16px;
        background: var(--gray-50);
        border: 2px dashed var(--gray-300);
        border-radius: var(--radius);
        min-height: 80px;
        margin-bottom: 24px;
        transition: background 0.2s;
    }

    .unplanned-pool.drag-over {
        background: var(--primary-light);
        border-color: var(--kmitl-orange);
    }

    .draggable-course {
        cursor: grab;
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 10px 14px;
        background: #fff;
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 13px;
        min-width: 140px;
        max-width: 200px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
        position: relative;
    }

    .draggable-course:active {
        cursor: grabbing;
        transform: scale(0.98);
    }

    .draggable-course.dragging {
        opacity: 0.5;
    }

    .draggable-course[data-cat="ge"] {
        border-left: 4px solid var(--gray-400);
    }

    .draggable-course[data-cat="elective"] {
        border-left: 4px solid #D97706;
    }

    .draggable-course[data-cat="free"] {
        border-left: 4px solid #DB2777;
    }

    .draggable-course[data-is-core="true"] {
        border-left: 4px solid #EA580C;
    }

    .draggable-course.custom-course {
        border-left: 4px solid var(--success);
    }

    /* When inside term dropzone: Full width row */
    .plan-term-dropzone .draggable-course.sys-course {
        flex-direction: row;
        width: 100%;
        box-sizing: border-box;
        max-width: none;
        padding: 12px 20px !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid var(--gray-50) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin-bottom: 0 !important;
        font-size: 14px !important;
        gap: 16px !important;
    }

    /* When inside unplanned pool: Small block */
    .unplanned-pool .draggable-course.sys-course {
        flex-direction: column;
        width: auto;
        min-width: 140px;
        max-width: 200px;
        padding: 10px 14px !important;
        background: #fff !important;
        border: 1px solid var(--border) !important;
        border-radius: 6px !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
        margin-bottom: 0 !important;
        font-size: 13px !important;
        gap: 4px !important;
    }

    .unplanned-pool .draggable-course.sys-course[data-cat="ge"] {
        border-left: 4px solid var(--gray-400) !important;
    }

    .unplanned-pool .draggable-course.sys-course[data-cat="elective"] {
        border-left: 4px solid #D97706 !important;
    }

    .unplanned-pool .draggable-course.sys-course[data-cat="free"] {
        border-left: 4px solid #DB2777 !important;
    }

    .unplanned-pool .draggable-course.sys-course[data-is-core="true"] {
        border-left: 4px solid #EA580C !important;
    }

    .unplanned-pool .draggable-course.sys-course.custom-course {
        border-left: 4px solid var(--success) !important;
    }

    .unplanned-pool .sys-course .plan-course-code,
    .unplanned-pool .sys-course .plan-badge,
    .unplanned-pool .sys-course .course-del-btn {
        display: none !important;
    }

    .unplanned-pool .sys-course[data-is-core="true"] .plan-course-code,
    .unplanned-pool .sys-course[data-is-core="true"] .plan-badge {
        display: inline-block !important;
    }

    .unplanned-pool .sys-course .plan-course-name {
        font-weight: 600;
        font-family: 'Prompt', sans-serif;
        color: var(--navy-800);
        word-break: break-word;
        line-height: 1.3;
        flex: unset;
    }

    .unplanned-pool .sys-course .plan-course-credit {
        font-size: 12px;
        color: var(--text-muted);
        text-align: left;
        flex-shrink: unset;
    }


    .course-title-drag {
        font-weight: 600;
        font-family: 'Prompt', sans-serif;
        color: var(--navy-800);
        word-break: break-word;
        line-height: 1.3;
    }

    .course-cred-drag {
        font-size: 12px;
        color: var(--text-muted);
    }

    .course-del-btn {
        position: absolute;
        top: 4px;
        right: 4px;
        font-size: 10px;
        color: var(--danger);
        background: transparent;
        border: none;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.2s;
    }

    .draggable-course:hover .course-del-btn {
        opacity: 1;
    }

    .plan-term-dropzone {
        min-height: 60px;
        padding: 12px;
        transition: background 0.2s;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .plan-term-dropzone.drag-over {
        background: var(--primary-light);
        outline: 2px dashed var(--kmitl-orange);
        outline-offset: -2px;
        border-radius: 6px;
    }

    .btn-add-course {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 8px;
        margin-top: 8px;
        background: transparent;
        border: 1px dashed var(--gray-300);
        border-radius: 6px;
        color: var(--gray-500);
        cursor: pointer;
        font-family: 'Prompt', sans-serif;
        font-size: 13px;
        font-weight: 500;
        transition: all 0.2s;
    }

    .btn-add-course:hover {
        background: var(--gray-50);
        color: var(--kmitl-orange);
        border-color: var(--kmitl-orange);
    }

    /* Modal for Add Custom Course */
    .add-course-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(15, 23, 42, 0.6);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        padding: 20px;
        backdrop-filter: blur(4px);
    }

    .add-course-modal-overlay.show {
        display: flex;
    }

    .add-course-modal {
        background: #fff;
        border-radius: var(--radius);
        width: 100%;
        max-width: 400px;
        box-shadow: var(--shadow-md);
        display: flex;
        flex-direction: column;
        padding: 24px;
    }

    /* ===== PLAN MODE STYLES ===== */
    body.print-plan-mode .container {
        max-width: 1400px;
        transition: max-width 0.3s ease;
    }

    /* ===== PRINT STYLES ===== */
    @media print {
        body {
            background: #fff !important;
            color: #000 !important;
            font-size: 12pt !important;
        }

        header,
        #steps,
        .reset-link,
        .btn,
        .btn-plan,
        .plan-toggle,
        .course-del-btn,
        .btn-add-course {
            display: none !important;
        }

        #dashboard-content-wrapper {
            display: block !important;
        }

        body.print-plan-mode #dashboard-content-wrapper>* {
            display: none !important;
        }

        body.print-plan-mode #dashboard-content-wrapper>#categories-card {
            display: block !important;
            margin-top: 20px !important;
            margin-bottom: 20px !important;
            border: none !important;
            padding: 0 !important;
        }

        body.print-plan-mode .plan-sidebar {
            display: none !important;
        }

        body.print-plan-mode #plan-summary {
            display: none !important;
        }

        .container {
            max-width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        .card.print-hide {
            display: none !important;
        }

        .print-hide {
            display: none !important;
        }

        .print-only {
            display: block !important;
        }

        .card {
            box-shadow: none !important;
            border: 1px solid #ddd !important;
            padding: 16px !important;
            margin-bottom: 20px !important;
            page-break-inside: avoid;
        }

        .plan-term {
            page-break-inside: avoid;
            border-color: #000 !important;
        }

        tr,
        .timeline-item,
        .cat-card,
        .plan-course-row {
            page-break-inside: avoid;
        }

        * {
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }

        /* Force all details to be open for print */
        .cat-detail {
            display: block !important;
        }

        .timeline-body {
            display: block !important;
        }

        .plan-term-body {
            display: block !important;
        }

        /* Hide draggable dots in print */
        .plan-course-code span {
            display: none !important;
        }

        .draggable-course {
            cursor: default !important;
        }
    }


    /* ===== Withdrawal Impact Modal ===== */
    .withdraw-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(15, 23, 42, 0.6);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        padding: 20px;
        backdrop-filter: blur(4px);
    }

    .withdraw-modal-overlay.show {
        display: flex;
    }

    .withdraw-modal {
        background: #fff;
        border-radius: var(--radius);
        width: 100%;
        max-width: 600px;
        box-shadow: var(--shadow-md);
        display: flex;
        flex-direction: column;
        max-height: 90vh;
    }

    .withdraw-modal-header {
        padding: 20px 24px;
        border-bottom: 1px solid var(--border);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .withdraw-modal-title {
        font-family: 'Prompt', sans-serif;
        font-size: 18px;
        font-weight: 600;
        color: var(--navy-900);
    }

    .withdraw-close-btn {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: var(--gray-500);
    }

    .withdraw-modal-body {
        padding: 24px;
        overflow-y: auto;
    }

    .course-list-btn {
        width: 100%;
        text-align: left;
        padding: 12px 16px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 8px;
        cursor: pointer;
        background: #fff;
        transition: all 0.2s;
        font-family: 'Sarabun', sans-serif;
    }

    .course-list-btn:hover {
        border-color: var(--danger);
        background: var(--danger-light);
    }

    .impact-report {
        margin-top: 24px;
        display: none;
    }

    .impact-alert {
        background: var(--warning-light);
        border-left: 4px solid var(--warning);
        padding: 16px;
        border-radius: 0 var(--radius) var(--radius) 0;
        color: var(--navy-900);
    }

    .impact-safe {
        background: var(--success-light);
        border-left: 4px solid var(--success);
        padding: 16px;
        border-radius: 0 var(--radius) var(--radius) 0;
        color: var(--navy-900);
    }

    .impact-course-list {
        margin-top: 12px;
        padding-left: 20px;
    }

    .impact-course-list li {
        margin-bottom: 4px;
    }

    /* ===== DRAG AND DROP & CUSTOM COURSES ===== */
    .unplanned-pool {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 16px;
        background: var(--gray-50);
        border: 2px dashed var(--gray-300);
        border-radius: var(--radius);
        min-height: 80px;
        margin-bottom: 24px;
        transition: background 0.2s;
    }

    .unplanned-pool.drag-over {
        background: var(--primary-light);
        border-color: var(--kmitl-orange);
    }

    .draggable-course {
        cursor: grab;
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 10px 14px;
        background: #fff;
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 13px;
        min-width: 140px;
        max-width: 200px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
        position: relative;
    }

    .draggable-course:active {
        cursor: grabbing;
        transform: scale(0.98);
    }

    .draggable-course.dragging {
        opacity: 0.5;
    }

    .draggable-course[data-cat="ge"] {
        border-left: 4px solid var(--gray-400);
    }

    .draggable-course[data-cat="elective"] {
        border-left: 4px solid #D97706;
    }

    .draggable-course[data-cat="free"] {
        border-left: 4px solid #DB2777;
    }

    .draggable-course.custom-course {
        border-left: 4px solid var(--success);
    }

    .course-title-drag {
        font-weight: 600;
        font-family: 'Prompt', sans-serif;
        color: var(--navy-800);
        word-break: break-word;
        line-height: 1.3;
    }

    .course-cred-drag {
        font-size: 12px;
        color: var(--text-muted);
    }

    .course-del-btn {
        position: absolute;
        top: 4px;
        right: 4px;
        font-size: 10px;
        color: var(--danger);
        background: transparent;
        border: none;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.2s;
    }

    .draggable-course:hover .course-del-btn {
        opacity: 1;
    }

    .plan-term-dropzone {
        min-height: 60px;
        padding: 12px;
        transition: background 0.2s;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .plan-term-dropzone.drag-over {
        background: var(--primary-light);
        outline: 2px dashed var(--kmitl-orange);
        outline-offset: -2px;
        border-radius: 6px;
    }

    .btn-add-course {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 8px;
        margin-top: 8px;
        background: transparent;
        border: 1px dashed var(--gray-300);
        border-radius: 6px;
        color: var(--gray-500);
        cursor: pointer;
        font-family: 'Prompt', sans-serif;
        font-size: 13px;
        font-weight: 500;
        transition: all 0.2s;
    }

    .btn-add-course:hover {
        background: var(--gray-50);
        color: var(--kmitl-orange);
        border-color: var(--kmitl-orange);
    }

    /* Modal for Add Custom Course */
    .add-course-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(15, 23, 42, 0.6);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        padding: 20px;
        backdrop-filter: blur(4px);
    }

    .add-course-modal-overlay.show {
        display: flex;
    }

    .add-course-modal {
        background: #fff;
        border-radius: var(--radius);
        width: 100%;
        max-width: 400px;
        box-shadow: var(--shadow-md);
        display: flex;
        flex-direction: column;
        padding: 24px;
    }