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

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        padding: 20px;
    }

    .container {
        max-width: 1500px;
        margin: 0 auto;
        background: white;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.3);
        padding: 30px;
    }

    h1 { text-align:center; color:#333; margin-bottom:24px; font-size:26px; }

    .controls {
        display: flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; align-items:center;
    }
    input, select, button {
        padding:10px 15px; border:1px solid #ddd; border-radius:6px;
        font-size:14px; font-family:inherit;
    }
    select, input { min-width:150px; }
    button {
        background:#667eea; color:#fff; border:none; cursor:pointer;
        font-weight:600; transition:background .3s;
    }
    button:hover { background:#5568d3; }

    /* ─── Timetable wrapper ─── */
    .timetable-wrapper {
        overflow-x: auto; margin-bottom:24px;
        border-radius:8px; border:2px solid #ddd;
    }
    #printTimetable { background:#fff; padding:3px; border-radius:8px; }

    /* ─── Table ─── */
    table { border-collapse:collapse; background:#fff; width:100%; }
    th, td {
        border:2px solid #ddd; padding:10px 8px; text-align:center;
        font-weight:500; vertical-align:middle; position:relative;
    }
    th {
        background:#667eea; color:#fff; min-width:100px;
        user-select:none; white-space:nowrap;
    }
    td { background:#f9f9f9; min-height:64px; vertical-align:top; }

    /* ─── Resize handles ─── */
    .col-resize-handle {
        position:absolute; top:0; right:0; width:7px; height:100%;
        cursor:col-resize; z-index:10; background:transparent;
        transition: background .15s;
    }
    .col-resize-handle:hover { background:rgba(255,255,255,.5); border-radius:0 3px 3px 0; }

    .row-resize-handle {
        position:absolute; bottom:0; left:0; width:100%; height:7px;
        cursor:row-resize; z-index:10; background:transparent;
        transition: background .15s;
    }
    .row-resize-handle:hover { background:rgba(102,126,234,.25); border-radius:0 0 3px 3px; }

    /* ─── Day / Time label cells ─── */
    .time-slot, .day-slot {
        background:#ecf0f1; font-weight:600; color:#333;
        cursor:pointer; text-decoration:underline;
    }
    .time-slot:hover, .day-slot:hover { background:#d5dbdb; }

    /* ─── Subject in cell ─── */
    .class-cell { padding:4px; background:#fff; }
    .subject {
        background:#3498db; color:#fff; padding:7px 6px; margin:3px;
        border-radius:6px; cursor:move; user-select:none;
        font-size:13px; font-weight:600; transition:all .2s;
        display:block; position:relative; word-break:break-word; text-align:center;
    }
    .subject:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.2); }
    .subject-actions {
        position:absolute; top:2px; right:2px; display:flex; gap:3px;
    }
    .edit-btn, .delete-btn {
        background:rgba(255,255,255,.9); color:#333; border:none;
        padding:2px 5px; cursor:pointer; font-size:10px; border-radius:3px; font-weight:600;
    }
    .edit-btn:hover { background:#3498db; color:#fff; }
    .delete-btn:hover { background:#e74c3c; color:#fff; }

    /* ─── Subject panel ─── */
    .subjects-panel {
        margin-top:24px; padding:20px; background:#f5f5f5; border-radius:8px;
    }
    .subjects-panel h3 { margin-bottom:12px; color:#333; }
    .available-subjects { display:flex; gap:10px; flex-wrap:wrap; }
    .subject-tag {
        padding:8px 12px; border-radius:20px; color:#fff;
        font-size:12px; font-weight:600; cursor:move; user-select:none;
        display:inline-flex; align-items:center; gap:7px; position:relative;
    }
    .subject-tag .count-badge {
        background:rgba(0,0,0,.3); border-radius:50%;
        min-width:19px; height:19px; display:inline-flex;
        align-items:center; justify-content:center;
        font-size:11px; font-weight:700; line-height:1;
        transition: background .2s, transform .2s;
    }
    .subject-tag .count-badge.has-count { background:rgba(255,255,255,.35); transform:scale(1.1); }

    .subject-tag.physics      { background:#e74c3c; }
    .subject-tag.chemistry    { background:#f39c12; }
    .subject-tag.maths         { background:#27ae60; }
    .subject-tag.english       { background:#8e44ad; }
    .subject-tag.biology       { background:#16a085; }
    .subject-tag.history       { background:#c0392b; }
    .subject-tag.geography     { background:#2980b9; }
    .subject-tag.pe            { background:#e67e22; }

    /* ─── Col / Row action buttons ─── */
    .col-actions {
        position:absolute; top:3px; right:18px; display:none; gap:3px;
    }
    th:hover .col-actions { display:flex; }
    .col-btn {
        background:#27ae60; color:#fff; border:none; padding:3px 6px;
        border-radius:3px; cursor:pointer; font-size:10px; font-weight:600;
    }
    .col-btn.delete { background:#e74c3c; }
    .row-btn {
        background:#27ae60; color:#fff; border:none; padding:5px 10px;
        border-radius:4px; cursor:pointer; font-size:11px; font-weight:600; margin:2px;
    }
    .row-btn.delete { background:#e74c3c; }

    .editable-header { cursor:pointer; padding:4px 8px; border-radius:3px; }
    .editable-header:hover { background:rgba(255,255,255,.2); }

    /* ─── Merge highlight ─── */
    .merge-mode { outline:3px dashed #27ae60 !important; }
    .merge-selected { background:#d4edda !important; outline:2px solid #27ae60 !important; }

    /* ─── Merge toolbar (fixed top) ─── */
    #mergeToolbar {
        display:none; position:fixed; top:16px; left:50%; transform:translateX(-50%);
        background:#fff; border-radius:10px; box-shadow:0 4px 24px rgba(0,0,0,.22);
        padding:10px 20px; z-index:900; gap:12px; align-items:center;
    }
    #mergeToolbar.show { display:flex; }
    #mergeToolbar span { font-size:13px; font-weight:600; color:#333; }
    #mergeToolbar button { font-size:12px; padding:6px 14px; }
    #mergeToolbar .cancel-merge { background:#95a5a6; }

    /* ─── Bottom controls ─── */
    .bottom-controls {
        display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:24px;
    }
    .bottom-controls button { background:#27ae60; }
    .bottom-controls button.reset { background:#e74c3c; }
    .bottom-controls button.merge-btn { background:#667eea; }

    /* ─── Modals ─── */
    .modal {
        display:none; position:fixed; z-index:1000; left:0; top:0;
        width:100%; height:100%; background:rgba(0,0,0,.5);
    }
    .modal-content {
        background:#fefefe; margin:10% auto; padding:30px; border:1px solid #888;
        border-radius:8px; width:90%; max-width:400px; box-shadow:0 4px 20px rgba(0,0,0,.3);
    }
    .modal h2 { margin-bottom:20px; color:#333; }
    .modal input {
        width:100%; padding:10px; margin-bottom:15px; border:1px solid #ddd;
        border-radius:6px; font-size:14px;
    }
    .modal-buttons { display:flex; gap:10px; justify-content:flex-end; }
    .modal button { padding:10px 20px; border:none; border-radius:6px; cursor:pointer; font-weight:600; }
    .modal .save-btn { background:#27ae60; color:#fff; }
    .modal .cancel-btn { background:#95a5a6; color:#fff; }

    /* ─── PDF export clean ─── */
    .export-clean th {
        background:#fff !important;
        color:#333 !important;
        border:1.8px solid #444 !important;
        font-weight:700 !important;
        font-size:13px;
    }
    .export-clean td {
        background:#fff !important;
        border:1.8px solid #444 !important;
    }
    .export-clean .time-slot,
    .export-clean .day-slot {
        background:#fff !important;
        font-weight:700 !important;
        color:#333 !important;
        border:1.8px solid #444 !important;
        text-decoration:none !important;
    }
    .export-clean .subject {
        background:transparent !important;
        border:none !important;
        box-shadow:none !important;
        color:#000 !important;
        font-weight:600 !important;
    }
    .export-clean .col-actions,
    .export-clean .row-btn,
    .export-clean .subject-actions,
    .export-clean .col-resize-handle,
    .export-clean .row-resize-handle,
    .export-clean .unmerge-btn { display:none !important; }

    /* ─── Watermark ─── */
    .watermark { text-align:center; margin-top:18px; }
    .watermark a { color:#667eea; font-size:12px; text-decoration:none; }
    .watermark a:hover { text-decoration:underline; }

    /* ─── Media ─── */
    @media (max-width:768px) {
        .container { padding:15px; }
        th, td { padding:8px; font-size:11px; }
        h1 { font-size:20px; }
    }
    @media print {
        body { background:#fff; }
        .controls,.subjects-panel,.subject-actions,.bottom-controls,.col-actions,.row-btn,#mergeToolbar { display:none !important; }
        .container { box-shadow:none; }
    }