/* ===== inline ===== */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%;font-size:100%;}
body{font-size:1rem;}

    /* --- GLOBAL VARIABLES --- */
    :root {
      --c1: #3706AF;
      --c2: #AF0B8B;
      --c3: #00DAD0;
      --c4: #DA7D00;
      --c5: #B2DA00;
      --c6: #FFCF8F;
      --c7: #8A6534;

      --primary:      #3706AF;
      --primary-mid:  #AF0B8B;
      --primary-dark: #2a0490;
      --accent:       #DA7D00;
      --accent2:      #00DAD0;

      /* پاشخانی ڕووناک — گرادیەنتی نیشتمانی */
      --bg-body: linear-gradient(145deg,
        rgba(55,6,175,0.07) 0%,
        rgba(175,11,139,0.05) 35%,
        rgba(0,218,208,0.05) 65%,
        rgba(178,218,0,0.06) 100%),
        #f8f7ff;

      --bg-panel: rgba(255,255,255,0.90);
      --card:     rgba(255,255,255,0.85);
      --card-strong: rgba(255,255,255,0.98);

      --text-main: #12001f;
      --text-sec:  #4a3060;
      --muted:     var(--text-sec);

      --border:   rgba(55,6,175,0.13);
      --input-bg: rgba(255,255,255,0.98);

      --shadow:        0 2px 12px rgba(55,6,175,0.09), 0 1px 3px rgba(0,0,0,0.05);
      --shadow-strong: 0 6px 28px rgba(175,11,139,0.13), 0 2px 8px rgba(0,0,0,0.07);
      --shadow-card:   0 4px 20px rgba(55,6,175,0.10);

      --table-head:      #3706AF;
      --table-head-text: #ffffff;
      --table-row-even:  rgba(55,6,175,0.04);

      --highlight-row:    rgba(218,125,0,0.14);
      --highlight-border: #DA7D00;

      --radius:    20px;
      --radius-sm: 14px;
      --glass-blur: 24px;

      --app-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      --app-font-size: 1rem;
      --print-font-size: 0.6875rem;
      --print-row-pad: 4px;
      --print-margin-top: 14mm;
      --print-margin-bottom: 16mm;
      --print-margin-side: 14mm;

      /* V95 — silver section surfaces (light mode) */
      --section-surface: linear-gradient(180deg, rgba(244,246,248,0.98) 0%, rgba(228,232,237,0.98) 100%);
      --section-surface-border: rgba(128,138,150,0.28);
      --section-surface-text: #181818;
      --section-surface-shadow: 0 10px 24px rgba(148, 163, 184, 0.20);
    }

    body.dark-mode {
      --primary:      #00DAD0;
      --primary-mid:  #AF0B8B;
      --primary-dark: #009e98;
      --accent:       #FFCF8F;
      --accent2:      #B2DA00;

      /* پاشخانی تاریک — ئاسمانی شەو */
      --bg-body: linear-gradient(145deg,
        #000000 0%,
        #050505 40%,
        #080808 75%,
        #000000 100%);

      --bg-panel: rgba(10,10,10,0.92);
      --card:     rgba(14,14,14,0.88);
      --card-strong: rgba(18,18,18,0.98);

      --text-main: #e8e0ff !important;
      --text-sec:  #a090c0;

      --border:   rgba(0,218,208,0.15);
      --input-bg: rgba(15,15,15,0.90);

      --shadow:        0 2px 12px rgba(0,0,0,0.50);
      --shadow-strong: 0 8px 32px rgba(0,0,0,0.65);
      --shadow-card:   0 4px 24px rgba(0,0,0,0.55);

      --table-head:      rgba(0,218,208,0.55);
      --table-head-text: #ffffff;
      --table-row-even:  rgba(0,218,208,0.04);

      --highlight-row:    rgba(255,207,143,0.12);
      --highlight-border: #FFCF8F;

      /* V95 — silver section surfaces (dark mode) */
      --section-surface: linear-gradient(180deg, rgba(66,70,76,0.98) 0%, rgba(39,42,46,0.98) 100%);
      --section-surface-border: rgba(183,191,201,0.18);
      --section-surface-text: #ffffff;
      --section-surface-shadow: 0 10px 24px rgba(0, 0, 0, 0.38);
    }

    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: none; }
    html { font-size: var(--app-font-size); height: 100%; scroll-behavior: smooth; }
    body {
      font-family: var(--app-font) !important;
      background: var(--bg-body); margin: 0; padding: 10px; color: var(--text-main);
      padding-bottom: 90px; transition: background 0.4s ease, color 0.3s ease;
      overscroll-behavior-y: none; font-size: 1rem; min-height: 100vh;
    }
    input, button, select, textarea, table { font-family: var(--app-font) !important; font-size: inherit; }
    .container { max-width: 1000px; margin: 0 auto; }
    
    /* --- SMART INSTALL BANNER --- */
    #install-banner {
        display: none; position: fixed; bottom: 0; left: 0; width: 100%;
        background: var(--bg-panel); color: var(--text-main); box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
        padding: 20px; z-index: 11000; flex-direction: column; align-items: center; text-align: center;
        border-top: 5px solid var(--primary);
        border-top-left-radius: 20px; border-top-right-radius: 20px;
        animation: slideUp 0.6s ease-out;
    }
    #install-banner h3 { margin: 0 0 5px; color: var(--primary); font-size: 1.2rem; }
    #install-banner p { margin: 0 0 15px; font-size: 0.95em; color: var(--text-sec); }
    #install-btn-action {
        background: linear-gradient(45deg, var(--primary), #3f37c9); color: #fff; border: none; padding: 12px 35px;
        border-radius: 25px; font-weight: 900; cursor: pointer; font-size: 1em;
        box-shadow: 0 4px 10px rgba(67, 97, 238, 0.4); transition: transform 0.2s; margin-bottom: 10px;
    }
    #install-btn-action:active { transform: scale(0.95); }
    #close-install-btn {
        background: transparent; border: none; color: var(--text-sec); font-size: 0.9em; text-decoration: underline; cursor: pointer;
    }
    @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

    /* Manual Install Instructions Modal */
    #manual-install-modal {
        display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.85); z-index: 12000; align-items: center; justify-content: center; backdrop-filter: blur(5px);
    }
    .install-box {
        background: var(--bg-panel); color: var(--text-main); padding: 25px; border-radius: 20px;
        max-width: 320px; text-align: center; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.3); border: 1px solid var(--border);
    }
    .install-icon { font-size: 1.5em; margin: 0 5px; vertical-align: middle; }

    /* --- HEADER --- */
    .app-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; padding: 10px 15px; background: var(--card); border-bottom: 2px solid transparent; background-clip: padding-box; position: relative;
      backdrop-filter: blur(var(--glass-blur));
      -webkit-backdrop-filter: blur(var(--glass-blur));
border-radius: var(--radius); box-shadow: var(--shadow-strong); border: 1px solid var(--border);

      transform: translateZ(0);
}
    .header-left { display: flex; flex-direction: column; }
    .app-title { font-weight: 900; margin: 0; font-size: clamp(1.1rem, 3.2vw, 1.5rem); background: linear-gradient(90deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .title-row{display:flex;align-items:center;gap:12px;min-width:0}
        .app-logo{width:52px;height:52px;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.22);border:1px solid var(--border);flex:0 0 auto}
        .title-stack{display:flex;flex-direction:column;line-height:1.05;min-width:0}
        .app-subtitle{font-size:.85rem;color:var(--muted);margin-top:4px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width: 58vw}
    .status-badge { font-size: 0.75em; padding: 2px 8px; border-radius: 4px; font-weight: bold; display: inline-block; margin-top: 2px; }
    .status-free { background: #6c757d; color: #fff; }
    .status-pro { background: linear-gradient(45deg, #f72585, #4361ee); color: #fff; box-shadow: 0 2px 5px rgba(247, 37, 133, 0.4); }
    .digital-clock { text-align: left; display: flex; flex-direction: column; align-items: flex-end; min-width: 120px; }
    .clock-time { font-size: 1.1em; font-weight: 800; color: var(--text-main); line-height: 1; }
    .clock-date { font-size: 0.75em; color: var(--text-sec); font-weight: 600; margin-top: 3px; }

    /* --- CONTROLS --- */
    .control-panel { background: var(--card); border-right: 3px solid #3706AF;
      backdrop-filter: blur(var(--glass-blur));
      -webkit-backdrop-filter: blur(var(--glass-blur));
padding: 20px; border-radius: var(--radius-sm); box-shadow: var(--shadow-strong); margin-bottom: 20px; border: 1px solid var(--border);

      transform: translateZ(0);
}
    .selectors { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
    select { flex: 1; min-width: 100%; padding: 13px 14px; font-size: 1rem; border: 1.5px solid var(--border); border-radius: 14px; font-weight: 700; background: rgba(10,8,30,0.82); color: #fff; transition: border-color 0.15s, box-shadow 0.15s; appearance: auto; } select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--shadow-card,rgba(55,6,175,0.14)); } select option { background: #0f0a24; color: #fff; }

    /* Class filter (🔎) next to class select — keep UI clean on mobile */
    .class-row{ display:flex; gap:10px; align-items:stretch; width:100%; }
    .class-row select{ flex:1; min-width:0; }
    .mini-filter-btn{
      width:54px; min-width:54px;
      padding:0;
      border-radius:12px;
      border:2px solid var(--border);
      background: var(--input-bg);
      color: var(--text-main);
      font-size:20px;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      box-shadow: 0 6px 14px rgba(0,0,0,.12);
      user-select:none;
      -webkit-tap-highlight-color: transparent;
    }
    .mini-filter-btn:active{ transform: translateY(1px); }
    .class-filters{ width:100%; display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
    .class-filters select{ min-width:0; flex:1; }
    .exam-panel { background: rgba(67, 97, 238, 0.1); padding: 15px; border-radius: 12px; margin-bottom: 20px; display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
    .exam-input-main { width: 80px; padding: 10px; border-radius: 8px; border: 2px solid var(--bg-panel); text-align: center; font-weight: 800; font-size: 1.2rem; background: var(--input-bg); color: var(--text-main); }
    .season-toggle { display: flex; background: var(--border); border-radius: 12px; padding: 5px; margin-bottom: 20px; }
    .season-btn { flex: 1; padding: 11px; border: none; border-radius: 10px; cursor: pointer; font-weight: 800; color: var(--text-sec); background: transparent; transition: all 0.18s ease; }
    .season-btn.active { background: linear-gradient(135deg,var(--primary),var(--primary-mid,var(--primary))); color: #fff; box-shadow: 0 4px 14px var(--shadow-card,rgba(55,6,175,0.30)); }
    .input-group { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
    .date-input { flex: 1; padding: 12px; border: 2px solid var(--border); border-radius: 12px; text-align: center; min-width: 45%; font-weight: 600; background: var(--input-bg); color: var(--text-main); }
    #activityNoteSelect { flex: 1; padding: 12px 15px; border: 2px solid var(--primary); border-radius: 12px; text-align: center; min-width: 45%; font-weight: 700; background: rgba(10,8,30,0.82); color: #fff; cursor: pointer; } #activityNoteSelect option { background: #0f0a24; color: #fff; }
    .big-buttons-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    @media (max-width: 430px){ .big-buttons-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
    @media (max-width: 320px){ .big-buttons-grid{ grid-template-columns: 1fr; } }
    .eval-btn { padding: 12px 8px; font-weight: 800; color: #fff; border: none; border-radius: 16px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.15); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 74px; max-height: 96px; overflow: hidden; text-align: center; transition: transform 0.13s ease, box-shadow 0.13s ease; }
    .eval-btn .btn-label { font-size: clamp(14px, 1.05rem, 18px); line-height: 1.12; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
    .eval-btn .btn-score { font-size: clamp(12px, 0.95rem, 16px); font-weight: 700; opacity: 0.92; }
    .eval-btn:active { transform: scale(0.93); box-shadow: 0 1px 4px rgba(0,0,0,0.10); }
    .eval-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.20); }
    .btn-blue   { background: linear-gradient(135deg,var(--primary),var(--primary-mid,var(--primary))); }
    .btn-green  { background: linear-gradient(135deg,#00DAD0,#009e98); color:#0a1a1a; }
    .btn-yellow { background: linear-gradient(135deg,#B2DA00,#8aaa00); color:#1a1f00; }
    .btn-red    { background: linear-gradient(135deg,#AF0B8B,#7a0662); }
    .btn-orange { background: linear-gradient(135deg,#DA7D00,#a85f00); }
    .btn-gray   { background: linear-gradient(135deg,#8A6534,#5c4220); }

    /* --- TABLES & MODALS --- */
    .toggle-btn { width: 100%; padding: 15px 18px; background: linear-gradient(100deg, var(--primary) 0%, var(--primary-mid,var(--primary)) 60%, rgba(0,0,0,0) 100%), var(--primary); color: #fff; border: none; border-radius: 14px; font-size: 1.05em; cursor: pointer; margin-top: 15px; font-weight: 800; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 18px var(--shadow-card,rgba(55,6,175,0.22)); transition: opacity 0.15s, transform 0.13s; } .toggle-btn:hover { opacity: 0.90; } .toggle-btn:active { transform: scale(0.985); }
    .toggle-btn:active { transform: scale(0.98); }
    .collapsible-content { display: none; background: var(--card);
      backdrop-filter: blur(var(--glass-blur));
      -webkit-backdrop-filter: blur(var(--glass-blur));
padding: 15px; border-radius: var(--radius-sm); margin-top: 10px; box-shadow: var(--shadow-strong); border: 1px solid var(--border);

      background: var(--card); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
}
    
    .class-container { 
        border: 1px solid var(--border);
border-radius: 10px; padding: 0; margin-bottom: 25px; 
        background: var(--card);
      backdrop-filter: blur(var(--glass-blur));
      -webkit-backdrop-filter: blur(var(--glass-blur));
overflow: hidden;
        scroll-margin-top: 20px; 
        transition: all 0.5s ease;
    
      background: var(--card); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
}
    .highlight-active {
        border: 2px solid #ffd700 !important;
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6) !important;
        animation: flashHighlight 1.5s ease-in-out;
    }
    @keyframes flashHighlight {
        0% { background-color: rgba(255, 215, 0, 0.3); }
        50% { background-color: rgba(255, 215, 0, 0.1); }
        100% { background-color: var(--bg-panel); }
    }

    .class-header-row { display: flex; justify-content: space-between; align-items: center; background: rgba(67, 97, 238, 0.1); padding: 12px 15px; border-bottom: 2px solid var(--primary); }
    .class-title { margin: 0; color: var(--text-main); font-weight: 900; font-size: 1.1em; }
    .table-responsive { width: 100%; overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; font-size: 0.95em; min-width: 600px; } 
    thead tr { background: var(--table-head); color: var(--table-head-text); }
    th { padding: 12px 10px; font-weight: 800; border: none; border-bottom: 2px solid rgba(255,255,255,0.18); white-space: nowrap; letter-spacing: 0.01em; }
    td { padding: 8px; border: 1px solid var(--border); text-align: center; color: var(--text-main); }
    td.name-cell { text-align: right; min-width: 160px; font-weight: 600; }
    tbody tr:nth-child(even) { background: var(--table-row-even); }
    tbody tr:hover { background: rgba(246, 196, 83, 0.10); }

    
    tr.selected-student-row td {
        background-color: var(--highlight-row) !important;
        box-shadow: inset 0 0 0 9999px rgba(246,196,83,0.08);
        border-top: 2px solid var(--highlight-border) !important;
        border-bottom: 2px solid var(--highlight-border) !important;
        font-weight: 900 !important;
    }

    .table-input { width: 55px; padding: 8px; text-align: center; border: 1px solid var(--border); border-radius: 6px; font-weight: bold; background: var(--input-bg); color: var(--text-main); }
    .name-input { width: 100%; padding: 5px; border: 1px solid transparent; background: transparent; text-align: right; font-weight: bold; color: var(--text-main); }
    #notify { position: fixed; top: 22px; left: 50%; transform: translateX(-50%) translateY(-4px); background: linear-gradient(100deg,#3706AF,#AF0B8B); color: #fff; padding: 11px 28px; border-radius: 50px; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; z-index: 3000; font-weight: 800; box-shadow: 0 8px 28px rgba(55,6,175,0.40); letter-spacing: 0.01em; }
    .modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); align-items: center; justify-content: center; }
    .modal-content { background: var(--card);
      backdrop-filter: blur(var(--glass-blur));
      -webkit-backdrop-filter: blur(var(--glass-blur));
padding: 25px; border-radius: 20px; width: 95%; max-width: 600px; max-height: 85vh; overflow-y: auto; position: relative; color: var(--text-main); 
      background: var(--card-strong); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
}
    .close-btn { position: absolute; left: 20px; top: 15px; font-size: 1.875rem; cursor: pointer; color: #d32f2f; font-weight: bold; }
    .settings-input { padding: 12px 14px; margin: 8px 0; border: 1.5px solid var(--border); border-radius: 12px; width: 100%; display: block; background: var(--input-bg); color: var(--text-main); transition: border-color 0.15s, box-shadow 0.15s; } .settings-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--shadow-card,rgba(55,6,175,0.14)); }
    .backup-btn, .restore-btn, .settings-save-btn { color: #fff; padding: 12px 16px; border: none; border-radius: 12px; cursor: pointer; margin: 5px 0; font-weight: 800; width: 100%; font-size: 1em; transition: opacity 0.15s, transform 0.13s; } .backup-btn:hover, .restore-btn:hover, .settings-save-btn:hover { opacity: 0.88; } .backup-btn:active, .restore-btn:active, .settings-save-btn:active { transform: scale(0.97); }
    .backup-btn     { background: linear-gradient(135deg,var(--primary),var(--primary-mid,var(--primary))); }
    .restore-btn    { background: linear-gradient(135deg,var(--accent,#DA7D00),var(--accent2,#8A6534)); }
    .settings-save-btn { background: linear-gradient(135deg,var(--primary),var(--primary-mid,var(--primary))); }
    .export-btn-group button { padding: 6px 12px; font-size: 0.85em; border-radius: 6px; border: none; color: white; cursor: pointer; font-weight: bold; margin-left: 5px; }
    .note-manager-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: rgba(0,0,0,0.05); padding: 8px 12px; margin-bottom: 5px; border-radius: 6px; font-weight: bold; }
    .note-manager-item span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .note-delete-btn { background: #d32f2f; color: #fff; border: none; border-radius: 4px; padding: 4px 8px; cursor: pointer; font-size: 0.8em; }
    /* Notes add row: stays inside bounds even with large font */
    /* Notes add row: keep + button always inside the card even on max font size */
    .note-add-row{ display:flex; gap:8px; margin-bottom:10px; flex-wrap:nowrap; align-items:stretch; width:100%; max-width:100%; }
    .note-add-input{ flex: 1 1 auto; min-width: 0; padding:12px; border-radius:10px; border:1px solid var(--border); background:var(--input-bg); color:var(--text-main); }
    .note-add-btn{
      flex: 0 0 48px;
      width:48px; min-width:48px; max-width:48px;
      height:48px;
      display:flex; align-items:center; justify-content:center;
      background:var(--primary); color:#fff;
      border:none; border-radius:10px;
      font-weight:1000; font-size:1.35em; line-height:1;
      overflow:hidden;
    }
    .note-add-btn:active{ transform: scale(0.98); }

    /* Security & Expired Screens */
    #security-screen, #expired-screen { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(20, 20, 30, 0.98); z-index: 10000; flex-direction: column; align-items: center; justify-content: center; backdrop-filter: blur(10px); color: #fff; }
    .pin-display { display: flex; gap: 15px; margin-bottom: 40px; }
    .pin-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; background: transparent; transition: 0.2s; }
    .pin-dot.filled { background: var(--primary); border-color: var(--primary); }
    .pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .pin-btn { width: 70px; height: 70px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: #fff; font-size: 1.5rem; font-weight: bold; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
    .pin-btn:active { background: rgba(255,255,255,0.3); transform: scale(0.95); }
    .pin-btn.clear { font-size: 1rem; background: rgba(211, 47, 47, 0.4); border-color: #d32f2f; }
    @keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-10px); } 50% { transform: translateX(10px); } 75% { transform: translateX(-10px); } 100% { transform: translateX(0); } }

    #export-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; z-index: 9999; padding: 0; overflow-y: auto; }
    .print-controls { background: #eee; padding: 10px; border-radius: 10px; margin: 10px auto; max-width: 21cm; display: flex; gap: 15px; justify-content: center; align-items: center; flex-wrap: wrap; border: 1px solid #ccc; }
    .print-control-item { display: flex; flex-direction: column; align-items: center; font-size: 0.85em; font-weight: bold; color: #333; }
    .print-control-item input { margin-top: 5px; cursor: pointer; }
    .export-content { background: #fff !important; width: 21cm; min-height: 29.7cm; margin: 0 auto; padding-top: var(--print-margin-top) !important; padding-bottom: var(--print-margin-bottom) !important; padding-left: var(--print-margin-side) !important; padding-right: var(--print-margin-side) !important; box-sizing: border-box; direction: rtl; color: #000000 !important; box-shadow: 0 0 15px rgba(0,0,0,0.1); }
    .formal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 4px double #000000; padding-bottom: 10px; margin-bottom: 15px; color: #000000 !important; font-family: inherit; }
    .header-side { width: 30%; text-align: right; font-weight: bold; line-height: 1.6; font-size: var(--print-font-size) !important; }
    .header-left-side { text-align: left; }
    .header-center { width: 40%; text-align: center; display: flex; flex-direction: column; align-items: center; }
    .header-logo-img { height: calc(var(--print-font-size) * 6) !important; margin-bottom: 5px; max-height: 100px; width: auto; }
    .header-main-title { font-weight: 900; text-decoration: underline; margin-top: 5px; font-size: calc(var(--print-font-size) * 1.5) !important; }
    .header-line span { font-weight: normal; }
    .export-content * { color: #000000 !important; }
    .export-content table { width: 100%; border-collapse: collapse; border: 3px solid #000000 !important; font-size: var(--print-font-size) !important; margin-top: 10px; font-family: inherit; }
    .export-content th, .export-content td { border: 1px solid #000000 !important; padding: var(--print-row-pad) 2px !important; line-height: 1.1; height: auto; background: #fff !important; }
    .export-content th { background: #e0e0e0 !important; font-weight: 900 !important; text-align: center; border-bottom: 2px solid #000 !important; }
    .export-content td { text-align: center; font-weight: 600 !important; }
    
    @media print {
        @page { size: A4; margin: 0; } 
        body, html { background-color: #ffffff !important; margin: 0; padding: 0; width: 100%; height: 100%; overflow: visible; }
        .container, .app-header, #notify, #security-screen, #expired-screen, #install-banner, #manual-install-modal { display: none !important; }
        #export-overlay { display: block !important; position: relative !important; width: 100%; height: auto; overflow: visible; background: #fff !important; padding: 0 !important; margin: 0 !important; }
        .close-preview-btn, .print-controls { display: none !important; }
        .export-content { width: 100% !important; margin: 0; border: none; box-shadow: none; padding-top: var(--print-margin-top) !important; padding-bottom: var(--print-margin-bottom) !important; padding-left: var(--print-margin-side) !important; padding-right: var(--print-margin-side) !important; box-sizing:border-box !important; }
        table { width: 100% !important; max-width: 100% !important; table-layout: fixed !important; border-collapse: collapse !important; }
        th, td { white-space: normal !important; overflow-wrap: break-word !important; word-break: break-word !important; text-align: center !important; vertical-align: middle !important; font-size: var(--print-font-size) !important; padding: var(--print-row-pad) 2px !important; line-height: 1.15 !important; }
        td, th { overflow-wrap: break-word; word-break: break-word; }
        thead { display: table-header-group; }
        tr { page-break-inside: avoid; break-inside: avoid; }
        .formal-header { page-break-inside: avoid; }
        
        tr.selected-student-row td {
            background-color: transparent !important;
            border-top: 1px solid #000 !important;
            border-bottom: 1px solid #000 !important;
            font-weight: 600 !important;
        }
    }
    @media (min-width: 600px) { .selectors { flex-direction: row; } select { min-width: auto; } }
  

/* --- Project Tabs (Screen 2) --- */
.pro-tabs{ background: transparent; }
.pro-tabbar{
  display:flex; gap:8px; flex-wrap:wrap;
  position: sticky; top: 0;
  padding: 8px 0 12px;
  background: var(--bg-panel);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--border);
  z-index: 5;
}
.pro-tabbtn{
  border:none; cursor:pointer;
  padding:10px 12px;
  border-radius: 12px;
  background: rgba(59,130,246,0.10);
  color: var(--text-main);
  font-weight: 900;
  font-size: .95em;
  transition: transform .12s ease, background .12s ease;
}
.pro-tabbtn:active{ transform: scale(0.98); }
.pro-tabbtn.active{ background: linear-gradient(135deg,var(--primary),var(--primary-mid,var(--primary))) !important; color:#fff !important; box-shadow: 0 3px 14px var(--shadow-card,rgba(55,6,175,0.28)); }
.pro-tabpanel{ display:none; padding-top: 14px; }
.pro-tabpanel.active{ display:block; }
.pro-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow-card);
}
.pro-title{ margin:0 0 10px; font-weight: 1000; color: var(--text-main); }
.pro-hint{ font-size: .88em; color: var(--text-sec); }
.pro-footnote{ font-size: .85em; color: var(--text-sec); margin: 10px 0 0; }
.pro-upload{
  cursor:pointer; display:inline-block;
  background: rgba(67, 97, 238, 0.10);
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--primary);
  font-weight: 900;
  margin-top: 10px;
  color: var(--text-main);
}
.pro-whatsapp{
  text-decoration:none;
  background:#25D366;
  color:white;
  padding:10px 16px;
  border-radius:12px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:100%;
  justify-content:center;
}


.buy-grid{ display:grid; gap:10px; margin-top:10px; }
.buy-row{ display:flex; gap:10px; flex-wrap:wrap; }
.buy-row input{ flex:1; min-width:160px; }
.buy-device{
  background: rgba(67,97,238,0.06);
  border: 1px dashed var(--border);
  padding: 10px 12px;
  border-radius: 12px;
  text-align:center;
  font-weight:900;
  overflow:hidden;
}
.buy-device code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .95em;
  direction:ltr;
  unicode-bidi: plaintext;
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.buy-note{ width:100%; min-height:90px; resize:vertical; }
.buy-privacy{ font-size:.85em; color: var(--text-sec); margin:6px 0 0; }

/* --- Pro Tab UX polish --- */
.pro-tabbtn{ display:flex; align-items:center; gap:8px; }
.pro-ic{ font-size:1.1em; line-height:1; }
.pro-txt{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.pro-tabbar{ scroll-behavior:smooth; }
.pro-tabbtn:focus{ outline: 2px solid var(--primary, rgba(67,97,238,0.35)); outline-offset: 2px; }
.pro-tabbtn:focus:not(:focus-visible){ outline: none; }

@keyframes proFadeUp {
  from { opacity:0; transform: translateY(8px); }
  to   { opacity:1; transform: translateY(0); }
}
.pro-tabpanel.active{ animation: proFadeUp .18s ease; }

/* Mobile: Bottom Tab Bar */
@media (max-width: 768px){
  .pro-tabbar{
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-bottom: none;
    border-top: 1px solid var(--border);
    box-shadow: 0 -14px 30px rgba(2,6,23,0.18);
  }
  .pro-tabbtn{
    flex: 1 0 auto;
    min-width: clamp(64px, 18vw, 92px);
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    padding: 10px 8px;
    border-radius: 14px;
  }
  .pro-txt{ font-size: clamp(.68em, 2.6vw, .78em); line-height:1.05; }
  #settingsPanel .pro-tabs{ padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
}

/* === SMART UI (no overflow) === */
:root{
  /* Use rem-based clamps so Android/iOS accessibility font scaling still works */
  --fs-base: clamp(0.95rem, 3.6vw, 1.125rem);
  --fs-title: clamp(1.05rem, 4.6vw, 1.35rem);
  --fs-big: clamp(1.15rem, 5.2vw, 1.6rem);
}
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body{ font-size: var(--fs-base); }

/* --- CRITICAL: Keep owner tabs clickable & visible (no clipping) --- */
/* Some global "no overflow" rules can clip fixed tab bars on certain Android browsers.
   These overrides ensure the Project Tabs always stay interactive and never get cut off. */
.pro-tabs{ max-width:100%; overflow:visible !important; }
.pro-tabbar{
  max-width:100%;
  overflow-x:auto !important;
  overflow-y:visible !important;
  -webkit-overflow-scrolling: touch;
  pointer-events:auto;
}
.pro-tabbtn{ pointer-events:auto; touch-action: manipulation; }
@media (max-width: 768px){
  .pro-tabbar{ z-index: 9999; }
  #settingsPanel{ overflow: visible !important; }
}
/* Allow flex items to shrink properly */
.buy-row, .tabbar, .tabbar-top, .tabs, .card, .panel, .row, .grid{
  max-width:100%;
  overflow:hidden;
}
.buy-row{ gap:10px; }
.buy-row > *{ min-width:0 !important; }
.buy-row input{
  min-width: 140px !important;
  width: 100%;
  max-width: 100%;
  font-size: var(--fs-base);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* Force wrap to column on very small screens OR when fonts are huge */
@media (max-width: 480px){
  .buy-row{ flex-direction:column; }
  .buy-row input{ min-width: 0 !important; }
  #ownModeWrap{ flex-direction:column; }
  #ownModeWrap button{ width:100%; min-width:0 !important; }
}
/* Override inline min-width on mode buttons */
#ownModeWrap button{ min-width:0 !important; max-width:100%; }
/* Headings and long labels */
h1,h2,h3,.title,.section-title{
  font-size: var(--fs-title);
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.muted, p, label, small{ overflow-wrap:anywhere; word-break:break-word; }
button, .pro-btn, .btn{
  font-size: var(--fs-base);
  max-width:100%;
  white-space: normal;        /* allow wrapping for large system font */
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}


/* === Smart Responsive Forms (System font-safe) === */
input, textarea, select, button { max-width: 100%; box-sizing: border-box; }
.pro-card, .buy-grid { max-width: 100%; overflow: hidden; }

/* Generic rows that contain inputs/buttons */
.buy-row, .note-add-row, .settings-theme-row, .input-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.buy-row > *, .note-add-row > *, .settings-theme-row > *, .input-group > * { min-width: 0; }

/* Make fields wrap nicely on small screens / large system fonts */
.buy-row input, .buy-row select, .buy-row textarea,
.note-add-row input, .note-add-row select, .note-add-row textarea,
.settings-theme-row input, .settings-theme-row select,
.input-group input, .input-group select, .input-group textarea {
  flex: 1 1 240px;
  width: 100%;
}

/* Ensure action buttons don't overflow */
.buy-row button, .settings-theme-row button, .input-group button {
  flex: 0 0 auto;
  width: auto;
}

/* Notes + button: keep + inside bounds always */
.note-add-btn{
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  border-radius: 12px;
}

/* Long IDs / codes should never break layout */
.buy-device code, code{
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* Buttons text may wrap instead of overflow */
.pro-whatsapp, button{
  white-space: normal;
}


/* --- Owner Advanced (collapsible) --- */
.owner-adv > summary::-webkit-details-marker{ display:none; }
.owner-adv > summary{ display:flex; align-items:center; justify-content:center; gap:8px; }
.owner-adv[open] > summary{ opacity:.9; }

  /* --- Grades search (safe, no-focus-loss) --- */
  .grades-tools{
    display:flex;
    gap:10px;
    align-items:center;
    margin: 4px 0 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
  }
  .grades-tools input{
    flex:1;
    min-width: 140px;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text-main);
    font-family: inherit;
    font-size: clamp(13px, 1.7vw, 16px);
  }
  .grades-tools input::placeholder{ color: var(--text-sec); }
  .grades-clear{
    flex:0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-main);
    font-weight: 900;
    cursor: pointer;
  }
  .grades-meta{
    margin: -2px 0 8px;
    font-size: 0.9em;
    color: var(--text-sec);
    text-align: right;
  }
  .is-hidden{ display:none !important; }


/* === SMART GLOBAL LAYOUT (No Overlap) === */
.container{
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px 14px 140px; /* bottom space for tabs */
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 900px){
  .container{ padding: 20px 18px 150px; gap: 18px; }
}

/* Make all major blocks participate in normal flow */
.app-header,
.control-panel,
.project-info,
.section,
.card,
.panel,
.board,
.table-wrap,
.tabs,
.tab-content,
.form-section,
.form-card,
.glass-card,
.glass-panel{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
}

/* Standard spacing for common blocks (fallback if they don't have their own) */
.app-header{ margin-bottom: 4px !important; }
.control-panel,
.project-info,
.form-section,
.form-card,
.glass-card,
.glass-panel,
.board,
.table-wrap{
  width: 100%;
}

/* Prevent any accidental overlay from long content */
.control-panel,
.project-info,
.form-section,
.form-card,
.glass-card,
.glass-panel,
.board,
.table-wrap{
  overflow: visible;
}

/* If a block was previously overlapping due to z-index, normalize it */
.control-panel,
.project-info,
.form-section,
.form-card,
.glass-card,
.glass-panel,
.board,
.table-wrap{
  z-index: 1;
}

/* Bottom navigation safety */
.bottom-nav,
#bottom-nav,
.navbar,
.tabs-bar{
  z-index: 5000;
}

/* Mobile: ensure selects/inputs don't collide */
.selectors{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.selectors select{
  flex: 1 1 220px;
  min-width: 180px;
}

/* Ensure any "floating" decorative elements do not cover content */
[class*="floating"],
[class*="float"],
[class*="decor"],
[class*="orb"],
[class*="bubble"]{
  pointer-events: none;
  z-index: 0 !important;
}


    .tp-meta{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
    .tp-row{display:flex;gap:10px;flex-wrap:wrap}
    .tp-input{flex:1;min-width:200px;padding:12px 14px;border:2px solid var(--border);border-radius:12px;background:var(--input-bg);color:var(--text-main);font-weight:700}
    .tp-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
    .tp-btn{border:none;border-radius:12px;padding:12px 14px;font-weight:900;cursor:pointer;background:var(--bg-panel);color:var(--text-main);box-shadow:var(--shadow-card);border:1px solid var(--border)}
    .tp-btn:active{transform:scale(.98)}
    .tp-btn-primary{background:linear-gradient(90deg,var(--primary),#3f37c9);color:#fff;border:none}
    .tp-btn-save{background:linear-gradient(90deg,#2e7d32,#43a047);color:#fff;border:none}
    .tp-btn-mini{padding:10px 12px;font-weight:800}
    .tp-tab{display:none;margin-top:10px}
    .tp-tab.active{display:block}
    .tp-subactions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:6px 0 12px}
    .tp-list{display:flex;flex-direction:column;gap:12px}
    .tp-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:12px;box-shadow:var(--shadow-card)}
    .tp-card-head{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}
    .tp-title{flex:1;min-width:160px;padding:10px 12px;border:2px solid var(--border);border-radius:12px;background:var(--input-bg);color:var(--text-main);font-weight:900}
    .tp-drag{cursor:grab;user-select:none;font-size:20px;padding:6px 10px;border-radius:10px;background:rgba(0,0,0,.06)}
    body.dark-mode .tp-drag{background:rgba(255,255,255,.08)}
    .tp-del{border:none;background:#e53935;color:#fff;border-radius:12px;padding:10px 12px;font-weight:900;cursor:pointer}
    .tp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 120px;gap:10px;margin-top:10px;max-width:100%}
    .tp-grid .tp-input{min-width:0 !important;width:100%}
    .tp-card{max-width:100%}
    .tp-card-head > *{min-width:0}
    .tp-title{min-width:0}

    @media(max-width:520px){.tp-grid{grid-template-columns:1fr}}
    .tp-text{width:100%;min-height:110px;padding:12px;border:2px solid var(--border);border-radius:12px;background:var(--input-bg);color:var(--text-main);font-weight:650;resize:vertical}
    .tp-hint{margin-top:8px;text-align:center;color:var(--text-sec);font-weight:800;font-size:.92em}
    .tp-import-area{width:100%;min-height:240px;padding:12px;border:2px solid var(--border);border-radius:12px;background:var(--input-bg);color:var(--text-main);font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;direction:ltr}


/* =========================
   Questionnaire Preview (Fullscreen like Grades)
   ========================= */
.qn-fullscreen-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  background:#fff;
  overflow:hidden;
}
.qn-fullscreen-box{
  width:100%;
  height:100%;
  max-width:none;
  margin:0;
  border-radius:0;
  box-shadow:none;
  display:flex;
  flex-direction:column;
  background:#fff;
}
.qn-sticky-toolbar{
  position:sticky;
  top:0;
  z-index:10;
  background:#fff;
  border-bottom:2px solid #000;
}
.qn-doc-viewport{flex:1;
  overflow:auto;
  background:#efefef;
  padding:12px;
  -webkit-overflow-scrolling: touch;
  direction:ltr; /* allow horizontal pan both sides on mobile */
  touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-left:12px; padding-right:12px; }
.qn-doc-viewport .qn-print-root{
  width:100%;
  display:flex;
  direction:rtl;
  flex-direction:column;
  align-items:center;
  gap:12px;
  background:transparent;
  padding:0;
}
.qn-doc-viewport .qn-page{
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
@media (max-width: 520px){
  .qn-doc-viewport{ padding:8px; }
}

/* =========================
   Questionnaire (A4) styles
   Scoped to .qn-print-root
   ========================= */
.qn-print-root{ font-family: var(--app-font) !important; }
.qn-pages{ display:flex; flex-direction:column; gap:18px; align-items:center; width:100%; }

html[data-qn-paper="A4"][data-qn-ori="portrait"] .qn-page{ width:210mm; height:297mm; }
html[data-qn-paper="A4"][data-qn-ori="landscape"] .qn-page{ width:297mm; height:210mm; }
html[data-qn-paper="Letter"][data-qn-ori="portrait"] .qn-page{ width:216mm; height:279mm; }
html[data-qn-paper="Letter"][data-qn-ori="landscape"] .qn-page{ width:279mm; height:216mm; }

.qn-page{
  width:210mm;
  height:297mm;
  background:#ffffff !important;
  color:#111;
  position:relative;
  overflow:hidden;
  border:1px solid #d9dee7;
  border-radius:14px;
  -webkit-print-color-adjust:exact !important;
  print-color-adjust:exact !important;
  box-shadow:0 10px 30px rgba(15,23,42,.10), 0 2px 8px rgba(15,23,42,.06);
}

.qn-page-inner{
  position:absolute;
  inset:7mm 7mm 8mm 7mm;
  display:flex;
  flex-direction:column;
  min-height:0;
}
html[data-qn-ori="landscape"] .qn-page-inner{ inset:6mm 6mm 7mm 6mm; }

.qn-modern-header{
  border:1.5px solid #1f2937;
  border-radius:12px;
  padding:10px 12px 8px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.qn-modern-header-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.qn-modern-brand,
.qn-modern-meta{
  width:30%;
  font-size:10.2pt;
  line-height:1.65;
}
.qn-modern-brand{ text-align:right; }
.qn-modern-meta{ text-align:left; }
.qn-modern-title-wrap{
  width:40%;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.qn-modern-logo{
  width:42px;
  height:42px;
  object-fit:contain;
  display:block;
}
.qn-modern-school{
  font-size:15pt;
  font-weight:900;
  letter-spacing:.2px;
}
.qn-modern-title{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:180px;
  padding:6px 18px;
  border:2px solid #111827;
  border-radius:999px;
  font-size:13pt;
  font-weight:900;
  background:#fff;
}
.qn-modern-subline{
  margin-top:8px;
  padding-top:8px;
  border-top:1.5px solid #cfd8e3;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:8px;
}
.qn-meta-chip{
  border:1px solid #d6dde7;
  border-radius:10px;
  padding:7px 10px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  font-size:10pt;
  min-height:40px;
}
.qn-meta-chip b{
  display:block;
  margin-bottom:2px;
  font-size:9pt;
  color:#475569;
  font-weight:800;
}
.qn-section-divider{
  height:0;
  border-top:2px solid #111827;
  margin:10px 1px 8px;
  opacity:.92;
}
.qn-body{
  flex:1;
  min-height:0;
  overflow:hidden;
  padding:0;
}
.qn-exam-content{
  height:100%;
  font-size:11.2pt;
  line-height:1.9;
  color:#111;
}
.qn-exam-item{
  border:1.5px solid #1f2937;
  border-radius:12px;
  overflow:hidden;
  margin:0 0 10px 0;
  background:#fff;
  break-inside:avoid;
  page-break-inside:avoid;
}
.qn-exam-item-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 12px;
  background:#f8fafc;
  border-bottom:1.5px solid #cbd5e1;
}
.qn-exam-item-no{
  font-weight:900;
  font-size:10pt;
  white-space:nowrap;
}
.qn-exam-item-label{
  flex:1;
  text-align:right;
  font-weight:900;
  font-size:10.8pt;
}
.qn-exam-item-body{
  padding:10px 12px 12px;
  font-size:11pt;
  line-height:1.95;
}
.qn-exam-item-body img{
  max-width:100%;
  max-height:150px;
  object-fit:contain;
  border-radius:8px;
}
.qn-exam-item-body table{
  width:100%;
  border-collapse:collapse;
}
.qn-exam-item-body td,
.qn-exam-item-body th{
  border:1px solid #cbd5e1;
  padding:6px 8px;
}
.qn-exam-item-body p,
.qn-exam-item-body ul,
.qn-exam-item-body ol,
.qn-exam-item-body table,
.qn-exam-item-body .qn-block,
.qn-exam-item-body .question-block{
  margin-top:0;
  margin-bottom:10px;
}
.qn-footer{
  margin-top:8px;
  border-top:1.5px solid #cfd8e3;
  padding-top:6px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:9.8pt;
  color:#334155;
}
.qn-page-no{ font-weight:900; }

:root{
  --qn-zoom: 1;
  --qn-font: 15px;
  --qn-line: 1.85;
  --qn-pad: 10px;
  --qn-border: 2px;
  --qn-paper: A4;
  --qn-ori: portrait;
}

.qn-controls{
  background:#eee; padding:10px; border-radius:12px; margin:10px auto; max-width:21cm;
  display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap;
  border:1px solid #ccc;
}
.qn-control-item{ display:flex; flex-direction:column; align-items:center; font-size:.85em; font-weight:900; color:#333; }
.qn-control-item input, .qn-control-item select{ margin-top:6px; cursor:pointer; }

.qn-sticky-controls{ position: sticky; top: 58px; z-index: 110; }
.qn-doc-viewport{ padding-bottom: 18px; }

body.qn-preview-open #qnPages{ zoom: var(--qn-zoom); }
body.qn-preview-open #qnPages .qn-page,
body.qn-exporting #qnPages .qn-page{ transform:none !important; }
body.qn-preview-open #qnPages .qn-exam-item,
body.qn-exporting #qnPages .qn-exam-item{ border-width: calc(var(--qn-border) * .75px) !important; }
body.qn-preview-open #qnPages .qn-exam-item-body,
body.qn-exporting #qnPages .qn-exam-item-body{
  font-size: var(--qn-font) !important;
  line-height: var(--qn-line) !important;
  padding: calc(var(--qn-pad) * 1px) !important;
}

@media print{
  html, body{ background:#fff !important; margin:0 !important; padding:0 !important; }
}

#qnPages .qn-modern-header,
#qnPages .qn-modern-brand,
#qnPages .qn-modern-meta,
#qnPages .qn-modern-title,
#qnPages .qn-exam-item-body,
#qnPages .qn-exam-item-head{
  color:#000 !important;
  opacity:1 !important;
  text-shadow:none !important;
}
#qnPages .qn-section-divider{ opacity:1 !important; }

.qn-fullscreen-modal{ overflow:hidden; }
.qn-fullscreen-box{ min-height:0; }
.qn-doc-viewport{
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action: pan-x pan-y;
}
.qn-controls-scroll{
  max-height:45vh;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
@media print{
}

.qn-word-editor:empty:before{content:attr(data-placeholder);color:rgba(0,0,0,.35);}

/* --- Block Question (text + image) --- */
.qn-block{border:1px dashed rgba(0,0,0,.22);border-radius:12px;padding:10px;margin:10px 0;background:#fff;position:relative}
.qn-block[draggable="true"]{cursor:grab}
.qn-block.dragging{opacity:.55}
.qn-block-handle{font-size:13px;opacity:.75;margin-bottom:8px;user-select:none;display:flex;justify-content:space-between;align-items:center}
.qn-block-actions{display:flex;gap:6px}
.qn-block-text{min-height:44px;border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:10px;background:#fff;color:#111;outline:none;line-height:1.8}
.qn-block-text:empty:before{content:attr(data-placeholder);color:rgba(0,0,0,.35)}
.qn-block-row{display:flex;gap:12px;align-items:flex-start}
.qn-block-row.right .qn-block-text{order:1;flex:1}
.qn-block-row.right .qn-block-media{order:2;width:38%}
.qn-block-row.left .qn-block-text{order:2;flex:1}
.qn-block-row.left .qn-block-media{order:1;width:38%}
.qn-block-media{min-width:140px}
.qn-block-media img{max-width:100%;height:auto;border-radius:10px;border:1px solid rgba(0,0,0,.12);display:block}
.qn-block-media .qn-media-placeholder{border:1px dashed rgba(0,0,0,.18);border-radius:10px;padding:10px;text-align:center;opacity:.8;font-size:13px;background:rgba(0,0,0,.02)}
.qn-mini{padding:8px 10px;font-size:13px;border-radius:10px}
.qn-select{padding:8px 10px;border-radius:10px;border:1px solid rgba(0,0,0,.18);background:#fff}
.page-break{break-after:page;page-break-after:always;height:0;border-top:1px dashed rgba(0,0,0,.12);margin:14px 0}

.qnHeaderFields{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px 0}
.qnSmallInput{flex:1;min-width:150px}
.qnChk{display:flex;align-items:center;gap:6px;padding:10px 12px;border:1px solid rgba(0,0,0,.18);border-radius:12px;background:#fff;color:#000}
.qnSelect{padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.18);background:#fff;color:#000;min-width:130px}
.qn-logo{width:44px;height:44px;object-fit:contain;display:block;margin-bottom:6px}

/* === Board green button: open student docs inside Grades list (no flashback) === */
.board-docs-btn{
  width:100%;
  margin-top:12px;
  padding:16px 14px;
  border:none;
  border-radius:12px;
  background: linear-gradient(90deg, var(--accent2,#2e7d32), color-mix(in srgb,var(--accent2,#43a047) 80%,#fff 20%));
  color:#fff;
  font-size:1.1em;
  font-weight:900;
  cursor:pointer;
  box-shadow: var(--shadow);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}
.board-docs-btn:active{ transform: scale(0.98); }

/* --- QN Print/Export overrides (modern + safe) --- */
#qnPages .qn-page-inner{ inset:7mm 7mm 8mm 7mm; }
#qnPages .qn-exam-item-body .qn-line{ border-bottom:1px dotted #333 !important; height:18px !important; margin:10px 0 0 0 !important; }
@media print{
  body.qn-exporting .qn-controls,
  body.qn-exporting #qnExportPanel,
  body.qn-exporting .qn-toolbar,
  body.qn-exporting .qn-btnbar,
  body.qn-exporting .qn-fab,
  body.qn-exporting .app-header,
  body.qn-exporting .sidebar,
  body.qn-exporting .no-print{ display:none !important; }
  body.qn-exporting{ background:#fff !important; }
  #qnPages{ padding:0 !important; margin:0 auto !important; }
  .qn-page{ page-break-after:always; }
  @page { margin: 8mm; size: A4; }
}

/* ===== Export/Preview Toolbar (Mobile + Desktop) ===== */
#export-overlay .export-header{
  text-align:center;
  padding:10px;
  background:#444;
  position:sticky;
  top:0;
  z-index:10000;
}
#export-overlay .export-toolbar{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:6px 10px;
}
#export-overlay .export-toolbar::-webkit-scrollbar{ height:6px; }
#export-overlay .export-toolbar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.35); border-radius:10px; }
#export-overlay .export-toolbar::-webkit-scrollbar-track{ background:rgba(0,0,0,.15); border-radius:10px; }

#export-overlay .export-btn{
  border:none;
  border-radius:18px;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  word-break:keep-all;
  line-height:1;
  padding:8px 18px;
  font-size:15px;
  min-width:max-content;
  user-select:none;
}
/* Icon-only export toolbar (mobile/desktop) */
.export-toolbar.icon-only .export-btn{
  width:44px;
  height:44px;
  min-width:44px;
  padding:0;
  border-radius:999px;
  font-size:18px;
  gap:0;
}
.export-toolbar.icon-only .export-btn:active{ transform: scale(0.98); }

#export-overlay .export-btn:active{ transform:scale(0.98); }

#export-overlay .btn-close{ background:#fff; color:#333; }
#export-overlay .btn-print{ background:#d32f2f; color:#fff; }
#export-overlay .btn-pdf{ background:#1976d2; color:#fff; }
#export-overlay .btn-excel{ background:#2e7d32; color:#fff; }
#export-overlay .btn-edit{ background:#6a4c93; color:#fff; }
#export-overlay .btn-png{ background:#457b9d; color:#fff; }

@media (max-width: 480px){
  #export-overlay .export-toolbar{ gap:8px; }
  #export-overlay .export-btn{
    padding:10px 14px;
    font-size:14px;
    border-radius:16px;
  }
}
@media (max-width: 360px){
  #export-overlay .export-btn{
    padding:10px 12px;
    font-size:13px;
  }
}
/* ===== End Export Toolbar ===== */


.export-btn.btn-cancel{background:#6c757d;color:#fff;}

/* === V23 Ultra Modal (Kurdish) === */
#v23UltraModal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:100010;background:rgba(0,0,0,.55);backdrop-filter: blur(2px);}
#v23UltraModal .v23m-box{width:min(92vw,460px);background:#fff;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden;font-family: system-ui, -apple-system, "Segoe UI", Arial;}
#v23UltraModal .v23m-head{padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.08);display:flex;align-items:center;justify-content:space-between;gap:10px}
#v23UltraModal .v23m-title{font-weight:800;font-size:15px;color:#111;opacity:.9}
#v23UltraModal .v23m-close{border:0;background:transparent;font-size:20px;line-height:1;cursor:pointer;padding:6px 10px;border-radius:10px}
#v23UltraModal .v23m-close:active{transform:scale(.98)}
#v23UltraModal .v23m-body{padding:14px 16px;color:#111;font-size:15px;line-height:1.8;direction:rtl;text-align:right;white-space:pre-wrap}
#v23UltraModal .v23m-input{width:100%;margin-top:10px;padding:10px 12px;border:1px solid rgba(0,0,0,.15);border-radius:12px;font-size:15px;direction:rtl}
#v23UltraModal .v23m-actions{display:flex;gap:10px;justify-content:flex-end;padding:14px 16px;border-top:1px solid rgba(0,0,0,.08);background:rgba(0,0,0,.02)}
#v23UltraModal .v23m-btn{border:0;border-radius:12px;padding:10px 14px;font-weight:800;font-size:14px;cursor:pointer}
#v23UltraModal .v23m-btn:active{transform:scale(.99)}
#v23UltraModal .v23m-cancel{background:#e9edf3;color:#111}
#v23UltraModal .v23m-ok{background:#2563eb;color:#fff}


.customer-mode #ownerPanelCard{display:none !important;}


/* ===== v23-print-engine-v6 ===== */

@media print{
  @page{ size:A4; margin:0 !important; }
  html, body{ margin:0 !important; padding:0 !important; background:#fff !important; }
  #export-container, .export-content, .v23page, .v23hdr, .v23txt{
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  .export-content{ width:210mm !important; min-height:297mm !important; margin:0 auto !important; padding:0 !important; background:#fff !important; box-shadow:none !important; border:0 !important; }
  .v23page{ width:210mm !important; min-height:297mm !important; margin:0 auto !important; padding-top:var(--v23-page-pt, 8mm) !important; padding-bottom:var(--v23-page-pb, 8mm) !important; padding-left:var(--v23-page-ps, 8mm) !important; padding-right:var(--v23-page-ps, 8mm) !important; background:#fff !important; border:0 !important; box-shadow: inset 0 0 0 var(--v23-page-bw, 1px) var(--v23-page-bc, rgba(0,0,0,.16)) !important; }
  .v23hdr{ background:var(--v23-hdr-bg, rgba(255,255,255,.86)) !important; background-image:var(--v23-hdr-g, linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.80))) !important; border:var(--v23-hdr-bd, 1px solid rgba(0,0,0,.10)) !important; border-radius:var(--v23-hdr-br, 10px) !important; padding:var(--v23-hdr-pd, 4mm) !important; box-shadow:var(--v23-hdr-sh, 0 1px 5px rgba(0,0,0,.06)) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  .v23txt{ margin:0 0 var(--v23-gap-qq, 2mm) 0 !important; border:var(--v23-box-bd, none) !important; border-radius:var(--v23-box-br, 0) !important; padding:var(--v23-box-pd, 0) !important; background:var(--v23-box-bg, transparent) !important; box-shadow:var(--v23-box-sh, none) !important; page-break-inside:avoid !important; }
}

/* ===== v10-master-qn-print-fix ===== */

/* v10 master: minimal questionnaire print-flow fix based on the stable base file */
@media print{
  @page{ margin: 7mm; size: A4; }

  body.qn-exporting #qnPages,
  body.qn-exporting .qn-pages,
  body.qn-exporting .qn-print-root{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    gap:0 !important;
    background:#fff !important;
  }

  body.qn-exporting #qnPages .qn-page,
  body.qn-toolbar-mode #qnPages .qn-page{
    width:auto !important;
    max-width:196mm !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    page-break-after:auto !important;
    break-after:auto !important;
    page-break-inside:auto !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:#fff !important;
  }

  body.qn-exporting #qnPages .qn-page:not(:last-child),
  body.qn-toolbar-mode #qnPages .qn-page:not(:last-child){
    page-break-after:always !important;
    break-after:page !important;
  }

  body.qn-exporting #qnPages .qn-page:last-child,
  body.qn-toolbar-mode #qnPages .qn-page:last-child{
    page-break-after:auto !important;
    break-after:auto !important;
  }

  body.qn-exporting #qnPages .qn-page-inner,
  body.qn-toolbar-mode #qnPages .qn-page-inner{
    position:static !important;
    inset:auto !important;
    min-height:0 !important;
    padding:5mm 5mm 0 5mm !important;
    display:block !important;
  }

  body.qn-exporting #qnPages .qn-body,
  body.qn-exporting #qnPages .qn-exam-content,
  body.qn-toolbar-mode #qnPages .qn-body,
  body.qn-toolbar-mode #qnPages .qn-exam-content{
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  body.qn-exporting #qnPages .qn-modern-header,
  body.qn-toolbar-mode #qnPages .qn-modern-header{
    padding:6px 9px 5px !important;
    border-radius:10px !important;
    margin-bottom:6px !important;
    background:#fff !important;
  }

  body.qn-exporting #qnPages .qn-modern-header-top,
  body.qn-toolbar-mode #qnPages .qn-modern-header-top{
    gap:6px !important;
    align-items:flex-start !important;
  }

  body.qn-exporting #qnPages .qn-modern-brand,
  body.qn-exporting #qnPages .qn-modern-meta,
  body.qn-toolbar-mode #qnPages .qn-modern-brand,
  body.qn-toolbar-mode #qnPages .qn-modern-meta{
    font-size:8.8pt !important;
    line-height:1.35 !important;
    width:31% !important;
  }

  body.qn-exporting #qnPages .qn-modern-title-wrap,
  body.qn-toolbar-mode #qnPages .qn-modern-title-wrap{
    gap:3px !important;
    width:38% !important;
  }

  body.qn-exporting #qnPages .qn-modern-logo,
  body.qn-toolbar-mode #qnPages .qn-modern-logo{
    width:28px !important;
    height:28px !important;
  }

  body.qn-exporting #qnPages .qn-modern-school,
  body.qn-toolbar-mode #qnPages .qn-modern-school{
    font-size:11pt !important;
  }

  body.qn-exporting #qnPages .qn-modern-title,
  body.qn-toolbar-mode #qnPages .qn-modern-title{
    min-width:120px !important;
    padding:3px 10px !important;
    font-size:10.2pt !important;
    border-width:1.5px !important;
  }

  body.qn-exporting #qnPages .qn-modern-subline,
  body.qn-toolbar-mode #qnPages .qn-modern-subline{
    margin-top:5px !important;
    padding-top:5px !important;
    gap:5px !important;
  }

  body.qn-exporting #qnPages .qn-meta-chip,
  body.qn-toolbar-mode #qnPages .qn-meta-chip{
    min-height:28px !important;
    padding:4px 6px !important;
    font-size:8.2pt !important;
    border-radius:8px !important;
  }

  body.qn-exporting #qnPages .qn-meta-chip b,
  body.qn-toolbar-mode #qnPages .qn-meta-chip b{
    margin-bottom:1px !important;
    font-size:7.6pt !important;
  }

  body.qn-exporting #qnPages .qn-section-divider,
  body.qn-toolbar-mode #qnPages .qn-section-divider{
    margin:6px 0 5px !important;
  }

  body.qn-exporting #qnPages .qn-exam-content,
  body.qn-toolbar-mode #qnPages .qn-exam-content{
    font-size:10pt !important;
    line-height:1.38 !important;
  }

  body.qn-exporting #qnPages .qn-exam-item,
  body.qn-toolbar-mode #qnPages .qn-exam-item{
    margin:0 0 4px 0 !important;
    border-width:1px !important;
    border-radius:9px !important;
    break-inside:avoid !important;
    page-break-inside:avoid !important;
  }

  body.qn-exporting #qnPages .qn-exam-item-head,
  body.qn-toolbar-mode #qnPages .qn-exam-item-head{
    padding:4px 8px !important;
    gap:6px !important;
    border-bottom-width:1px !important;
  }

  body.qn-exporting #qnPages .qn-exam-item-no,
  body.qn-toolbar-mode #qnPages .qn-exam-item-no{
    font-size:8.8pt !important;
  }

  body.qn-exporting #qnPages .qn-exam-item-label,
  body.qn-toolbar-mode #qnPages .qn-exam-item-label{
    font-size:9.1pt !important;
  }

  body.qn-exporting #qnPages .qn-exam-item-body,
  body.qn-toolbar-mode #qnPages .qn-exam-item-body{
    padding:4px 8px 5px !important;
    font-size:9.6pt !important;
    line-height:1.36 !important;
  }

  body.qn-exporting #qnPages .qn-exam-item-body p,
  body.qn-exporting #qnPages .qn-exam-item-body ul,
  body.qn-exporting #qnPages .qn-exam-item-body ol,
  body.qn-exporting #qnPages .qn-exam-item-body table,
  body.qn-exporting #qnPages .qn-exam-item-body .qn-block,
  body.qn-exporting #qnPages .qn-exam-item-body .question-block,
  body.qn-toolbar-mode #qnPages .qn-exam-item-body p,
  body.qn-toolbar-mode #qnPages .qn-exam-item-body ul,
  body.qn-toolbar-mode #qnPages .qn-exam-item-body ol,
  body.qn-toolbar-mode #qnPages .qn-exam-item-body table,
  body.qn-toolbar-mode #qnPages .qn-exam-item-body .qn-block,
  body.qn-toolbar-mode #qnPages .qn-exam-item-body .question-block{
    margin-bottom:4px !important;
  }

  body.qn-exporting #qnPages .qn-footer,
  body.qn-exporting #qnPages .qn-page-no,
  body.qn-exporting #qnPages .v23pb,
  body.qn-toolbar-mode #qnPages .qn-footer,
  body.qn-toolbar-mode #qnPages .qn-page-no,
  body.qn-toolbar-mode #qnPages .v23pb{
    display:none !important;
  }
}

/* ===== v10-qn-smart-fit-print-fix ===== */

@media print{
  body.qn-smartfit-1 #qnPages .qn-modern-header,
  body.qn-smartfit-1 #qnPages .qn-modern-subline,
  body.qn-smartfit-1 #qnPages .qn-section-divider,
  body.qn-smartfit-1 #qnPages .qn-exam-item,
  body.qn-smartfit-1 #qnPages .qn-exam-item-head,
  body.qn-smartfit-1 #qnPages .qn-exam-item-body,
  body.qn-smartfit-1 #qnPages .qn-exam-item-body p,
  body.qn-smartfit-1 #qnPages .qn-exam-item-body ul,
  body.qn-smartfit-1 #qnPages .qn-exam-item-body ol,
  body.qn-smartfit-1 #qnPages .qn-exam-item-body table,
  body.qn-smartfit-1 #qnPages .qn-exam-item-body .qn-block,
  body.qn-smartfit-1 #qnPages .qn-exam-item-body .question-block,
  body.qn-smartfit-2 #qnPages .qn-modern-header,
  body.qn-smartfit-2 #qnPages .qn-modern-subline,
  body.qn-smartfit-2 #qnPages .qn-section-divider,
  body.qn-smartfit-2 #qnPages .qn-exam-item,
  body.qn-smartfit-2 #qnPages .qn-exam-item-head,
  body.qn-smartfit-2 #qnPages .qn-exam-item-body,
  body.qn-smartfit-2 #qnPages .qn-exam-item-body p,
  body.qn-smartfit-2 #qnPages .qn-exam-item-body ul,
  body.qn-smartfit-2 #qnPages .qn-exam-item-body ol,
  body.qn-smartfit-2 #qnPages .qn-exam-item-body table,
  body.qn-smartfit-2 #qnPages .qn-exam-item-body .qn-block,
  body.qn-smartfit-2 #qnPages .qn-exam-item-body .question-block,
  body.qn-smartfit-3 #qnPages .qn-modern-header,
  body.qn-smartfit-3 #qnPages .qn-modern-subline,
  body.qn-smartfit-3 #qnPages .qn-section-divider,
  body.qn-smartfit-3 #qnPages .qn-exam-item,
  body.qn-smartfit-3 #qnPages .qn-exam-item-head,
  body.qn-smartfit-3 #qnPages .qn-exam-item-body,
  body.qn-smartfit-3 #qnPages .qn-exam-item-body p,
  body.qn-smartfit-3 #qnPages .qn-exam-item-body ul,
  body.qn-smartfit-3 #qnPages .qn-exam-item-body ol,
  body.qn-smartfit-3 #qnPages .qn-exam-item-body table,
  body.qn-smartfit-3 #qnPages .qn-exam-item-body .qn-block,
  body.qn-smartfit-3 #qnPages .qn-exam-item-body .question-block{ }

  body.qn-smartfit-1 #qnPages .qn-page-inner{ inset:4.2mm 4.4mm 5mm 4.4mm !important; }
  body.qn-smartfit-1 #qnPages .qn-modern-header{ padding:5px 8px 4px !important; margin-bottom:4px !important; }
  body.qn-smartfit-1 #qnPages .qn-modern-brand,
  body.qn-smartfit-1 #qnPages .qn-modern-meta{ font-size:8.4pt !important; line-height:1.26 !important; }
  body.qn-smartfit-1 #qnPages .qn-modern-title{ font-size:9.5pt !important; padding:2px 8px !important; }
  body.qn-smartfit-1 #qnPages .qn-modern-subline{ margin-top:4px !important; padding-top:4px !important; gap:4px !important; }
  body.qn-smartfit-1 #qnPages .qn-meta-chip{ min-height:24px !important; padding:3px 5px !important; font-size:7.8pt !important; }
  body.qn-smartfit-1 #qnPages .qn-meta-chip b{ font-size:7.1pt !important; }
  body.qn-smartfit-1 #qnPages .qn-section-divider{ margin:4px 0 3px !important; }
  body.qn-smartfit-1 #qnPages .qn-exam-content{ font-size:9.4pt !important; line-height:1.24 !important; }
  body.qn-smartfit-1 #qnPages .qn-exam-item{ margin:0 0 2px 0 !important; border-radius:7px !important; }
  body.qn-smartfit-1 #qnPages .qn-exam-item-head{ padding:3px 6px !important; gap:4px !important; }
  body.qn-smartfit-1 #qnPages .qn-exam-item-no{ font-size:8.2pt !important; }
  body.qn-smartfit-1 #qnPages .qn-exam-item-label{ font-size:8.5pt !important; }
  body.qn-smartfit-1 #qnPages .qn-exam-item-body{ padding:3px 6px 3px !important; font-size:9.0pt !important; line-height:1.22 !important; }
  body.qn-smartfit-1 #qnPages .qn-exam-item-body p,
  body.qn-smartfit-1 #qnPages .qn-exam-item-body ul,
  body.qn-smartfit-1 #qnPages .qn-exam-item-body ol,
  body.qn-smartfit-1 #qnPages .qn-exam-item-body table,
  body.qn-smartfit-1 #qnPages .qn-exam-item-body .qn-block,
  body.qn-smartfit-1 #qnPages .qn-exam-item-body .question-block{ margin-bottom:2px !important; }

  body.qn-smartfit-2 #qnPages .qn-page-inner{ inset:3.5mm 3.9mm 4.1mm 3.9mm !important; }
  body.qn-smartfit-2 #qnPages .qn-modern-header{ padding:4px 7px 3px !important; margin-bottom:3px !important; }
  body.qn-smartfit-2 #qnPages .qn-modern-brand,
  body.qn-smartfit-2 #qnPages .qn-modern-meta{ font-size:7.9pt !important; line-height:1.18 !important; }
  body.qn-smartfit-2 #qnPages .qn-modern-title{ font-size:9.0pt !important; padding:2px 7px !important; }
  body.qn-smartfit-2 #qnPages .qn-modern-subline{ margin-top:3px !important; padding-top:3px !important; gap:3px !important; }
  body.qn-smartfit-2 #qnPages .qn-meta-chip{ min-height:21px !important; padding:2px 4px !important; font-size:7.2pt !important; }
  body.qn-smartfit-2 #qnPages .qn-meta-chip b{ font-size:6.7pt !important; }
  body.qn-smartfit-2 #qnPages .qn-section-divider{ margin:3px 0 2px !important; }
  body.qn-smartfit-2 #qnPages .qn-exam-content{ font-size:8.8pt !important; line-height:1.14 !important; }
  body.qn-smartfit-2 #qnPages .qn-exam-item{ margin:0 0 1px 0 !important; border-radius:6px !important; }
  body.qn-smartfit-2 #qnPages .qn-exam-item-head{ padding:2px 5px !important; gap:3px !important; }
  body.qn-smartfit-2 #qnPages .qn-exam-item-no{ font-size:7.7pt !important; }
  body.qn-smartfit-2 #qnPages .qn-exam-item-label{ font-size:8.0pt !important; }
  body.qn-smartfit-2 #qnPages .qn-exam-item-body{ padding:2px 5px 2px !important; font-size:8.5pt !important; line-height:1.12 !important; }
  body.qn-smartfit-2 #qnPages .qn-exam-item-body p,
  body.qn-smartfit-2 #qnPages .qn-exam-item-body ul,
  body.qn-smartfit-2 #qnPages .qn-exam-item-body ol,
  body.qn-smartfit-2 #qnPages .qn-exam-item-body table,
  body.qn-smartfit-2 #qnPages .qn-exam-item-body .qn-block,
  body.qn-smartfit-2 #qnPages .qn-exam-item-body .question-block{ margin-bottom:1px !important; }

  body.qn-smartfit-3 #qnPages .qn-page-inner{ inset:2.8mm 3.1mm 3.2mm 3.1mm !important; }
  body.qn-smartfit-3 #qnPages .qn-modern-header{ padding:3px 6px 2px !important; margin-bottom:2px !important; border-radius:9px !important; }
  body.qn-smartfit-3 #qnPages .qn-modern-brand,
  body.qn-smartfit-3 #qnPages .qn-modern-meta{ font-size:7.2pt !important; line-height:1.08 !important; }
  body.qn-smartfit-3 #qnPages .qn-modern-title{ font-size:8.4pt !important; padding:1px 6px !important; }
  body.qn-smartfit-3 #qnPages .qn-modern-subline{ margin-top:2px !important; padding-top:2px !important; gap:2px !important; }
  body.qn-smartfit-3 #qnPages .qn-meta-chip{ min-height:18px !important; padding:1px 4px !important; font-size:6.7pt !important; border-radius:6px !important; }
  body.qn-smartfit-3 #qnPages .qn-meta-chip b{ font-size:6.2pt !important; }
  body.qn-smartfit-3 #qnPages .qn-section-divider{ margin:2px 0 1px !important; }
  body.qn-smartfit-3 #qnPages .qn-exam-content{ font-size:8.15pt !important; line-height:1.05 !important; }
  body.qn-smartfit-3 #qnPages .qn-exam-item{ margin:0 0 1px 0 !important; border-radius:5px !important; border-width:1px !important; }
  body.qn-smartfit-3 #qnPages .qn-exam-item-head{ padding:1px 4px !important; gap:2px !important; }
  body.qn-smartfit-3 #qnPages .qn-exam-item-no{ font-size:7.2pt !important; }
  body.qn-smartfit-3 #qnPages .qn-exam-item-label{ font-size:7.5pt !important; }
  body.qn-smartfit-3 #qnPages .qn-exam-item-body{ padding:1px 4px 1px !important; font-size:7.9pt !important; line-height:1.02 !important; }
  body.qn-smartfit-3 #qnPages .qn-exam-item-body p,
  body.qn-smartfit-3 #qnPages .qn-exam-item-body ul,
  body.qn-smartfit-3 #qnPages .qn-exam-item-body ol,
  body.qn-smartfit-3 #qnPages .qn-exam-item-body table,
  body.qn-smartfit-3 #qnPages .qn-exam-item-body .qn-block,
  body.qn-smartfit-3 #qnPages .qn-exam-item-body .question-block{ margin-bottom:0 !important; }

  html[data-qn-paper="Letter"][data-qn-ori="portrait"] body.qn-smartfit-2 #qnPages .qn-page-inner,
  html[data-qn-paper="Letter"][data-qn-ori="portrait"] body.qn-smartfit-3 #qnPages .qn-page-inner{ inset:2.4mm 2.7mm 2.8mm 2.7mm !important; }
}

/* ===== final-grade-cert-print-fix ===== */

@media print{
  /* only grade list / certificate print surfaces; do not touch questionnaire sizing */
  @page{ size:A4; margin:16mm 16mm 18mm 16mm !important; }

  /* hide print tools and modal chrome from paper */
  .export-header,
  .export-toolbar,
  .export-btn,
  #btnExcelPreview,
  #btnEditPreview,
  #btnCancelPreview,
  #btnFastMode,
  .v23-stylebar,
  .v23-toolbar,
  .v23-ico,
  .v23-style-sep,
  .toolbar,
  .tools,
  .actions,
  .topbar,
  .navbar,
  header{
    display:none !important;
  }

  html, body{
    background:#fff !important;
  }

  #v23UltraModal,
  .v23m-box,
  .v23m-head,
  .v23m-body,
  .v23m-actions{
    display:none !important;
    visibility:hidden !important;
  }

  #export-container{
    padding:0 !important;
    margin:0 !important;
    background:#fff !important;
  }

  .export-content{
    width:auto !important;
    min-height:auto !important;
    margin:0 auto !important;
    padding:14mm 16mm 16mm 16mm !important;
    box-sizing:border-box !important;
    background:#fff !important;
    box-shadow:none !important;
    border:0 !important;
  }

  .v23page{
    width:auto !important;
    min-height:auto !important;
    height:auto !important;
    margin:0 auto 6mm auto !important;
    padding-top:max(14mm, var(--v23-page-pt, 8mm)) !important;
    padding-bottom:max(16mm, var(--v23-page-pb, 8mm)) !important;
    padding-left:max(16mm, var(--v23-page-ps, 8mm)) !important;
    padding-right:max(16mm, var(--v23-page-ps, 8mm)) !important;
    box-sizing:border-box !important;
    background:#fff !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .export-content table,
  .v23page table{
    width:100% !important;
  }

  .export-content th,
  .export-content td,
  .v23page th,
  .v23page td{
    padding:6px 4px !important;
  }
}