:root {
      --blue: #1a3a6b;
      --blue-light: #2563eb;
      --red: #c42032;
      --orange: #e8772e;
      --dark: #0a0e1a;
      --text: #1e293b;
      --text-light: #64748b;
      --br: 18px;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Plus Jakarta Sans', sans-serif; background: #0a0e1a; min-height: 100vh; color: #1e293b; display: flex; justify-content: center; padding: 6px; overflow-x: hidden; }

    /* ====== ANIMATED OUTER FRAME (matching app.html) ====== */
    .app-frame {
      position: relative;
      width: 100%;
      max-width: 520px;
      min-height: 100vh;
      border-radius: 30px;
      overflow: hidden;
    }
    .app-frame::before, .app-frame::after { display: none; }
    .app-inner {
      position: relative;
      background: #f8fafc;
      border-radius: 25px;
      min-height: calc(100vh - 12px);
      margin: 5px;
      overflow: hidden;
      z-index: 1;
    }

    /* Expand app on tablets and desktops */
    @media (min-width: 768px) {
      body { padding: 0; display: block; }
      .app-frame {
        max-width: 100%;
        margin: 0 auto;
        border-radius: 0;
      }
      .app-inner {
        border-radius: 0;
        margin: 0;
        min-height: 100vh;
      }
      .container { max-width: 900px; margin: 0 auto; }
      .header { padding: 20px 0 12px; }
    }

    .container { max-width: 100%; margin: 0 auto; padding: 20px; min-height: 100%; }
    .screen { display: none; }
    .screen.active { display: flex !important; flex-direction: column; }
    .header { text-align: center; padding: 12px 0 8px; }
    .logo { font-size: 50px; margin-bottom: 10px; }
    .logo-img { max-width: 100px; height: auto; margin-bottom: 5px; }
    h1 { font-size: 24px; margin-bottom: 5px; font-weight: 800; color: var(--text); }
    h2 { font-size: 20px; color: var(--red); margin-bottom: 10px; font-weight: 700; }
    .subtitle { color: var(--text-light); font-size: 14px; }
    .card { background: #ffffff; border-radius: var(--br); padding: 14px; margin: 6px 0; box-shadow: 0 4px 20px rgba(0,0,0,0.06); border: 1px solid rgba(226,232,240,0.6); transition: all 0.3s ease; }
    .card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.1); transform: translateY(-1px); }
    .form-group { margin-bottom: 18px; }
    .form-group label { display: block; margin-bottom: 8px; color: var(--text-light); font-size: 13px; font-weight: 600; letter-spacing: 0.3px; }
    .form-group input { width: 100%; padding: 14px 16px; border: 2px solid #e2e8f0; border-radius: 12px; background: #f8fafc; color: var(--text); font-size: 15px; font-family: 'Plus Jakarta Sans', sans-serif; transition: all 0.3s; }
    .form-group input::placeholder { color: #94a3b8; }
    .form-group input:focus { outline: none; border-color: var(--orange); background: #fff; box-shadow: 0 0 0 4px rgba(232,119,46,0.12); }
    .btn { width: 100%; padding: 12px; border: none; border-radius: 14px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.3px; }
    .btn-primary { background: linear-gradient(135deg, var(--red), #a01a2a); color: white; box-shadow: 0 4px 15px rgba(196,32,50,0.3); }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(196,32,50,0.4); }
    .btn-secondary { background: rgba(226,232,240,0.5); color: var(--text); margin-top: 6px; border: 1px solid #e2e8f0; backdrop-filter: blur(4px); }
    .btn-secondary:hover { background: #e2e8f0; }
    .level-card { background: #ffffff; border-radius: 16px; padding: 16px 18px; margin: 8px 0; cursor: pointer; transition: all 0.3s ease; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 12px rgba(0,0,0,0.05); border: 1px solid rgba(226,232,240,0.6); }
    .level-card:hover { background: #f8fafc; transform: translateX(5px); border-color: var(--orange); box-shadow: 0 4px 20px rgba(232,119,46,0.15); }
    .level-info h3 { font-size: 16px; margin-bottom: 5px; font-weight: 700; }
    .level-icon { font-size: 30px; }
    .progress-bar { height: 8px; background: #e2e8f0; border-radius: 8px; margin-top: 10px; overflow: hidden; }
    .progress-fill { height: 100%; background: linear-gradient(90deg, var(--orange), #f39c12); border-radius: 8px; transition: width 0.5s; }
    .progress-text { font-size: 12px; color: var(--text-light); margin-top: 5px; }
    .question-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
    .question-count { background: rgba(226,232,240,0.7); padding: 8px 15px; border-radius: 20px; font-size: 13px; color: var(--text); font-weight: 600; backdrop-filter: blur(4px); }
    .question-category { background: linear-gradient(135deg, var(--orange), #f39c12); padding: 5px 12px; border-radius: 15px; font-size: 11px; color: #fff; font-weight: 700; }
    .question-text { font-size: 18px; line-height: 1.6; margin-bottom: 25px; padding: 20px; background: #f8fafc; border-radius: 16px; border: 1px solid #e2e8f0; }
    .options { display: flex; flex-direction: column; gap: 10px; }
    .option { padding: 16px; background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 14px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 14px; }
    .option:hover:not(.disabled) { background: #fff; border-color: var(--orange); box-shadow: 0 4px 15px rgba(232,119,46,0.12); }
    .option.correct { background: rgba(39,174,96,0.15); border-color: #27ae60; }
    .option.incorrect { background: rgba(231,76,60,0.15); border-color: #e74c3c; }
    .option.disabled { cursor: not-allowed; opacity: 0.7; }
    .option-letter { width: 34px; height: 34px; background: linear-gradient(135deg, #e2e8f0, #cbd5e1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; font-size: 13px; }
    .option.correct .option-letter { background: linear-gradient(135deg, #27ae60, #2ecc71); color: #fff; }
    .option.incorrect .option-letter { background: linear-gradient(135deg, #e74c3c, #c0392b); color: #fff; }
    .feedback { margin-top: 20px; padding: 15px; border-radius: 12px; display: none; }
    .feedback.show { display: block; }
    .feedback.correct { background: rgba(39,174,96,0.2); border: 1px solid #27ae60; }
    .feedback.incorrect { background: rgba(231,76,60,0.2); border: 1px solid #e74c3c; }
    .results { text-align: center; }
    .score-circle { width: 180px; height: 180px; margin: 30px auto; position: relative; }
    .score-circle svg { transform: rotate(-90deg); }
    .score-bg { fill: none; stroke: #e2e8f0; stroke-width: 12; }
    .score-fill { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1s ease-out; }
    .score-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
    .score-value { font-size: 48px; font-weight: bold; }
    .score-label { font-size: 14px; color: #64748b; }
    .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 25px 0; }
    .stat { background: #f8fafc; padding: 18px 10px; border-radius: 16px; text-align: center; border: 1px solid rgba(226,232,240,0.6); }
    .stat-value { font-size: 26px; font-weight: 800; }
    .stat-label { font-size: 11px; color: var(--text-light); margin-top: 5px; font-weight: 500; }
    .stat.correct .stat-value { color: #27ae60; }
    .stat.incorrect .stat-value { color: #e74c3c; }
    .stat.time .stat-value { color: #3498db; }
    .greeting { font-size: 16px; color: var(--orange); margin-bottom: 5px; font-weight: 600; }
    .back-btn { background: rgba(226,232,240,0.7); border: none; color: var(--text); padding: 10px 18px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; font-family: 'Plus Jakarta Sans', sans-serif; transition: all 0.3s; backdrop-filter: blur(4px); }
    .back-btn:hover { background: #cbd5e1; }
    .quiz-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
    /* Study Sections Styles */
    .study-category-card { background: #ffffff; border-radius: var(--br); padding: 18px; margin: 10px 0; cursor: pointer; transition: all 0.3s ease; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 12px rgba(0,0,0,0.04); border: 1px solid rgba(226,232,240,0.6); }
    .study-category-card:hover { background: #f8fafc; transform: translateX(5px); border-color: var(--orange); box-shadow: 0 4px 20px rgba(232,119,46,0.12); }
    .study-category-info h3 { font-size: 16px; margin-bottom: 4px; font-weight: 700; }
    .study-category-info p { font-size: 13px; color: var(--text-light); }
    .study-category-icon { font-size: 28px; }
    .study-question-card { background: #f8fafc; border-radius: 14px; padding: 18px; margin: 12px 0; border-left: 4px solid var(--orange); }
    .study-question-text { font-size: 16px; line-height: 1.6; margin-bottom: 15px; color: var(--text); }
    .study-options { margin-bottom: 15px; }
    .study-option { padding: 12px 14px; margin: 8px 0; background: #ffffff; border-radius: 10px; display: flex; align-items: center; gap: 12px; }
    .study-option.correct-answer { background: rgba(39,174,96,0.12); border: 1px solid #27ae60; }
    .study-option-letter { width: 28px; height: 28px; background: linear-gradient(135deg, #e2e8f0, #cbd5e1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
    .study-option.correct-answer .study-option-letter { background: linear-gradient(135deg, #27ae60, #2ecc71); color: #fff; }
    .study-explanation { background: rgba(232,119,46,0.08); border-radius: 10px; padding: 14px; margin-top: 10px; border-left: 3px solid var(--orange); }
    .study-explanation-title { font-weight: 700; color: var(--orange); margin-bottom: 5px; font-size: 13px; }
    .study-explanation-text { color: var(--text-light); font-size: 13px; line-height: 1.6; }
    .study-question-number { background: linear-gradient(135deg, var(--orange), #f39c12); color: #fff; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; display: inline-block; margin-bottom: 10px; }
    .study-level-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
    .study-level-tab { padding: 8px 16px; background: rgba(226,232,240,0.6); border: none; border-radius: 20px; color: var(--text); cursor: pointer; transition: all 0.3s; font-size: 13px; font-weight: 600; font-family: 'Plus Jakarta Sans', sans-serif; }
    .study-level-tab:hover { background: #cbd5e1; }
    .study-level-tab.active { background: linear-gradient(135deg, var(--orange), #f39c12); color: #fff; box-shadow: 0 4px 12px rgba(232,119,46,0.3); }
    .study-back-nav { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
    .study-breadcrumb { color: #64748b; font-size: 14px; }
    /* Video Lesson Styles */
    .video-lesson-card { background: #ffffff; border-radius: var(--br); padding: 18px; margin: 10px 0; cursor: pointer; transition: all 0.3s ease; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 12px rgba(0,0,0,0.04); border: 1px solid rgba(226,232,240,0.6); }
    .video-lesson-card:hover { background: #f8fafc; transform: translateX(5px); border-color: var(--blue-light); box-shadow: 0 4px 20px rgba(37,99,235,0.1); }
    .video-lesson-info h3 { font-size: 16px; margin-bottom: 4px; font-weight: 700; }
    .video-lesson-info p { font-size: 13px; color: var(--text-light); }
    .video-lesson-icon { font-size: 30px; }
    .video-lesson-progress { margin-top: 8px; }
    .video-progress-bar { height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; }
    .video-progress-fill { height: 100%; background: #27ae60; border-radius: 3px; transition: width 0.3s; }
    .video-progress-text { font-size: 11px; color: #64748b; margin-top: 4px; }
    .video-player-container { background: #000; border-radius: 12px; overflow: hidden; margin-bottom: 20px; position: relative; }
    .video-player-container video { width: 100%; display: block; }
    .video-player-container iframe { width: 100%; aspect-ratio: 16/9; border: none; display: block; }
    .video-info { margin-bottom: 20px; }
    .video-title { font-size: 20px; margin-bottom: 8px; }
    .video-description { color: #64748b; font-size: 14px; line-height: 1.5; }
    .video-controls { display: flex; flex-direction: column; gap: 10px; }
    .video-status { display: flex; align-items: center; gap: 10px; padding: 15px; background: #f8fafc; border-radius: 12px; margin-bottom: 15px; }
    .video-status-icon { font-size: 24px; }
    .video-status-text { flex: 1; }
    .video-status-title { font-weight: bold; }
    .video-status-detail { font-size: 12px; color: #64748b; }
    .video-completed-badge { background: rgba(39,174,96,0.2); border: 1px solid #27ae60; }
    .video-in-progress-badge { background: rgba(243,156,18,0.2); border: 1px solid #f39c12; }
    .btn-video-primary { background: linear-gradient(135deg, #27ae60, #2ecc71); }
    .btn-video-primary:hover { box-shadow: 0 10px 30px rgba(39,174,96,0.3); }
    .btn-video-completed { background: rgba(39,174,96,0.3); border: 2px solid #27ae60; cursor: default; }
    .btn-video-secondary { background: #f0f2f5; border: 1px solid #e2e8f0; color: #1e293b; }
    .btn-video-secondary:hover { background: #e2e8f0; }
    .video-lesson-completed { border-left: 4px solid #27ae60; }
    /* YouTube Video Integration Styles */
    .video-level-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 15px; justify-content: center; }
    .video-level-tab { padding: 8px 14px; background: rgba(226,232,240,0.6); border: none; border-radius: 20px; color: var(--text); cursor: pointer; transition: all 0.3s; font-size: 12px; font-weight: 600; font-family: 'Plus Jakarta Sans', sans-serif; }
    .video-level-tab:hover { background: #cbd5e1; }
    .video-level-tab.active { background: linear-gradient(135deg, var(--orange), #f39c12); color: #fff; font-weight: 700; box-shadow: 0 4px 12px rgba(232,119,46,0.3); }
    .video-progress-summary { display: flex; justify-content: space-between; padding: 12px 15px; background: #f8fafc; border-radius: 10px; margin-bottom: 15px; font-size: 14px; }
    .video-category-section { margin-bottom: 20px; }
    .video-category-header { background: rgba(243,156,18,0.2); padding: 12px 15px; border-radius: 10px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
    .video-category-header h3 { font-size: 16px; color: #f39c12; margin: 0; }
    .video-card { background: #ffffff; border-radius: 14px; padding: 12px; margin-bottom: 10px; cursor: pointer; transition: all 0.3s ease; display: flex; gap: 12px; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.04); border: 1px solid rgba(226,232,240,0.5); }
    .video-card:hover { background: #f8fafc; transform: translateX(4px); border-color: var(--orange); }
    .video-thumbnail { width: 120px; height: 68px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: rgba(0,0,0,0.3); }
    .video-card-info { flex: 1; min-width: 0; }
    .video-card-info h4 { font-size: 14px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .video-card-info p { font-size: 12px; color: #64748b; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .video-card-meta { font-size: 11px; color: #888; display: flex; gap: 10px; }
    .video-card.completed { border-left: 3px solid #27ae60; }
    .video-card.in-progress { border-left: 3px solid #f39c12; }
    .youtube-embed { width: 100%; aspect-ratio: 16/9; border: none; border-radius: 12px; }
    .video-lesson-in-progress { border-left: 4px solid #f39c12; }
    /* Certificates Styles */
    .cert-qr-code { margin: 8px auto 0; }
    .cert-qr-code svg { display: block; margin: 0 auto; }
    .share-cert-btns { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
    .share-cert-btn { padding: 8px 14px; border: none; border-radius: 8px; font-size: 12px; font-weight: bold; cursor: pointer; color: white; display: flex; align-items: center; gap: 5px; }
    .share-cert-btn.whatsapp { background: #25D366; }
    .share-cert-btn.facebook { background: #1877F2; }
    .share-cert-btn.twitter { background: #1DA1F2; }
    .share-cert-btn.linkedin { background: #0A66C2; }
    .share-cert-btn.copy-link { background: #64748b; }
    .cert-congrats-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; animation: fadeIn 0.3s; }
    @keyframes maestroShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    @keyframes confettiFall { 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } }
    .confetti-piece { position: fixed; width: 10px; height: 10px; top: -10px; animation: confettiFall 3s ease-in forwards; z-index: 10000; }

    /* Loading Spinner */
    @keyframes mcSpinner { to { transform: rotate(360deg); } }
    .mc-loading { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;gap:10px; }
    .mc-loading::before { content:'';width:28px;height:28px;border:3px solid #e2e8f0;border-top-color:#6366f1;border-radius:50%;animation:mcSpinner 0.7s linear infinite; }
    .mc-loading-text { font-size:12px;color:#94a3b8; }

    /* Admin AI Global Assistant */
    @keyframes adminAIPulse { 0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,0.5);} 50%{box-shadow:0 0 0 12px rgba(139,92,246,0);} }
    @keyframes adminAISlideUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
    #adminAIToggleBtn { display:none; position:fixed; bottom:24px; right:24px; width:56px; height:56px; border-radius:50%; border:none; background:linear-gradient(135deg,#8b5cf6,#6366f1); color:#fff; font-size:26px; cursor:pointer; z-index:9990; animation:adminAIPulse 2.5s infinite; transition:transform 0.2s; }
    #adminAIToggleBtn:hover { transform:scale(1.1); }
    #adminAIPanel { display:none; position:fixed; bottom:90px; right:24px; width:380px; max-height:520px; background:#fff; border-radius:16px; box-shadow:0 8px 32px rgba(0,0,0,0.18); z-index:9991; flex-direction:column; overflow:hidden; animation:adminAISlideUp 0.3s ease-out; }
    .ai-panel-header { background:linear-gradient(135deg,#8b5cf6,#6366f1); color:#fff; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; }
    .ai-panel-header-title { font-size:14px; font-weight:700; display:flex; align-items:center; gap:8px; }
    .ai-panel-header-tab { font-size:10px; background:rgba(255,255,255,0.2); padding:2px 8px; border-radius:8px; }
    .ai-panel-header-actions { display:flex; gap:6px; }
    .ai-panel-header-actions button { background:rgba(255,255,255,0.2); border:none; color:#fff; width:28px; height:28px; border-radius:6px; cursor:pointer; font-size:13px; }
    .ai-panel-header-actions button:hover { background:rgba(255,255,255,0.35); }
    .ai-panel-presets { padding:8px 12px; display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid #f1f5f9; }
    .ai-panel-presets button { padding:4px 10px; border-radius:8px; border:1px solid #c7d2fe; background:#eef2ff; color:#4338ca; cursor:pointer; font-size:10px; font-weight:500; transition:background 0.15s; }
    .ai-panel-presets button:hover { background:#c7d2fe; }
    .ai-panel-messages { flex:1; overflow-y:auto; padding:12px; min-height:150px; max-height:340px; }
    .ai-panel-messages .ai-msg-md strong { font-weight:700; }
    .ai-panel-messages .ai-msg-md ul,.ai-panel-messages .ai-msg-md ol { padding-left:16px; margin:4px 0; }
    .ai-panel-messages .ai-msg-md code { background:#e2e8f0; padding:1px 4px; border-radius:3px; font-size:10px; }
    .ai-panel-messages .ai-msg-md p { margin:4px 0; }
    .ai-panel-attachments { padding:6px 12px; border-top:1px solid #f1f5f9; display:flex; gap:6px; flex-wrap:wrap; }
    .ai-attach-thumb { position:relative; width:52px; height:52px; border-radius:8px; overflow:hidden; border:1px solid #e2e8f0; }
    .ai-attach-thumb img { width:100%; height:100%; object-fit:cover; }
    .ai-attach-thumb .ai-attach-remove { position:absolute; top:-4px; right:-4px; width:18px; height:18px; background:#ef4444; color:#fff; border:none; border-radius:50%; font-size:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; }
    .ai-attach-thumb .ai-attach-file-icon { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#f1f5f9; font-size:20px; }
    .ai-panel-input { display:flex; gap:6px; padding:10px 12px; border-top:1px solid #f1f5f9; align-items:flex-end; }
    .ai-panel-input textarea { flex:1; padding:8px 12px; border:1px solid #e2e8f0; border-radius:8px; font-size:12px; outline:none; resize:none; max-height:80px; min-height:34px; line-height:1.4; font-family:inherit; }
    .ai-panel-input textarea:focus { border-color:#8b5cf6; }
    .ai-panel-input button { padding:8px 12px; border-radius:8px; border:none; background:#8b5cf6; color:#fff; cursor:pointer; font-size:14px; font-weight:600; min-height:34px; }
    .ai-panel-input button:hover { background:#7c3aed; }
    .ai-attach-btn { cursor:pointer; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; background:#f1f5f9; font-size:16px; transition:background 0.15s; flex-shrink:0; }
    .ai-attach-btn:hover { background:#e2e8f0; }
    .ai-drag-overlay { position:absolute; inset:0; background:rgba(139,92,246,0.9); border-radius:16px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; font-weight:700; z-index:10; pointer-events:none; }
    .ai-nav-btn { display:inline-block; margin:3px 2px; padding:3px 8px; border-radius:6px; border:1px solid #c7d2fe; background:#eef2ff; color:#4338ca; cursor:pointer; font-size:10px; font-weight:600; transition:background 0.15s; }
    .ai-nav-btn:hover { background:#c7d2fe; }
    .ai-user-img { max-width:100%; border-radius:6px; margin-top:4px; max-height:120px; }
    @media (max-width:480px) {
      #adminAIPanel { left:8px; right:8px; width:auto; bottom:84px; max-height:70vh; }
      #adminAIToggleBtn { bottom:16px; right:16px; width:50px; height:50px; font-size:22px; }
    }

    /* Onboarding Styles */
    .onboarding-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.95); z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 20px; }
    .onboarding-card { background: linear-gradient(135deg, #1a1a2e, #16213e); border-radius: 20px; padding: 30px; max-width: 420px; width: 100%; text-align: center; border: 2px solid #f39c12; max-height: 90vh; overflow-y: auto; }
    .onboarding-step { display: none; }
    .onboarding-step.active { display: block; }
    .onboarding-dots { display: flex; justify-content: center; gap: 8px; margin: 20px 0 15px; }
    .onboarding-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.2); transition: all 0.3s; }
    .onboarding-dot.active { background: #f39c12; transform: scale(1.3); }
    .onboarding-dot.completed { background: #27ae60; }
    .certificates-header { text-align: center; padding: 20px 0; }
    .certificate-card { background: #ffffff; border-radius: 15px; padding: 25px; margin: 15px 0; border: 2px solid rgba(255,215,0,0.3); position: relative; overflow: hidden; }
    .certificate-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #f39c12, #ffd700, #f39c12); }
    .certificate-badge { width: 70px; height: 70px; background: linear-gradient(135deg, #ffd700, #f39c12); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 35px; margin: 0 auto 15px; box-shadow: 0 4px 15px rgba(243,156,18,0.4); }
    .certificate-level { font-size: 22px; font-weight: bold; color: #ffd700; margin-bottom: 5px; text-align: center; }
    .certificate-title { font-size: 14px; color: #64748b; text-align: center; margin-bottom: 15px; }
    .certificate-details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }
    .certificate-detail { background: #f8fafc; padding: 12px; border-radius: 8px; text-align: center; }
    .certificate-detail-label { font-size: 11px; color: #64748b; margin-bottom: 3px; }
    .certificate-detail-value { font-size: 16px; font-weight: bold; color: #1e293b; }
    .certificate-id { font-size: 10px; color: #94a3b8; text-align: center; margin-top: 15px; font-family: monospace; }
    .btn-print-cert { margin-top: 15px; background: linear-gradient(135deg, #3498db, #2980b9); font-size: 14px; padding: 12px; }
    .btn-print-cert:hover { background: linear-gradient(135deg, #2980b9, #1f6dad); }
    
    /* Print Certificate Styles */
    @media print {
      body * { visibility: hidden; }
      #printableCertificate, #printableCertificate * { visibility: visible; }
      #printableCertificate { position: absolute; left: 0; top: 0; width: 100%; }
    }
    
    .printable-certificate {
      display: none;
      width: 800px;
      min-height: 600px;
      margin: 0 auto;
      background: white;
      padding: 40px;
      font-family: 'Georgia', serif;
      color: #333;
      position: relative;
      border: 15px solid #1565C0;
      box-shadow: inset 0 0 0 5px #E31937, inset 0 0 0 10px #FFD700;
    }
    
    .cert-header { text-align: center; margin-bottom: 30px; }
    .cert-logo { max-width: 200px; height: auto; margin-bottom: 15px; }
    .cert-school-name { font-size: 28px; font-weight: bold; color: #1565C0; margin: 10px 0; letter-spacing: 2px; }
    .cert-subtitle { font-size: 14px; color: #666; letter-spacing: 1px; }
    
    .cert-body { text-align: center; margin: 30px 0; }
    .cert-title { font-size: 36px; color: #E31937; font-weight: bold; margin-bottom: 20px; letter-spacing: 3px; }
    .cert-level-badge { display: inline-block; background: linear-gradient(135deg, #FFD700, #FFA500); color: #333; padding: 10px 30px; border-radius: 25px; font-size: 20px; font-weight: bold; margin-bottom: 25px; }
    .cert-recipient { font-size: 16px; color: #666; margin-bottom: 10px; }
    .cert-recipient-name { font-size: 32px; color: #1565C0; font-weight: bold; border-bottom: 2px solid #1565C0; display: inline-block; padding-bottom: 5px; margin-bottom: 20px; }
    .cert-description { font-size: 14px; color: #555; line-height: 1.6; max-width: 600px; margin: 0 auto 25px; }
    
    .cert-details { display: flex; justify-content: space-around; margin: 30px 0; padding: 20px; background: #f9f9f9; border-radius: 10px; }
    .cert-detail-item { text-align: center; }
    .cert-detail-label { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; }
    .cert-detail-value { font-size: 18px; color: #333; font-weight: bold; margin-top: 5px; }
    
    .cert-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 40px; padding-top: 20px; border-top: 1px solid #ddd; }
    .cert-signature { text-align: center; }
    .cert-signature-line { width: 200px; border-bottom: 1px solid #333; margin-bottom: 5px; }
    .cert-signature-name { font-size: 14px; font-weight: bold; }
    .cert-signature-title { font-size: 11px; color: #666; }
    .cert-qr { text-align: center; }
    .cert-id-text { font-size: 10px; color: #888; margin-top: 10px; font-family: monospace; }
    
    .cert-seal { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 80px; height: 80px; border: 3px solid #FFD700; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(255,165,0,0.1)); }
    .cert-seal-text { font-size: 10px; text-align: center; color: #B8860B; font-weight: bold; text-transform: uppercase; }
    .cert-watermark { position: relative; }
    .cert-watermark::after { content: 'MUESTRA — VOID UNLESS PAYMENT IS RECEIVED'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-30deg); font-size: 36px; font-weight: 900; letter-spacing: 3px; color: rgba(220, 38, 38, 0.22); white-space: nowrap; z-index: 100; pointer-events: none; text-transform: uppercase; }
    .no-certificates { text-align: center; padding: 40px 20px; }
    .no-certificates-icon { font-size: 60px; margin-bottom: 20px; opacity: 0.5; }
    .no-certificates-text { color: #64748b; font-size: 16px; line-height: 1.6; }
    .certificates-nav-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(243,156,18,0.2)); border: 1px solid rgba(255,215,0,0.3); }
    .certificates-nav-btn:hover { background: linear-gradient(135deg, rgba(255,215,0,0.3), rgba(243,156,18,0.3)); }
    .certificate-earned-badge { position: absolute; top: 15px; right: 15px; background: #27ae60; color: white; padding: 5px 10px; border-radius: 12px; font-size: 11px; font-weight: bold; }
    /* Mi Perfil Styles */
    .profile-section { border-bottom: 1px solid #e2e8f0; padding-bottom: 20px; }
    .profile-section:last-of-type { border-bottom: none; }
    .profile-field { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f2f5; }
    .profile-field:last-child { border-bottom: none; }
    
    /* Avatar and Badge System */
    .profile-avatar-section { text-align: center; padding: 20px 0 30px; }
    .profile-avatar-container { position: relative; display: inline-block; }
    .profile-avatar { width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 60px; margin: 0 auto 15px; position: relative; box-shadow: 0 8px 32px rgba(0,0,0,0.15); border: 4px solid #e2e8f0; }
    .profile-avatar.nivel-nuevo { background: linear-gradient(135deg, #607D8B, #455A64); }
    .profile-avatar.nivel-principiante { background: linear-gradient(135deg, #4CAF50, #2E7D32); }
    .profile-avatar.nivel-intermedio { background: linear-gradient(135deg, #2196F3, #1565C0); }
    .profile-avatar.nivel-avanzado { background: linear-gradient(135deg, #9C27B0, #6A1B9A); }
    .profile-avatar.nivel-elite { background: linear-gradient(135deg, #FF9800, #E65100); }
    .profile-avatar.nivel-platino { background: linear-gradient(135deg, #FFD700, #FFA000); border-color: #FFD700; }
    .profile-badge { position: absolute; bottom: -5px; right: -5px; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); border: 3px solid #e2e8f0; }
    .profile-badge.badge-nuevo { background: linear-gradient(135deg, #607D8B, #455A64); }
    .profile-badge.badge-principiante { background: linear-gradient(135deg, #4CAF50, #2E7D32); }
    .profile-badge.badge-intermedio { background: linear-gradient(135deg, #2196F3, #1565C0); }
    .profile-badge.badge-avanzado { background: linear-gradient(135deg, #9C27B0, #6A1B9A); }
    .profile-badge.badge-elite { background: linear-gradient(135deg, #FF9800, #E65100); }
    .profile-badge.badge-platino { background: linear-gradient(135deg, #FFD700, #FFA000); }
    .profile-level-title { font-size: 22px; font-weight: bold; margin-bottom: 5px; }
    .profile-level-title.titulo-nuevo { color: #90A4AE; }
    .profile-level-title.titulo-principiante { color: #81C784; }
    .profile-level-title.titulo-intermedio { color: #64B5F6; }
    .profile-level-title.titulo-avanzado { color: #BA68C8; }
    .profile-level-title.titulo-elite { color: #FFB74D; }
    .profile-level-title.titulo-platino { color: #FFD700; text-shadow: 0 0 10px rgba(255,215,0,0.5); }
    .profile-level-subtitle { color: #64748b; font-size: 14px; }
    .profile-progress-bar { width: 80%; max-width: 250px; height: 8px; background: #e2e8f0; border-radius: 4px; margin: 15px auto 5px; overflow: hidden; }
    .profile-progress-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
    .profile-progress-fill.progress-nuevo { background: #607D8B; }
    .profile-progress-fill.progress-principiante { background: linear-gradient(90deg, #4CAF50, #81C784); }
    .profile-progress-fill.progress-intermedio { background: linear-gradient(90deg, #2196F3, #64B5F6); }
    .profile-progress-fill.progress-avanzado { background: linear-gradient(90deg, #9C27B0, #BA68C8); }
    .profile-progress-fill.progress-elite { background: linear-gradient(90deg, #FF9800, #FFB74D); }
    .profile-progress-fill.progress-platino { background: linear-gradient(90deg, #FFD700, #FFEB3B); }
    .profile-progress-text { color: #64748b; font-size: 12px; }
    .profile-badges-earned { display: flex; justify-content: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
    .mini-badge { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; opacity: 0.3; transition: all 0.3s; }
    .mini-badge.earned { opacity: 1; box-shadow: 0 4px 15px rgba(0,0,0,0.3); transform: scale(1.1); }
    .mini-badge.badge-principiante { background: linear-gradient(135deg, #4CAF50, #2E7D32); }
    .mini-badge.badge-intermedio { background: linear-gradient(135deg, #2196F3, #1565C0); }
    .mini-badge.badge-avanzado { background: linear-gradient(135deg, #9C27B0, #6A1B9A); }
    .mini-badge.badge-elite { background: linear-gradient(135deg, #FF9800, #E65100); }
    .mini-badge.badge-platino { background: linear-gradient(135deg, #FFD700, #FFA000); }
    .profile-label { color: #64748b; font-size: 14px; }
    .profile-value { color: #1e293b; font-size: 14px; font-weight: 500; text-align: right; max-width: 60%; word-break: break-word; }
    .technician-number-card { background: linear-gradient(135deg, rgba(243,156,18,0.2) 0%, rgba(230,126,34,0.2) 100%); border: 2px solid rgba(243,156,18,0.5); border-radius: 15px; padding: 25px; text-align: center; margin-top: 10px; }
    .technician-number-value { font-size: 24px; font-weight: bold; color: #f39c12; font-family: monospace; letter-spacing: 2px; margin-bottom: 10px; word-break: break-all; }
    .technician-number-date { font-size: 12px; color: #64748b; }
    .profile-nav-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, rgba(52,152,219,0.2), rgba(41,128,185,0.2)); border: 1px solid rgba(52,152,219,0.3); }
    .profile-nav-btn:hover { background: linear-gradient(135deg, rgba(52,152,219,0.3), rgba(41,128,185,0.3)); }
    /* Login Screen Styles */
    /* ========== MAINTENANCE BANNER ========== */
    .maintenance-overlay {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(15, 23, 42, 0.85);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      z-index: 9999; display: flex; align-items: center; justify-content: center;
      padding: 20px;
    }
    .maintenance-card {
      background: #ffffff; border-radius: 20px; padding: 40px 30px;
      max-width: 420px; width: 100%; text-align: center;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
      position: relative; overflow: hidden;
      animation: maintSlideUp 0.6s ease;
    }
    @keyframes maintSlideUp {
      from { opacity: 0; transform: translateY(40px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .maintenance-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
      background: linear-gradient(90deg, #E31937, #f39c12, #E31937);
      background-size: 200% 100%;
      animation: maintShimmer 2s ease-in-out infinite;
    }
    @keyframes maintShimmer {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }
    .maint-icon {
      width: 80px; height: 80px; margin: 0 auto 20px;
      background: linear-gradient(135deg, #E31937, #f39c12);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-size: 40px;
      animation: maintPulse 2s ease-in-out infinite;
      box-shadow: 0 8px 30px rgba(227, 25, 55, 0.3);
    }
    @keyframes maintPulse {
      0%, 100% { transform: scale(1); box-shadow: 0 8px 30px rgba(227,25,55,0.3); }
      50% { transform: scale(1.08); box-shadow: 0 12px 40px rgba(227,25,55,0.5); }
    }
    .maint-status {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(227,25,55,0.1); border: 1px solid rgba(227,25,55,0.3);
      border-radius: 50px; padding: 6px 16px; margin-bottom: 16px;
      font-size: 11px; font-weight: 700; color: #E31937;
      text-transform: uppercase; letter-spacing: 1.5px;
    }
    .maint-dot {
      width: 8px; height: 8px; background: #E31937; border-radius: 50%;
      animation: maintBlink 1.2s ease-in-out infinite;
    }
    @keyframes maintBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
    .maintenance-card h2 {
      font-size: 24px; color: #1e293b; margin-bottom: 12px; line-height: 1.3;
    }
    .maintenance-card h2 span { color: #E31937; }
    .maintenance-card .maint-msg {
      font-size: 15px; color: #64748b; line-height: 1.7; margin-bottom: 24px;
    }
    .maintenance-card .maint-msg strong { color: #1e293b; }
    .maint-progress {
      margin-bottom: 20px;
    }
    .maint-progress-label {
      display: flex; justify-content: space-between;
      font-size: 11px; color: #94a3b8; font-weight: 600; margin-bottom: 6px;
    }
    .maint-progress-bar {
      height: 6px; background: #e2e8f0; border-radius: 50px; overflow: hidden;
    }
    .maint-progress-fill {
      height: 100%; width: 30%;
      background: linear-gradient(90deg, #E31937, #f39c12);
      border-radius: 50px;
      animation: maintProgress 3s ease-in-out infinite;
    }
    @keyframes maintProgress {
      0% { width: 20%; } 50% { width: 60%; } 100% { width: 20%; }
    }
    .maint-gears {
      display: flex; justify-content: center; gap: 2px; margin-bottom: 8px;
    }
    .maint-gear { font-size: 22px; display: inline-block; }
    .maint-gear-1 { animation: spin 3s linear infinite; }
    .maint-gear-2 { animation: spin 3s linear infinite reverse; margin-top: 6px; font-size: 18px; }
    @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
    .maint-footer {
      font-size: 11px; color: #94a3b8; padding-top: 16px;
      border-top: 1px solid #e2e8f0;
    }
    .maint-footer strong { color: #64748b; }
    .maint-brand {
      font-size: 12px; color: #94a3b8; letter-spacing: 2px;
      text-transform: uppercase; margin-bottom: 4px; font-weight: 600;
    }
    /* ========== END MAINTENANCE ========== */

    /* FLOATING HOME BUTTON */
    .home-fab{position:fixed;top:16px;right:16px;z-index:800;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid rgba(243,156,18,0.4);color:#f39c12;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(0,0,0,0.3);transition:all 0.3s}
    .home-fab:hover{transform:scale(1.1);border-color:#f39c12;box-shadow:0 4px 20px rgba(243,156,18,0.3)}

    /* AI PAYWALL MODAL */
    .paywall-overlay{position:fixed;inset:0;z-index:10000;background:rgba(10,10,20,0.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px}
    .paywall-overlay.active{display:flex}
    .paywall-card{background:#fff;border-radius:20px;max-width:400px;width:100%;padding:36px 28px;text-align:center;position:relative;overflow:hidden;animation:pwSlide 0.4s ease}
    @keyframes pwSlide{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
    .paywall-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#E31937,#f39c12)}
    .pw-icon{font-size:50px;margin-bottom:12px}
    .pw-title{font-size:22px;font-weight:800;color:#1e293b;margin-bottom:6px}
    .pw-subtitle{font-size:14px;color:#64748b;margin-bottom:20px}
    .pw-features{text-align:left;margin-bottom:24px}
    .pw-feature{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;color:#334155}
    .pw-feature span{color:#27ae60;font-size:16px}
    .pw-price{font-size:32px;font-weight:800;color:#E31937;margin-bottom:4px}
    .pw-period{font-size:13px;color:#94a3b8;margin-bottom:20px}
    .pw-btn{width:100%;padding:16px;border:none;border-radius:12px;background:linear-gradient(135deg,#E31937,#C62828);color:#fff;font-size:17px;font-weight:700;cursor:pointer;transition:all 0.2s}
    .pw-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(227,25,55,0.3)}
    .pw-close{margin-top:14px;background:none;border:none;color:#94a3b8;font-size:14px;cursor:pointer;padding:8px}
    .pw-close:hover{color:#64748b}

    /* AI CHARACTER COUNTER */
    .ai-chars-banner{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:799;background:rgba(26,26,46,0.95);border:1px solid rgba(243,156,18,0.3);border-radius:50px;padding:6px 16px;font-size:12px;color:#f39c12;font-weight:600;display:none;align-items:center;gap:6px;box-shadow:0 4px 15px rgba(0,0,0,0.3);white-space:nowrap}
    .ai-chars-banner.show{display:inline-flex}

    .login-error { color: #e74c3c; background: rgba(231,76,60,0.1); padding: 12px; border-radius: 10px; margin-bottom: 15px; text-align: center; display: none; font-size: 13px; }
    .login-error.show { display: block; }
    .form-group input[type="password"] { width: 100%; padding: 14px 16px; border: 2px solid #e2e8f0; border-radius: 12px; background: #f8fafc; color: var(--text); font-size: 15px; font-family: 'Plus Jakarta Sans', sans-serif; }
    /* Admin Section Styles */
    .admin-link { color: #f39c12; text-decoration: underline; cursor: pointer; font-size: 14px; margin-top: 15px; display: inline-block; }
    .admin-link:hover { color: #ffd700; }
    .admin-container { max-width: 1400px !important; width:100% !important; margin:0 auto; padding:15px 25px !important; min-height:100vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
    /* When admin dashboard is active, expand the parent container */
    #adminDashboardScreen.active { position:fixed; top:0; left:0; right:0; bottom:0; z-index:400; overflow:hidden; background:linear-gradient(135deg,#fef9f0,#fff7ed); width:100vw !important; max-width:100vw !important; padding:0; height:100vh; display:block !important; }
    #adminTechnicianProfileScreen.active { position:fixed; top:0; left:0; right:0; bottom:0; z-index:400; overflow-y:auto; background:linear-gradient(135deg,#fef9f0,#fff7ed); width:100vw !important; max-width:100vw !important; padding:0; height:100vh; display:block !important; }
    .admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 15px; }
    .admin-title { display: flex; align-items: center; gap: 10px; }
    .admin-title h1 { font-size: 24px; margin: 0; }
    .admin-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 25px; }
    .admin-stat-card { background: #f8fafc; border-radius: 12px; padding: 20px; text-align: center; transition: transform 0.2s, background 0.2s; }
    .admin-stat-card:hover { background: #ffffff; transform: translateY(-2px); }
    .admin-stat-value { font-size: 32px; font-weight: bold; color: #f39c12; }
    .admin-stat-label { font-size: 12px; color: #64748b; margin-top: 5px; }
    .admin-section { background: #f8fafc; border-radius: 15px; padding: 20px; margin-bottom: 20px; }
    .admin-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; color: #1e293b; }
    .admin-section-title { font-size: 15px; font-weight: 700; color: #1e293b; letter-spacing:0.3px; }
    .admin-nav-btn { background:#ffffff;border:1px solid #e2e8f0;color:#64748b;padding:6px 12px;border-radius:8px;font-size:10px;cursor:pointer;transition:all 0.2s;font-weight:500; }
    .admin-nav-btn:hover { background:#f39c12;color:#ffffff;border-color:#f39c12;box-shadow:0 2px 8px rgba(243,156,18,0.3); }
    /* Admin 2-column layout for wide screens */
    .admin-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .admin-grid-full { grid-column: 1 / -1; }
    /* Force landscape message on mobile portrait */
    .admin-landscape-msg { display:none; text-align:center; padding:60px 20px; }
    .admin-landscape-msg .icon { font-size:60px; margin-bottom:15px; }
    .admin-landscape-msg p { color:#64748b; font-size:16px; line-height:1.6; }
    .admin-main-content { display:block; }
    @media (max-width: 768px) and (orientation: portrait) {
      .admin-landscape-msg { display:block; }
      .admin-main-content { display:none; }
    }
    @media (max-width: 900px) {
      .admin-grid-2col { grid-template-columns: 1fr; }
      .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
    }
    .technician-list { max-height: 400px; overflow-y: auto; }
    .technician-card { background: #ffffff; border-radius: 10px; padding: 15px; margin-bottom: 10px; cursor: pointer; transition: all 0.3s; border-left: 4px solid #3498db; }
    .technician-card:hover { background: #f8fafc; transform: translateX(5px); }
    .technician-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .technician-name { font-size: 16px; font-weight: bold; color: #1e293b; }
    .technician-id { font-size: 11px; color: #64748b; font-family: monospace; }
    .technician-meta { display: flex; gap: 15px; flex-wrap: wrap; font-size: 12px; color: #64748b; }
    .technician-meta-item { display: flex; align-items: center; gap: 5px; }
    .admin-filter-bar { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }
    .admin-filter-input { padding: 10px 15px; border: 1px solid #d1d5db; border-radius: 8px; background: #ffffff; color: #1e293b; font-size: 14px; flex: 1; min-width: 200px; }
    .admin-filter-input::placeholder { color: #94a3b8; }
    .admin-filter-select { padding: 10px 15px; border: 1px solid #d1d5db; border-radius: 8px; background: #ffffff; color: #1e293b; font-size: 14px; cursor: pointer; }
    .admin-filter-select option { background: #ffffff; color: #1e293b; }
    /* Admin Profile Detail */
    .admin-profile-card { background: #ffffff; border-radius: 15px; padding: 25px; margin-bottom: 20px; }
    .admin-profile-header { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #e2e8f0; }
    .admin-profile-avatar { width: 80px; height: 80px; background: linear-gradient(135deg, #f39c12, #e67e22); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36px; }
    .admin-profile-info h2 { margin: 0 0 5px 0; font-size: 22px; }
    .admin-profile-info p { margin: 0; color: #64748b; font-size: 14px; }
    .admin-profile-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
    .admin-detail-item { background: #f8fafc; padding: 12px; border-radius: 8px; }
    .admin-detail-label { font-size: 11px; color: #64748b; margin-bottom: 3px; text-transform: uppercase; }
    .admin-detail-value { font-size: 14px; color: #1e293b; font-weight: 500; }
    /* Progress Timeline */
    .progress-timeline { margin-top: 20px; }
    .timeline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
    .timeline-tabs { display: flex; gap: 8px; }
    .timeline-tab { padding: 8px 16px; border: none; border-radius: 20px; background: rgba(226,232,240,0.6); color: var(--text); cursor: pointer; font-size: 13px; transition: all 0.3s; font-weight: 600; font-family: 'Plus Jakarta Sans', sans-serif; }
    .timeline-tab:hover { background: #cbd5e1; }
    .timeline-tab.active { background: linear-gradient(135deg, var(--orange), #f39c12); color: #fff; box-shadow: 0 4px 12px rgba(232,119,46,0.3); }
    .timeline-content { background: #f8fafc; border-radius: 12px; padding: 20px; }
    .timeline-entry { display: flex; gap: 15px; padding: 15px 0; border-bottom: 1px solid #e2e8f0; }
    .timeline-entry:last-child { border-bottom: none; }
    .timeline-date { min-width: 100px; color: #64748b; font-size: 13px; }
    .timeline-event { flex: 1; }
    .timeline-event-title { font-weight: bold; color: #1e293b; margin-bottom: 3px; }
    .timeline-event-detail { font-size: 13px; color: #64748b; }
    .timeline-empty { text-align: center; padding: 30px; color: #64748b; }
    /* Admin Charts */
    .admin-chart { background: #f8fafc; border-radius: 12px; padding: 20px; margin-bottom: 15px; }
    .admin-chart-title { font-size: 14px; color: #64748b; margin-bottom: 15px; }
    .admin-bar-chart { display: flex; flex-direction: column; gap: 10px; }
    .admin-bar-item { display: flex; align-items: center; gap: 10px; }
    .admin-bar-label { min-width: 100px; font-size: 13px; color: #1e293b; }
    .admin-bar-container { flex: 1; height: 24px; background: #e2e8f0; border-radius: 12px; overflow: hidden; }
    .admin-bar-fill { height: 100%; border-radius: 12px; transition: width 0.5s; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; font-size: 11px; color: white; font-weight: bold; }
    .no-data-message { text-align: center; padding: 40px 20px; color: #64748b; }
    .no-data-icon { font-size: 50px; margin-bottom: 15px; opacity: 0.5; }
    /* Lock System Styles */
    .level-card.locked { opacity: 0.6; cursor: not-allowed; position: relative; border: 2px solid #fecaca; }
    .level-card.locked:hover { transform: none; background: #fff; }
    .cert-card, .membership-card { background: #ffffff; border-radius:14px; padding:12px 8px; text-align:center; cursor:pointer; transition: all 0.3s ease; border: 1px solid rgba(226,232,240,0.6); position:relative; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
    .cert-card:hover, .membership-card:hover { transform: translateY(-3px); background: #f8fafc; border-color: var(--orange); box-shadow: 0 8px 25px rgba(232,119,46,0.15); }
    .cert-icon { font-size:28px; margin-bottom:4px; }
    .cert-name { color: var(--text); font-size:11px; font-weight:700; line-height:1.2; margin-bottom:3px; }
    .cert-price { color: var(--orange); font-size:11px; font-weight:700; }
    .cert-lock { position:absolute; top:4px; right:4px; font-size:10px; opacity:0.7; }
    .membership-card.bronze { border-color: rgba(205,127,50,0.5); background: linear-gradient(135deg, rgba(205,127,50,0.15), rgba(139,90,43,0.15)); }
    .membership-card.silver { border-color: rgba(192,192,192,0.5); background: linear-gradient(135deg, rgba(192,192,192,0.15), rgba(150,150,150,0.15)); }
    .membership-card.gold { border-color: rgba(255,215,0,0.5); background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(218,165,32,0.15)); }
    .level-locked-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); border-radius: 15px; display: flex; align-items: center; justify-content: center; }
    .level-locked-icon { font-size: 40px; }

    /* ===== HIDE STUDENT-ONLY ELEMENTS IN ADMIN CRM ===== */
    .crm-redesign .home-fab,
    .crm-redesign .notif-bell-container,
    .crm-redesign #notifBellContainer,
    .crm-redesign #acvoltBtn,
    .crm-redesign #acvoltAI {
      display: none !important;
    }

    /* ========== CRM REDESIGN — ETAPA 1: Trade Master Style ========== */
    :root {
      --crm-primary: #0f3640;
      --crm-primary-dark: #0a252d;
      --crm-primary-light: #17505e;
      --crm-accent: #16803c;
      --crm-accent-dark: #15803d;
      --crm-accent-light: #22c55e;
      --crm-bg-body: #f7f7f5;
      --crm-bg-card: #ffffff;
      --crm-bg-input: #f8f9fb;
      --crm-border: #e3e7ee;
      --crm-text: #1a1d21;
      --crm-text-light: #4b5563;
      --crm-text-muted: #8993a4;
      --crm-danger: #dc2626;
      --crm-warning: #d97706;
      --crm-blue: #2563eb;
      --crm-success: #059669;
      --crm-sidebar-w: 220px;
      --crm-topbar-h: 56px;
      --crm-radius: 8px;
      --crm-radius-lg: 12px;
    }

    /* Override admin dashboard when redesign is active */
    #adminDashboardScreen.active.crm-redesign {
      background: var(--crm-bg-body) !important;
      padding: 0 !important;
      font-family: 'Plus Jakarta Sans', sans-serif !important;
    }
    .crm-redesign .admin-container {
      max-width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    /* CRM Sidebar — White theme */
    .crm-sidebar {
      position: fixed;
      left: 0; top: 0;
      width: var(--crm-sidebar-w);
      height: 100vh;
      background: #ffffff;
      color: var(--crm-text);
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      z-index: 450;
      display: flex;
      flex-direction: column;
      font-family: 'Plus Jakarta Sans', sans-serif;
      scrollbar-width: thin;
      scrollbar-color: rgba(0,0,0,0.1) transparent;
      border-right: 1px solid var(--crm-border);
    }
    .crm-sidebar::-webkit-scrollbar { width: 4px; }
    .crm-sidebar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }

    .crm-sidebar-logo {
      padding: 18px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      border-bottom: 1px solid var(--crm-border);
    }
    .crm-sidebar-logo .crm-logo-icon {
      width: 36px; height: 36px;
      border-radius: 8px;
      background: var(--crm-accent-light);
      display: flex; align-items: center; justify-content: center;
      font-weight: 800; font-size: 14px; color: white;
    }
    .crm-sidebar-logo .crm-brand { font-weight: 700; font-size: 15px; letter-spacing: 0.5px; color: var(--crm-text); }
    .crm-sidebar-logo .crm-sub { font-size: 11px; color: var(--crm-text-muted); }

    .crm-sidebar-section {
      padding: 16px 12px 4px;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      color: var(--crm-text-muted);
      font-weight: 600;
    }
    .crm-sidebar-nav { padding: 4px 8px; flex: 1; }

    .crm-sidebar-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border-radius: 6px;
      color: var(--crm-text-light);
      text-decoration: none;
      font-size: 13.5px;
      font-weight: 500;
      transition: all 0.15s;
      cursor: pointer;
      margin-bottom: 1px;
    }
    .crm-sidebar-item:hover { background: #f1f5f9; color: var(--crm-text); }
    .crm-sidebar-item.crm-active { background: var(--crm-accent); color: white; font-weight: 600; }
    .crm-sidebar-item .crm-icon { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; }
    .crm-sidebar-item .crm-badge {
      margin-left: auto;
      background: var(--crm-danger);
      color: white;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 10px;
      min-width: 18px;
      text-align: center;
    }

    .crm-sidebar-user {
      padding: 12px 16px;
      border-top: 1px solid var(--crm-border);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .crm-sidebar-user-avatar {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: var(--crm-accent);
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 13px; color: white;
    }
    .crm-sidebar-user .crm-name { font-size: 12px; font-weight: 600; color: var(--crm-text); }
    .crm-sidebar-user .crm-role { font-size: 11px; color: var(--crm-text-muted); }
    .crm-sidebar-logout {
      margin-left: auto;
      background: none; border: none; color: var(--crm-text-muted);
      cursor: pointer; font-size: 16px; padding: 4px;
    }
    .crm-sidebar-logout:hover { color: var(--crm-text); }

    /* CRM Main Area */
    .crm-main {
      margin-left: var(--crm-sidebar-w);
      height: 100vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      font-family: 'Plus Jakarta Sans', sans-serif;
    }

    /* CRM Topbar */
    .crm-topbar {
      height: var(--crm-topbar-h);
      background: white;
      border-bottom: 1px solid var(--crm-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      position: sticky;
      top: 0;
      z-index: 440;
    }
    .crm-topbar-title {
      font-size: 18px;
      font-weight: 700;
      font-family: 'Plus Jakarta Sans', sans-serif;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--crm-text);
    }
    .crm-topbar-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .crm-search-box {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--crm-bg-input);
      border: 1px solid var(--crm-border);
      border-radius: var(--crm-radius);
      padding: 8px 14px;
      width: 260px;
      transition: border-color 0.2s;
    }
    .crm-search-box:focus-within { border-color: var(--crm-accent); }
    .crm-search-box input {
      border: none; background: transparent; outline: none;
      font-size: 13px; color: var(--crm-text); width: 100%;
      font-family: 'Plus Jakarta Sans', sans-serif;
    }
    .crm-search-box input::placeholder { color: var(--crm-text-muted); }
    .crm-topbar-company {
      font-size: 13px; font-weight: 600; color: var(--crm-text-light);
    }
    .crm-topbar-lang {
      font-size: 12px; font-weight: 600;
      background: var(--crm-bg-input);
      border: 1px solid var(--crm-border);
      padding: 6px 10px; border-radius: 6px; cursor: pointer;
      font-family: 'Plus Jakarta Sans', sans-serif;
    }
    .crm-btn-add {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: var(--crm-accent);
      color: white; border: none;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; font-size: 20px;
    }
    .crm-btn-add:hover { background: var(--crm-accent-dark); }
    .crm-topbar-avatar {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: var(--crm-primary);
      color: white;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 14px;
    }

    /* CRM Page Content */
    .crm-page-content { padding: 24px; }

    /* CRM Section Panels */
    .crm-section-panel { display: none; animation: crmFadeIn 0.2s ease; }
    .crm-section-panel.crm-visible { display: block; }
    @keyframes crmFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

    /* Restyle admin sections inside CRM */
    .crm-redesign .admin-section {
      background: var(--crm-bg-card) !important;
      border-radius: var(--crm-radius-lg) !important;
      padding: 20px 24px !important;
      border: 1px solid var(--crm-border) !important;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
      margin-bottom: 20px !important;
    }

    .crm-redesign .admin-stat-card {
      background: var(--crm-bg-card) !important;
      border-radius: var(--crm-radius-lg) !important;
      border: 1px solid var(--crm-border) !important;
      border-top: 3px solid var(--crm-accent) !important;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    }
    .crm-redesign .admin-stat-card:nth-child(2) { border-top-color: var(--crm-blue) !important; }
    .crm-redesign .admin-stat-card:nth-child(3) { border-top-color: var(--crm-warning) !important; }
    .crm-redesign .admin-stat-card:nth-child(4) { border-top-color: var(--crm-primary) !important; }
    .crm-redesign .admin-stat-value {
      color: var(--crm-text) !important;
      font-weight: 800 !important;
      text-shadow: none !important;
    }
    .crm-redesign .admin-stat-label {
      color: var(--crm-text-light) !important;
      font-weight: 600 !important;
    }
    .crm-redesign .admin-section-title {
      color: var(--crm-text) !important;
      font-family: 'Plus Jakarta Sans', sans-serif !important;
    }
    .crm-redesign .admin-section-header {
      color: var(--crm-text) !important;
    }
    .crm-redesign .admin-nav-btn {
      background: var(--crm-bg-input) !important;
      border-color: var(--crm-border) !important;
      color: var(--crm-text-light) !important;
      font-family: 'Plus Jakarta Sans', sans-serif !important;
    }
    .crm-redesign .admin-nav-btn:hover {
      background: var(--crm-accent) !important;
      color: white !important;
      border-color: var(--crm-accent) !important;
    }
    .crm-redesign .admin-filter-input,
    .crm-redesign .admin-filter-select {
      border-color: var(--crm-border) !important;
      font-family: 'Plus Jakarta Sans', sans-serif !important;
    }
    .crm-redesign .admin-filter-input:focus {
      border-color: var(--crm-accent) !important;
    }

    /* Override the old admin header (we replace it with topbar) */
    .crm-redesign .admin-header { display: none !important; }
    /* Hide old quick nav (replaced by sidebar) */
    .crm-redesign .crm-old-nav { display: none !important; }
    /* Hide landscape msg in redesign */
    .crm-redesign .admin-landscape-msg { display: none !important; }
    .crm-redesign .admin-main-content { display: block !important; }

    /* Welcome Banner */
    .crm-welcome {
      background: white;
      border-radius: var(--crm-radius-lg);
      padding: 28px 32px;
      text-align: center;
      margin-bottom: 24px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      border: 1px solid var(--crm-border);
    }
    .crm-welcome-date { color: var(--crm-accent); font-size: 13px; font-weight: 600; margin-bottom: 4px; }
    .crm-welcome-title { font-size: 20px; font-weight: 700; margin-bottom: 16px; color: var(--crm-text); }
    .crm-welcome-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
    .crm-welcome-btn {
      padding: 8px 16px;
      border: 1px solid var(--crm-border);
      border-radius: 20px;
      background: white;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      font-family: 'Plus Jakarta Sans', sans-serif;
      color: var(--crm-text-light);
      transition: all 0.15s;
    }
    .crm-welcome-btn:hover { border-color: var(--crm-accent); color: var(--crm-accent); background: #f0fdf4; }

    /* Quick Access Buttons */
    .crm-quick-access {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 24px;
      justify-content: center;
    }
    .crm-quick-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      border-radius: 20px;
      font-size: 12.5px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      font-family: 'Plus Jakarta Sans', sans-serif;
      transition: transform 0.1s, box-shadow 0.1s;
    }
    .crm-quick-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .crm-quick-btn.green { background: #dcfce7; color: #15803d; }
    .crm-quick-btn.blue { background: #dbeafe; color: #1d4ed8; }
    .crm-quick-btn.purple { background: #ede9fe; color: #7c3aed; }
    .crm-quick-btn.orange { background: #fff7ed; color: #c2410c; }
    .crm-quick-btn.red { background: #fee2e2; color: #dc2626; }
    .crm-quick-btn.teal { background: #ccfbf1; color: #0f766e; }
    .crm-quick-btn.yellow { background: #fef9c3; color: #a16207; }
    .crm-quick-btn.pink { background: #fce7f3; color: #be185d; }

    /* CRM Placeholder for sections not yet populated */
    .crm-placeholder {
      background: white;
      border-radius: var(--crm-radius-lg);
      padding: 60px 40px;
      border: 1px solid var(--crm-border);
      text-align: center;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .crm-placeholder-icon { font-size: 48px; margin-bottom: 16px; }
    .crm-placeholder-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; color: var(--crm-text); }
    .crm-placeholder-desc { font-size: 14px; color: var(--crm-text-muted); max-width: 400px; margin: 0 auto; line-height: 1.6; }

    /* Mode toggle buttons in sidebar */
    .crm-mode-toggle {
      display: flex;
      gap: 4px;
      padding: 8px 12px;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .crm-mode-btn {
      flex: 1;
      padding: 8px;
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 6px;
      background: transparent;
      color: rgba(255,255,255,0.6);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      font-family: 'Plus Jakarta Sans', sans-serif;
      text-align: center;
    }
    .crm-mode-btn.crm-mode-active {
      background: rgba(255,255,255,0.15);
      color: white;
      border-color: rgba(255,255,255,0.3);
    }

    /* Responsive: compact sidebar on tablets (901px - 1199px) */
    @media (min-width: 901px) and (max-width: 1199px) {
      .crm-sidebar {
        width: 60px !important;
        min-width: 60px !important;
      }
      .crm-sidebar .crm-sidebar-logo .crm-brand,
      .crm-sidebar .crm-sidebar-logo .crm-sub,
      .crm-sidebar .crm-sidebar-section,
      .crm-sidebar .crm-sidebar-item span:not(.crm-icon),
      .crm-sidebar .crm-sidebar-item .crm-badge,
      .crm-sidebar .crm-sidebar-user .crm-name,
      .crm-sidebar .crm-sidebar-user .crm-role,
      .crm-sidebar .crm-sidebar-logout,
      .crm-sidebar .crm-mode-toggle {
        display: none !important;
      }
      .crm-sidebar .crm-sidebar-logo {
        justify-content: center;
        padding: 14px 8px !important;
      }
      .crm-sidebar .crm-sidebar-item {
        justify-content: center;
        padding: 10px 8px !important;
      }
      .crm-sidebar .crm-sidebar-user {
        justify-content: center;
        padding: 8px !important;
      }
      .crm-main {
        margin-left: 60px !important;
      }
    }

    /* Responsive: hide sidebar on small screens (no !important so mobile-nav.js can override) */
    @media (max-width: 900px) {
      .crm-sidebar { display: none; }
      .crm-main { margin-left: 0 !important; }
    }

    /* Landscape phones: hide sidebar, use hamburger (phones in landscape are <=1199px wide but <=500px tall) */
    @media (max-width: 1199px) and (max-height: 500px) and (orientation: landscape) {
      .crm-sidebar { display: none; }
      .crm-main { margin-left: 0 !important; }
    }
    /* ========== END CRM REDESIGN ========== */

    /* ========== CRM REDESIGN — Enhanced Styles for Tables, Buttons, Forms ========== */
    .crm-redesign table {
      width: 100% !important;
      border-collapse: collapse !important;
      font-family: 'Plus Jakarta Sans', sans-serif !important;
    }
    .crm-redesign table thead th {
      background: var(--crm-bg-input) !important;
      color: var(--crm-text) !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.5px !important;
      padding: 12px 14px !important;
      border-bottom: 2px solid var(--crm-border) !important;
      text-align: left !important;
    }
    .crm-redesign table tbody td {
      padding: 12px 14px !important;
      font-size: 13px !important;
      color: var(--crm-text) !important;
      border-bottom: 1px solid #f3f4f6 !important;
      vertical-align: middle !important;
      background: transparent !important;
    }
    .crm-redesign table tbody tr {
      background: white !important;
      transition: background 0.1s !important;
    }
    .crm-redesign table tbody tr:hover {
      background: #f9fafb !important;
    }

    /* Override all dark-themed inline background colors inside admin sections */
    .crm-redesign .admin-section [style*="background: #1a1a2e"],
    .crm-redesign .admin-section [style*="background:#1a1a2e"],
    .crm-redesign .admin-section [style*="background: #0f172a"],
    .crm-redesign .admin-section [style*="background:#0f172a"],
    .crm-redesign .admin-section [style*="background: #1e293b"],
    .crm-redesign .admin-section [style*="background:#1e293b"] {
      background: var(--crm-bg-input) !important;
      color: var(--crm-text) !important;
      border-color: var(--crm-border) !important;
    }
    /* Override dark input fields */
    .crm-redesign .admin-section input[style*="background: #1a1a2e"],
    .crm-redesign .admin-section input[style*="background:#1a1a2e"],
    .crm-redesign .admin-section input[style*="background: #0f172a"],
    .crm-redesign .admin-section input[style*="background:#0f172a"],
    .crm-redesign .admin-section select[style*="background: #1a1a2e"],
    .crm-redesign .admin-section select[style*="background:#1a1a2e"],
    .crm-redesign .admin-section textarea[style*="background: #1a1a2e"],
    .crm-redesign .admin-section textarea[style*="background:#1a1a2e"] {
      background: white !important;
      color: var(--crm-text) !important;
      border: 1px solid var(--crm-border) !important;
    }
    .crm-redesign .admin-section input,
    .crm-redesign .admin-section select,
    .crm-redesign .admin-section textarea {
      font-family: 'Plus Jakarta Sans', sans-serif !important;
      border-radius: var(--crm-radius) !important;
    }

    /* Override color: #ccc and color: #fff inside admin sections */
    .crm-redesign .admin-section [style*="color: #ccc"],
    .crm-redesign .admin-section [style*="color:#ccc"] {
      color: var(--crm-text-light) !important;
    }
    .crm-redesign .admin-section [style*="color: #fff"],
    .crm-redesign .admin-section [style*="color:#fff"],
    .crm-redesign .admin-section [style*="color: white"],
    .crm-redesign .admin-section [style*="color:white"] {
      color: var(--crm-text) !important;
    }
    /* But keep white text on colored buttons */
    .crm-redesign .admin-section button[style*="background: #e74c3c"],
    .crm-redesign .admin-section button[style*="background:#e74c3c"],
    .crm-redesign .admin-section button[style*="background: #3498db"],
    .crm-redesign .admin-section button[style*="background:#3498db"],
    .crm-redesign .admin-section button[style*="background: #f39c12"],
    .crm-redesign .admin-section button[style*="background:#f39c12"],
    .crm-redesign .admin-section button[style*="background: #27ae60"],
    .crm-redesign .admin-section button[style*="background:#27ae60"],
    .crm-redesign .admin-section button[style*="background: #2ecc71"],
    .crm-redesign .admin-section button[style*="background:#2ecc71"],
    .crm-redesign .admin-section button[style*="background: #9b59b6"],
    .crm-redesign .admin-section button[style*="background:#9b59b6"] {
      color: white !important;
    }

    /* Restyle colored section backgrounds to be lighter/cleaner */
    .crm-redesign .admin-section [style*="rgba(243,156,18"] {
      background: #fefce8 !important;
      border: 1px solid #fef08a !important;
    }
    .crm-redesign .admin-section [style*="rgba(52,152,219"] {
      background: #eff6ff !important;
      border: 1px solid #bfdbfe !important;
    }
    .crm-redesign .admin-section [style*="rgba(46,204,113"] {
      background: #f0fdf4 !important;
      border: 1px solid #bbf7d0 !important;
    }
    .crm-redesign .admin-section [style*="rgba(155,89,182"] {
      background: #faf5ff !important;
      border: 1px solid #e9d5ff !important;
    }
    .crm-redesign .admin-section [style*="rgba(231,76,60"] {
      background: #fef2f2 !important;
      border: 1px solid #fecaca !important;
    }

    /* Override section title colors to Trade Master palette */
    .crm-redesign .admin-section h3[style*="color: #f39c12"],
    .crm-redesign .admin-section h3[style*="color:#f39c12"] {
      color: var(--crm-primary) !important;
    }
    .crm-redesign .admin-section h3[style*="color: #e74c3c"],
    .crm-redesign .admin-section h3[style*="color:#e74c3c"] {
      color: var(--crm-danger) !important;
    }
    .crm-redesign .admin-section h3[style*="color: #3498db"],
    .crm-redesign .admin-section h3[style*="color:#3498db"] {
      color: var(--crm-blue) !important;
    }
    .crm-redesign .admin-section h3[style*="color: #27ae60"],
    .crm-redesign .admin-section h3[style*="color:#27ae60"],
    .crm-redesign .admin-section h3[style*="color: #2ecc71"],
    .crm-redesign .admin-section h3[style*="color:#2ecc71"] {
      color: var(--crm-accent) !important;
    }
    .crm-redesign .admin-section h3[style*="color: #9b59b6"],
    .crm-redesign .admin-section h3[style*="color:#9b59b6"] {
      color: #7c3aed !important;
    }
    .crm-redesign .admin-section h4[style*="color: #f39c12"],
    .crm-redesign .admin-section h4[style*="color:#f39c12"] {
      color: var(--crm-primary) !important;
    }
    .crm-redesign .admin-section h4[style*="color: #3498db"],
    .crm-redesign .admin-section h4[style*="color:#3498db"] {
      color: var(--crm-blue) !important;
    }
    .crm-redesign .admin-section h4[style*="color: #2ecc71"],
    .crm-redesign .admin-section h4[style*="color:#2ecc71"] {
      color: var(--crm-accent) !important;
    }
    .crm-redesign .admin-section h4[style*="color: #9b59b6"],
    .crm-redesign .admin-section h4[style*="color:#9b59b6"] {
      color: #7c3aed !important;
    }

    /* Restyle admin buttons to Trade Master look */
    .crm-redesign .admin-section button[style*="background: #e74c3c"],
    .crm-redesign .admin-section button[style*="background:#e74c3c"] {
      background: var(--crm-danger) !important;
      border-radius: var(--crm-radius) !important;
      font-family: 'Plus Jakarta Sans', sans-serif !important;
      font-weight: 600 !important;
    }
    .crm-redesign .admin-section button[style*="background: #3498db"],
    .crm-redesign .admin-section button[style*="background:#3498db"] {
      background: var(--crm-blue) !important;
      border-radius: var(--crm-radius) !important;
      font-family: 'Plus Jakarta Sans', sans-serif !important;
      font-weight: 600 !important;
    }
    .crm-redesign .admin-section button[style*="background: #f39c12"],
    .crm-redesign .admin-section button[style*="background:#f39c12"] {
      background: var(--crm-accent) !important;
      border-radius: var(--crm-radius) !important;
      font-family: 'Plus Jakarta Sans', sans-serif !important;
      font-weight: 600 !important;
    }
    .crm-redesign .admin-section button[style*="background: #27ae60"],
    .crm-redesign .admin-section button[style*="background:#27ae60"],
    .crm-redesign .admin-section button[style*="background: #2ecc71"],
    .crm-redesign .admin-section button[style*="background:#2ecc71"] {
      background: var(--crm-accent) !important;
      border-radius: var(--crm-radius) !important;
      font-family: 'Plus Jakarta Sans', sans-serif !important;
      font-weight: 600 !important;
    }
    .crm-redesign .admin-section button[style*="background: #9b59b6"],
    .crm-redesign .admin-section button[style*="background:#9b59b6"] {
      background: #7c3aed !important;
      border-radius: var(--crm-radius) !important;
      font-family: 'Plus Jakarta Sans', sans-serif !important;
      font-weight: 600 !important;
    }
    .crm-redesign .admin-section button[style*="background: #444"],
    .crm-redesign .admin-section button[style*="background:#444"] {
      background: var(--crm-primary-light) !important;
      border-radius: var(--crm-radius) !important;
    }

    /* Status badges */
    .crm-redesign [style*="background: #27ae60"][style*="border-radius: 20px"],
    .crm-redesign [style*="background:#27ae60"][style*="border-radius"],
    .crm-redesign [style*="background: #2ecc71"][style*="border-radius"] {
      background: #dcfce7 !important;
      color: #15803d !important;
    }
    .crm-redesign [style*="background: #e74c3c"][style*="border-radius: 20px"] {
      background: #fee2e2 !important;
      color: #dc2626 !important;
    }

    /* Stat card value colors override */
    .crm-redesign .admin-stat-card:nth-child(1) .admin-stat-value { color: var(--crm-accent) !important; }
    .crm-redesign .admin-stat-card:nth-child(2) .admin-stat-value { color: var(--crm-blue) !important; }
    .crm-redesign .admin-stat-card:nth-child(3) .admin-stat-value { color: var(--crm-accent) !important; }
    .crm-redesign .admin-stat-card:nth-child(4) .admin-stat-value { color: var(--crm-primary) !important; }

    /* Override no-data messages */
    .crm-redesign .no-data-message,
    .crm-redesign [class*="no-data"] {
      color: var(--crm-text-muted) !important;
      background: transparent !important;
    }

    /* Override dynamic Stripe/Zelle badges */
    .crm-redesign [style*="background: linear-gradient(135deg, #6772e5"] {
      background: var(--crm-blue) !important;
    }

    /* Override inline dark background divs that JS generates */
    .crm-redesign #accessCodesList,
    .crm-redesign #activeCodesList,
    .crm-redesign #batchStudentList,
    .crm-redesign #adminStudentActivityList,
    .crm-redesign #adminExamRequestsList,
    .crm-redesign #stripeFailedPayments,
    .crm-redesign #stripeRecentCharges,
    .crm-redesign #inactivityList {
      color: var(--crm-text) !important;
    }

    /* Global font override for all text inside CRM redesign */
    .crm-redesign * {
      font-family: 'Plus Jakarta Sans', sans-serif;
    }

    /* Make sure topbar "Refresh" button looks good */
    .crm-redesign .crm-page-content > div button[style*="background: #f39c12"],
    .crm-redesign button.admin-nav-btn {
      transition: all 0.15s !important;
    }
    /* ========== END Enhanced Styles ========== */

    /* ========== NUCLEAR DARK-TO-LIGHT OVERRIDES ========== */
    /* Force ALL selects/inputs inside admin to be light */
    .crm-redesign #adminDashboardScreen select {
      background: white !important;
      color: #1e293b !important;
      border: 1px solid #d1d5db !important;
      border-radius: 8px !important;
      padding: 10px 15px !important;
      font-family: 'Plus Jakarta Sans', sans-serif !important;
      font-size: 14px !important;
      cursor: pointer !important;
      -webkit-appearance: auto !important;
    }
    .crm-redesign #adminDashboardScreen select option {
      background: white !important;
      color: #1e293b !important;
    }
    .crm-redesign #adminDashboardScreen input[type="text"],
    .crm-redesign #adminDashboardScreen input[type="email"],
    .crm-redesign #adminDashboardScreen input[type="number"],
    .crm-redesign #adminDashboardScreen input[type="date"],
    .crm-redesign #adminDashboardScreen input[type="search"],
    .crm-redesign #adminDashboardScreen textarea {
      background: white !important;
      color: #1e293b !important;
      border: 1px solid #d1d5db !important;
      border-radius: 8px !important;
      font-family: 'Plus Jakarta Sans', sans-serif !important;
    }
    .crm-redesign #adminDashboardScreen input::placeholder {
      color: #94a3b8 !important;
    }

    /* Override ALL dark container backgrounds */
    .crm-redesign #adminDashboardScreen div[style*="background: #1a1a2e"],
    .crm-redesign #adminDashboardScreen div[style*="background:#1a1a2e"],
    .crm-redesign #adminDashboardScreen div[style*="background: #0f172a"],
    .crm-redesign #adminDashboardScreen div[style*="background:#0f172a"],
    .crm-redesign #adminDashboardScreen div[style*="background: #16213e"],
    .crm-redesign #adminDashboardScreen div[style*="background:#16213e"],
    .crm-redesign #adminDashboardScreen div[style*="background: #1e293b"],
    .crm-redesign #adminDashboardScreen div[style*="background:#1e293b"],
    .crm-redesign #adminDashboardScreen div[style*="background: #334155"],
    .crm-redesign #adminDashboardScreen div[style*="background:#334155"],
    .crm-redesign #adminDashboardScreen div[style*="background: #0d1b2a"],
    .crm-redesign #adminDashboardScreen div[style*="background:#0d1b2a"],
    .crm-redesign #adminDashboardScreen div[style*="background: #1a2332"],
    .crm-redesign #adminDashboardScreen div[style*="background:#1a2332"],
    .crm-redesign #adminDashboardScreen div[style*="background:#2c3e50"],
    .crm-redesign #adminDashboardScreen div[style*="background: #2c3e50"],
    .crm-redesign #adminDashboardScreen div[style*="background: #444"],
    .crm-redesign #adminDashboardScreen div[style*="background:#444"] {
      background: #f8fafc !important;
      color: #1e293b !important;
      border-color: #e2e8f0 !important;
    }

    /* Fix gradient backgrounds on containers (not buttons) */
    .crm-redesign #adminDashboardScreen div[style*="linear-gradient"][style*="#1a1a2e"],
    .crm-redesign #adminDashboardScreen div[style*="linear-gradient"][style*="#16213e"],
    .crm-redesign #adminDashboardScreen div[style*="linear-gradient"][style*="#0f172a"] {
      background: #f8fafc !important;
      border-color: #e2e8f0 !important;
      color: #1e293b !important;
    }

    /* Fix rgba white semi-transparent buttons */
    .crm-redesign #adminDashboardScreen button[style*="rgba(255,255,255,0.1)"],
    .crm-redesign #adminDashboardScreen button[style*="rgba(255, 255, 255, 0.1)"] {
      background: #f1f5f9 !important;
      color: #1e293b !important;
      border: 1px solid #d1d5db !important;
    }
    /* Fix light text that was for dark backgrounds */
    .crm-redesign #adminDashboardScreen span[style*="color: #ccc"],
    .crm-redesign #adminDashboardScreen span[style*="color:#ccc"],
    .crm-redesign #adminDashboardScreen div[style*="color: #ccc"],
    .crm-redesign #adminDashboardScreen div[style*="color:#ccc"],
    .crm-redesign #adminDashboardScreen p[style*="color: #ccc"],
    .crm-redesign #adminDashboardScreen p[style*="color:#ccc"] {
      color: #64748b !important;
    }
    /* Fix white text on non-button elements */
    .crm-redesign #adminDashboardScreen div[style*="color: #fff"],
    .crm-redesign #adminDashboardScreen div[style*="color:#fff"],
    .crm-redesign #adminDashboardScreen span[style*="color: #fff"],
    .crm-redesign #adminDashboardScreen span[style*="color:#fff"],
    .crm-redesign #adminDashboardScreen p[style*="color: #fff"],
    .crm-redesign #adminDashboardScreen p[style*="color:#fff"],
    .crm-redesign #adminDashboardScreen label[style*="color: #fff"],
    .crm-redesign #adminDashboardScreen label[style*="color:#fff"] {
      color: #1e293b !important;
    }
    /* But keep white text ON colored buttons */
    .crm-redesign #adminDashboardScreen button[style*="background: #e74c3c"] *,
    .crm-redesign #adminDashboardScreen button[style*="background:#e74c3c"] *,
    .crm-redesign #adminDashboardScreen button[style*="background: #3498db"] *,
    .crm-redesign #adminDashboardScreen button[style*="background:#3498db"] *,
    .crm-redesign #adminDashboardScreen button[style*="background: #27ae60"] *,
    .crm-redesign #adminDashboardScreen button[style*="background:#27ae60"] *,
    .crm-redesign #adminDashboardScreen button[style*="background: #2ecc71"] *,
    .crm-redesign #adminDashboardScreen button[style*="background:#2ecc71"] *,
    .crm-redesign #adminDashboardScreen button[style*="background: #9b59b6"] *,
    .crm-redesign #adminDashboardScreen button[style*="background:#9b59b6"] *,
    .crm-redesign #adminDashboardScreen button[style*="background: #f39c12"] *,
    .crm-redesign #adminDashboardScreen button[style*="background:#f39c12"] * {
      color: white !important;
    }
    /* Fix d4a5ff purple light text */
    .crm-redesign #adminDashboardScreen [style*="color: #d4a5ff"],
    .crm-redesign #adminDashboardScreen [style*="color:#d4a5ff"] {
      color: #7c3aed !important;
    }
    .crm-redesign #adminDashboardScreen [style*="color: #ff8a80"],
    .crm-redesign #adminDashboardScreen [style*="color:#ff8a80"] {
      color: #dc2626 !important;
    }
    /* Fix rgba transparent buttons on dark backgrounds */
    .crm-redesign #adminDashboardScreen button[style*="rgba(155,89,182,0.3)"] {
      background: #f3e8ff !important;
      color: #7c3aed !important;
      border-color: #c084fc !important;
    }
    .crm-redesign #adminDashboardScreen button[style*="rgba(231,76,60,0.3)"] {
      background: #fee2e2 !important;
      color: #dc2626 !important;
      border-color: #fca5a5 !important;
    }
    .crm-redesign #adminDashboardScreen button[style*="rgba(255,255,255,0.2)"] {
      background: #e2e8f0 !important;
      color: #475569 !important;
    }
    /* Fix inbox filter buttons */
    .crm-redesign .inbox-filter-btn:not(.active) {
      background: #f1f5f9 !important;
      color: #475569 !important;
      border: 1px solid #d1d5db !important;
    }
    .crm-redesign .inbox-filter-btn.active {
      background: var(--crm-accent) !important;
      color: white !important;
    }
    .crm-redesign .inbox-filter-btn span {
      background: #e2e8f0 !important;
      color: #475569 !important;
    }
    .crm-redesign #adminInboxList {
      background: #f8fafc !important;
      border: 1px solid #e2e8f0 !important;
    }
    .crm-redesign #adminInboxList p,
    .crm-redesign #adminInboxList div {
      color: #334155 !important;
    }
    /* ========== END NUCLEAR OVERRIDES ========== */

    /* ========== STUDENT PROGRESS DASHBOARD ========== */
    .progress-stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin:15px; }
    .progress-stat-card { background:#fff; border-radius:14px; padding:16px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
    .progress-stat-card .stat-value { font-size:28px; font-weight:900; margin:4px 0; }
    .progress-stat-card .stat-label { font-size:11px; color:#64748b; font-weight:600; text-transform:uppercase; }
    .progress-chart-card { margin:15px; background:#fff; border-radius:16px; padding:20px; box-shadow:0 2px 10px rgba(0,0,0,0.08); }
    .progress-chart-card h3 { color:#1a1a2e; margin-bottom:12px; font-size:15px; }
    .category-bar-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
    .category-bar-label { width:100px; font-size:12px; color:#475569; font-weight:600; text-align:right; flex-shrink:0; }
    .category-bar-track { flex:1; height:20px; background:#f1f5f9; border-radius:10px; overflow:hidden; }
    .category-bar-fill { height:100%; border-radius:10px; transition:width 0.6s ease; display:flex; align-items:center; justify-content:flex-end; padding-right:6px; }
    .category-bar-fill span { font-size:10px; color:#fff; font-weight:700; }
    .cert-timeline { position:relative; padding-left:30px; }
    .cert-timeline::before { content:''; position:absolute; left:12px; top:0; bottom:0; width:3px; background:#e2e8f0; border-radius:3px; }
    .cert-step { position:relative; margin-bottom:18px; }
    .cert-step .cert-dot { position:absolute; left:-24px; top:2px; width:18px; height:18px; border-radius:50%; border:3px solid #e2e8f0; background:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; }
    .cert-step.completed .cert-dot { background:#10b981; border-color:#10b981; color:#fff; }
    .cert-step.active .cert-dot { background:#6366f1; border-color:#6366f1; color:#fff; animation:pulse-dot 2s infinite; }
    @keyframes pulse-dot { 0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,0.4);} 50%{box-shadow:0 0 0 8px rgba(99,102,241,0);} }
    .cert-step .cert-info h4 { font-size:13px; color:#1e293b; margin:0; }
    .cert-step .cert-info p { font-size:11px; color:#94a3b8; margin:2px 0 0; }
    .heatmap-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:3px; }
    .heatmap-cell { aspect-ratio:1; border-radius:3px; background:#f1f5f9; }
    .heatmap-cell.level-1 { background:#dcfce7; }
    .heatmap-cell.level-2 { background:#86efac; }
    .heatmap-cell.level-3 { background:#22c55e; }
    .heatmap-cell.level-4 { background:#15803d; }

    /* ========== UNIFIED PAYMENTS ========== */
    .pay-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:15px; }
    .pay-kpi-card { border-radius:12px; padding:18px; text-align:center; }
    .pay-kpi-card .kpi-val { font-size:28px; font-weight:900; margin:4px 0; }
    .pay-kpi-card .kpi-label { font-size:11px; font-weight:600; text-transform:uppercase; }
    .pay-filter-bar { display:flex; gap:6px; flex-wrap:wrap; margin:12px 0; }
    .pay-filter-btn { padding:6px 14px; border-radius:20px; border:1px solid #e2e8f0; background:#fff; cursor:pointer; font-size:12px; font-weight:600; color:#64748b; transition:all 0.2s; }
    .pay-filter-btn.active { background:#6366f1; color:#fff; border-color:#6366f1; }
    .pay-table { width:100%; border-collapse:collapse; font-size:12px; }
    .pay-table th { text-align:left; padding:10px 8px; background:#f8fafc; color:#64748b; font-weight:700; font-size:11px; text-transform:uppercase; border-bottom:2px solid #e2e8f0; }
    .pay-table td { padding:10px 8px; border-bottom:1px solid #f1f5f9; color:#334155; }
    .pay-table tr:hover { background:#f8fafc; cursor:pointer; }
    .pay-status { padding:3px 8px; border-radius:12px; font-size:10px; font-weight:700; text-transform:uppercase; }
    .pay-status.al-dia { background:#dcfce7; color:#16a34a; }
    .pay-status.debe { background:#fef2f2; color:#dc2626; }
    .pay-status.parcial { background:#fffbeb; color:#d97706; }
    .pay-status.fallido { background:#fce7f3; color:#be185d; }
    .pay-method-icon { display:inline-flex; align-items:center; gap:3px; font-size:11px; }
    .pay-drill-modal { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:9999; display:flex; align-items:center; justify-content:center; }
    .pay-drill-content { background:#fff; border-radius:16px; max-width:500px; width:90%; max-height:80vh; overflow-y:auto; padding:24px; }
    .pay-timeline-item { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid #f1f5f9; }
    .pay-timeline-dot { width:10px; height:10px; border-radius:50%; margin-top:4px; flex-shrink:0; }

    /* ========== MOBILE BOTTOM NAV ========== */
    .mobile-bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid #e2e8f0; z-index:1000; padding:6px 0 env(safe-area-inset-bottom,6px); box-shadow:0 -2px 10px rgba(0,0,0,0.06); }
    @media(max-width:768px){ .mobile-bottom-nav.active { display:flex; justify-content:space-around; align-items:center; } }
    .mobile-bottom-nav .bnav-item { display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 8px; cursor:pointer; border:none; background:none; color:#94a3b8; font-size:10px; font-weight:600; transition:color 0.2s; }
    .mobile-bottom-nav .bnav-item.active { color:#6366f1; }
    .mobile-bottom-nav .bnav-item svg { width:22px; height:22px; }
    .push-optin-banner { background:linear-gradient(135deg,#6366f1,#8b5cf6); border-radius:14px; padding:14px 18px; margin:15px; display:flex; align-items:center; gap:12px; cursor:pointer; box-shadow:0 4px 15px rgba(99,102,241,0.3); }
    .push-optin-banner .optin-text { flex:1; color:#fff; }
    .push-optin-banner .optin-text h4 { margin:0; font-size:14px; }
    .push-optin-banner .optin-text p { margin:2px 0 0; font-size:11px; opacity:0.85; }
    .install-banner { background:linear-gradient(135deg,#0ea5e9,#6366f1); border-radius:14px; padding:14px 18px; margin:0 15px 10px; display:flex; align-items:center; gap:12px; cursor:pointer; box-shadow:0 4px 15px rgba(14,165,233,0.3); }
    .install-banner .inst-text { flex:1; color:#fff; }
    .install-banner .inst-text h4 { margin:0; font-size:14px; }
    .install-banner .inst-text p { margin:2px 0 0; font-size:11px; opacity:0.85; }
    .screen-entering { animation:screenFadeIn 0.2s ease-out; }
    @keyframes screenFadeIn { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }

    /* ========== PAYMENT REMINDERS ========== */
    .reminder-stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:15px; }
    .reminder-stat-card { border-radius:12px; padding:18px; text-align:center; }
    .reminder-stat-card .r-val { font-size:28px; font-weight:900; margin:4px 0; }
    .reminder-stat-card .r-label { font-size:11px; font-weight:600; text-transform:uppercase; }
    .reminder-table { width:100%; border-collapse:collapse; font-size:12px; }
    .reminder-table th { text-align:left; padding:10px 8px; background:#f8fafc; color:#64748b; font-weight:700; font-size:11px; text-transform:uppercase; border-bottom:2px solid #e2e8f0; }
    .reminder-table td { padding:10px 8px; border-bottom:1px solid #f1f5f9; color:#334155; }
    .escalation-badge { padding:3px 8px; border-radius:12px; font-size:10px; font-weight:700; }
    .escalation-badge.friendly { background:#dcfce7; color:#16a34a; }
    .escalation-badge.notice { background:#fffbeb; color:#d97706; }
    .escalation-badge.urgent { background:#fed7aa; color:#c2410c; }
    .escalation-badge.final { background:#fecaca; color:#dc2626; }