body, html {
  margin: 0; padding: 0; 
  background-color: #121212; color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box; height: 100vh; overflow-y: auto; 
  touch-action: auto; 
  -webkit-tap-highlight-color: transparent;
}

#main-dashboard { display: flex; flex-direction: column; min-height: 100vh; padding: 3vh 0 0 0; }

.header-section { text-align: center; margin: 0 4vw 3vh 4vw; background: #2c2c2c; padding: 2vh 0; border-radius: 15px; border-bottom: 4px solid #0088ff; box-shadow: 0 10px 30px rgba(0,0,0,0.5); position: relative; }

/* PRZYCISKI W PRAWYM GÓRNYM ROGU */
.settings-btn { position: absolute; top: 2vh; right: 3vw; background: transparent; border: none; font-size: 2.5vw; cursor: pointer; transition: transform 0.2s; }
.settings-btn:active { transform: rotate(90deg); }

.sync-btn { position: absolute; top: 2vh; right: 6vw; background: transparent; border: none; font-size: 2.5vw; cursor: default; opacity: 0.7; }
.pulse { animation: pulse-sync 1.5s ease-in-out infinite; }
@keyframes pulse-sync { 
  0% { transform: scale(1); opacity: 0.3; } 
  50% { transform: scale(1.2); opacity: 1; text-shadow: 0 0 10px rgba(255,255,255,0.5); } 
  100% { transform: scale(1); opacity: 0.3; } 
}

/* POWIADOMIENIE TOAST */
.toast { position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%); background-color: #1a8f3b; color: #fff; padding: 1.5vh 3vw; border-radius: 10px; font-weight: bold; font-size: 1.2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.5); transition: bottom 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); z-index: 9999; pointer-events: none; }
.toast.show { bottom: 4vh; }

.welcome-text { color: #0088ff; font-size: 2.5vw; text-transform: uppercase; font-weight: 900; letter-spacing: 4px; margin-bottom: 1vh; }
.path-text { color: #cccccc; font-size: 1.5vw; margin-bottom: 0.5vh; }
.details-text { color: #888888; font-size: 1.2vw; font-weight: bold; margin-bottom: 2vh; }

.clock-text { color: #ffffff; font-size: 6vw; font-weight: 900; line-height: 1; text-shadow: 2px 2px 10px rgba(0,0,0,0.8); }
.date-text { color: #0088ff; font-size: 1.8vw; margin-top: 1vh; font-weight: bold; text-transform: uppercase; }

.schedule-header { display: flex; justify-content: center; align-items: center; gap: 2vw; font-size: 2.5vw; font-weight: 900; margin: 2vh auto; text-transform: uppercase; letter-spacing: 2px; border-bottom: 1px solid #333; padding-bottom: 1vh; width: 90%; }
.nav-btn { background: #2c2c2c; color: #0088ff; border: 2px solid #0088ff; font-size: 2vw; padding: 1.5vh 3vw; border-radius: 12px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
.nav-btn:hover { background: #0088ff; color: #121212; }
.nav-btn:active { transform: scale(0.95); }

.schedule-container { flex-grow: 1; width: 90%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5vh; padding-bottom: 5vh;}

.lesson-row { display: flex; background: #2c2c2c; border-radius: 12px; border-left: 8px solid #444; padding: 2vh 1.5vw; align-items: center; box-shadow: 0 4px 15px rgba(0,0,0,0.3); transition: 0.3s; }
.lesson-row.active-lesson { border-left-color: #0088ff; background: rgba(0, 136, 255, 0.1); box-shadow: 0 0 20px rgba(0, 136, 255, 0.2); }

.lesson-time { width: 18vw; text-align: center; border-right: 1px solid #444; padding-right: 1.5vw; margin-right: 1.5vw; }
.lesson-time strong { color: #0088ff; font-size: 2.5vw; display: block; }

.lesson-details { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
.lesson-title { font-size: 2vw; font-weight: bold; color: #fff; margin-bottom: 0.5vh; }
.lesson-sub { font-size: 1.5vw; color: #aaa; display: flex; gap: 2vw; }
.lesson-sub span { display: flex; align-items: center; }
.lesson-sub span.teacher { color: #64b5f6; }
.lesson-sub span.room { color: #81c784; }

.break-bar { display: none; height: 6px; background-color: #0088ff; border-radius: 3px; margin: 0.5vh 0; box-shadow: 0 0 15px rgba(0, 136, 255, 0.6); }
.break-bar.active-break { display: block; animation: pulse-break 2s infinite; }

@keyframes pulse-break { 0% { opacity: 0.5; box-shadow: 0 0 10px rgba(0, 136, 255, 0.4); } 50% { opacity: 1; box-shadow: 0 0 25px rgba(0, 136, 255, 0.9); } 100% { opacity: 0.5; box-shadow: 0 0 10px rgba(0, 136, 255, 0.4); } }

/* --- STYLE KREATORA (WIZARD) --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(18, 18, 18, 0.95); display: none; justify-content: center; align-items: center; z-index: 9999; backdrop-filter: blur(5px); }
.modal-content { background: #2c2c2c; border-top: 6px solid #0088ff; border-radius: 15px; width: 90vw; max-width: 800px; height: 85vh; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,0.7); }
.modal-content h2 { text-align: center; color: #fff; margin: 3vh 0 1vh 0; font-size: 2rem; }
.tree-container { flex-grow: 1; overflow-y: auto; padding: 2vh 4vw; margin-bottom: 2vh; }

.tree-branch-header { font-size: 1.2rem; color: #ddd; padding: 12px 15px; background: #333; border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; border-left: 4px solid transparent; }
.tree-branch-header:hover { background: #444; border-left-color: #0088ff; color: #fff; }

.tree-children { padding-left: 20px; border-left: 2px dashed #444; margin-left: 15px; margin-bottom: 10px; display: none; }

.tree-leaf { font-size: 1.1rem; font-weight: bold; background: #1a1a1a; padding: 12px 15px; border-radius: 8px; border-left: 4px solid #0088ff; margin: 8px 0; cursor: pointer; transition: 0.2s; color: #0088ff; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.tree-leaf:hover { background: #0088ff; color: #fff; transform: translateX(5px); }

@media (max-width: 768px) {
  .settings-btn { font-size: 6vw; top: 1.5vh; }
  .sync-btn { font-size: 5vw; top: 2vh; right: 11vw; }
  .toast { width: 80%; text-align: center; font-size: 4vw; }
  
  .welcome-text { font-size: 5vw; }
  .path-text { font-size: 3vw; }
  .details-text { font-size: 2.5vw; }
  .clock-text { font-size: 12vw; }
  .date-text { font-size: 3.5vw; }
  .schedule-header { font-size: 4.5vw; }
  .nav-btn { font-size: 4vw; padding: 1.5vh 5vw; }
  .lesson-time { width: 25vw; }
  .lesson-time strong { font-size: 4vw; }
  .lesson-title { font-size: 3.5vw; }
  .lesson-sub { font-size: 2.5vw; flex-wrap: wrap; gap: 1vw; }
  .modal-content { height: 95vh; width: 95vw; }
  .tree-branch-header, .tree-leaf { font-size: 4.5vw; padding: 15px; }
}