/* HF8: V2 sandbox preview → production cleanup */
@media all {
  #app .control-panel,
  #app .aurora-blur,
  #app .proposal-badge,
  #app .proposal-title,
  #app .proposal-desc,
  #app .theme-selection-box,
  #app .proposal-btn-grid {
    display: none !important;
  }
  
  #app .master-layout {
    display: block !important;
    grid-template-columns: none !important;
    padding: 0 !important;
    background: var(--bg) !important;
  }
  
  #app .phone-mockup,
  #app #phone-device-frame {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  #app .phone-notch-island {
    display: none !important;
  }
  
  /* Tema picker mobil bottom-bar versiyonunu da gizle */
  #app .mobile-theme-btn,
  #app .mobile-theme-selector {
    display: none !important;
  }
}

/* ===== MARYO F1 PDF EZBERLETME COCKPIT OVERLAY ===== */
.maryo-pdf-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 25, 0.94);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  z-index: 10001; /* Above voice but below error boundary */
  display: flex;
  flex-direction: column;
  padding: 24px 20px 40px 20px;
  animation: maryoPdfFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--txt-primary, white);
  overflow-y: auto;
  font-family: 'Outfit', sans-serif;
}
.maryo-pdf-overlay.hidden {
  display: none !important;
}
@keyframes maryoPdfFadeIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.pdf-drop-zone {
  border: 2px dashed rgba(108, 92, 231, 0.3);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 24px;
  padding: 40px 20px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  margin-top: 20px;
}
.pdf-drop-zone.hover {
  border-color: var(--purple, #6C5CE7);
  background: rgba(108, 92, 231, 0.05);
  box-shadow: 0 0 20px rgba(108, 92, 231, 0.2);
}

.pdf-mode-chip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.1));
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--txt-primary, white);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pdf-mode-chip.active {
  background: linear-gradient(135deg, var(--purple, #6C5CE7) 0%, #a855f7 100%);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3);
}

.pdf-option-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-glass, rgba(255,255,255,0.1));
  border-radius: 16px;
  padding: 14px;
  text-align: left;
  font-size: 14px;
  color: var(--txt-primary, white);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}
.pdf-option-btn:hover {
  background: rgba(108, 92, 231, 0.1) !important;
  border-color: var(--purple, #6C5CE7) !important;
}

@keyframes maryoStickerPop {
  0% { transform: scale(0.5) rotate(-10deg); opacity: 0; }
  70% { transform: scale(1.1) rotate(5deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.latex-inline {
  font-family: 'Cambria Math', 'Times New Roman', serif;
  font-style: italic;
  padding: 0 2px;
}

.latex-block {
  font-family: 'Cambria Math', 'Times New Roman', serif;
  text-align: center;
  margin: 10px 0;
  padding: 10px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  overflow-x: auto;
}

/* ===== MARYO İKİNCİ DEFTER PIN SETUP & GİRİŞ MODALLARI ===== */
.maryo-notebook-auth-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 20, 0.96);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  z-index: 10003;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  animation: maryoPdfFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--txt-primary, white);
  font-family: 'Outfit', sans-serif;
}
.maryo-notebook-auth-modal.hidden {
  display: none !important;
}

.notebook-pin-input {
  width: 50px;
  height: 50px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-glass, rgba(255,255,255,0.1));
  border-radius: 12px;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  color: white;
  margin: 0 4px;
  outline: none;
  transition: all 0.2s;
}
.notebook-pin-input:focus {
  border-color: var(--purple, #6C5CE7);
  box-shadow: 0 0 10px rgba(108,92,231,0.3);
}

.notebook-recovery-input {
  width: 100%;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  color: white;
  margin-bottom: 12px;
  outline: none;
}
.notebook-recovery-input:focus {
  border-color: var(--purple, #6C5CE7);
}

/* ===== MARYO F2 SESLİ GÜNLÜK OVERLAY ===== */
.maryo-voice-daily-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 30, 0.95);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  z-index: 10000; /* pdf overlay'in hemen altı/üstü */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 40px 24px 60px 24px;
  animation: maryoVoiceFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--txt-primary, white);
  font-family: 'Outfit', sans-serif;
}
.maryo-voice-daily-overlay.hidden {
  display: none !important;
}
@keyframes maryoVoiceFadeIn {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: scale(1); }
}

.voice-daily-mic-btn {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple, #6C5CE7) 0%, #a855f7 100%);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(108, 92, 231, 0.4);
  transition: all 0.3s ease;
}
.voice-daily-mic-btn.recording {
  animation: micPulse 1.5s infinite alternate;
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.6);
  background: linear-gradient(135deg, #ef4444 0%, #ff7675 100%);
}
@keyframes micPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

.voice-daily-timer {
  font-size: 32px;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  color: #fff;
  margin-top: 10px;
  text-shadow: 0 0 10px rgba(255,255,255,0.2);
}

/* ===== CHATGPT VOICE CONVERSATION OVERLAY ===== */
.voice-conv-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 20, 0.96);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 40px 20px 60px 20px;
  animation: fadeInOverlay 0.25s ease-out;
}
.voice-conv-overlay.hidden {
  display: none !important;
}
@keyframes fadeInOverlay {
  from { opacity: 0; transform: scale(1.05); }
  to { opacity: 1; transform: scale(1); }
}
.voice-conv-close-btn {
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.voice-conv-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}
.voice-conv-circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--purple) 0%, transparent 70%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 40px rgba(191, 90, 242, 0.2);
}
.voice-conv-circle.state-listening {
  animation: pulseListening 1.8s ease-in-out infinite;
  background: radial-gradient(circle, var(--blue) 0%, transparent 70%);
  box-shadow: 0 0 40px rgba(10, 132, 255, 0.25);
}
.voice-conv-circle.state-recording {
  transform: scale(var(--vad-scale, 1.08));
  background: radial-gradient(circle, #e9d5ff 0%, var(--purple) 50%, transparent 80%);
  box-shadow: 0 0 60px rgba(191, 90, 242, 0.45);
}
.voice-conv-circle.state-processing {
  animation: rotateProcessing 1.2s linear infinite;
  background: radial-gradient(circle, var(--orange) 0%, transparent 70%);
  box-shadow: 0 0 40px rgba(255, 159, 10, 0.3);
}
.voice-conv-circle.state-responding {
  animation: pulseResponding 1.2s ease-in-out infinite alternate;
  background: radial-gradient(circle, var(--green) 0%, transparent 70%);
  box-shadow: 0 0 40px rgba(50, 215, 75, 0.3);
}
@keyframes pulseListening {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes rotateProcessing {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes pulseResponding {
  0% { transform: scale(1); }
  100% { transform: scale(1.06); }
}
.voice-conv-status-text {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-top: 24px;
  text-align: center;
  letter-spacing: 0.5px;
}
.voice-conv-display-box {
  width: 100%;
  max-width: 320px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px;
  margin-top: 16px;
  max-height: 120px;
  overflow-y: auto;
}
.voice-conv-display-title {
  font-size: 10px;
  font-weight: 800;
  color: var(--txt3);
  text-transform: uppercase;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.voice-conv-display-content {
  font-size: 13px;
  line-height: 1.5;
  color: var(--txt2);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',sans-serif;background:#000;color:#fff;overscroll-behavior:none}
input,button,select,textarea{font-family:inherit;font-size:16px}
button{cursor:pointer}
::-webkit-scrollbar{width:0;height:0}

:root{
  --blue:#0a84ff;--purple:#bf5af2;--green:#32d74b;
  --red:#ff453a;--orange:#ff9f0a;--teal:#5ac8fa;
  --bg:#000;--bg2:#1c1c1e;--bg3:#2c2c2e;--bg4:#3a3a3c;
  --txt:#fff;--txt2:rgba(255,255,255,.6);--txt3:rgba(255,255,255,.28);
  --sep:rgba(255,255,255,.1);--r:16px;
}

/* ===== LOGIN — Aurora ===== */
#login{position:fixed;inset:0;background:#050505;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;padding:32px 24px;overflow:hidden}
#login::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 320px 320px at 30% 18%,rgba(0,210,140,.28) 0%,transparent 70%),radial-gradient(ellipse 280px 260px at 80% 72%,rgba(100,60,255,.22) 0%,transparent 70%),radial-gradient(ellipse 220px 220px at 60% 42%,rgba(0,180,255,.12) 0%,transparent 60%);animation:aurora 7s ease-in-out infinite alternate;pointer-events:none}
@keyframes aurora{0%{opacity:.7}100%{opacity:1;transform:scale(1.06)}}
.login-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:100%;max-width:340px}
.login-logo-wrap{margin-bottom:36px;text-align:center}
.login-logo{width:60px;height:60px;border-radius:18px;background:rgba(255,255,255,.06);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 18px}
.login-title{font-size:26px;font-weight:700;letter-spacing:-.5px;margin-bottom:6px;color:#fff;text-align:center}
.login-sub{font-size:11px;color:rgba(255,255,255,.4);letter-spacing:2px;text-transform:uppercase;text-align:center}
/* Biometric */
.bio-circle{width:108px;height:108px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:46px;margin:8px auto 16px;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bio-circle::before{content:'';position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(0,210,140,.35);animation:bpulse 2s ease-in-out infinite}
.bio-circle::after{content:'';position:absolute;inset:-16px;border-radius:50%;border:1px solid rgba(0,210,140,.12);animation:bpulse 2s ease-in-out infinite .5s}
.bio-circle.err::before,.bio-circle.err::after{border-color:rgba(255,80,80,.4)}
.bio-circle.err{animation:shake .42s}
@keyframes bpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0;transform:scale(1.18)}}
.bio-label{font-size:13px;color:rgba(255,255,255,.55);letter-spacing:.3px;margin-bottom:28px;text-align:center;min-height:18px}
.bio-alt{font-size:13px;color:rgba(0,210,140,.75);background:none;border:none;padding:10px 16px;cursor:pointer;letter-spacing:.3px;font-family:inherit}
.bio-alt:active{color:rgba(0,210,140,1)}
/* Bio enroll modal */
#bio-enroll{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;z-index:120;padding:24px}
#bio-enroll.show{display:flex}
.be-card{background:#1a1a1c;border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:28px 24px;max-width:340px;width:100%;text-align:center}
.be-icon{font-size:48px;margin-bottom:14px}
.be-title{font-size:19px;font-weight:700;color:#fff;margin-bottom:8px}
.be-desc{font-size:13px;color:rgba(255,255,255,.55);line-height:1.5;margin-bottom:22px}
.be-actions{display:flex;gap:10px}
.be-btn{flex:1;padding:13px;border-radius:14px;border:none;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.be-btn-y{background:linear-gradient(135deg,#0a84ff,#0066cc);color:#fff}
.be-btn-n{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7)}
.pin-dots{display:flex;justify-content:center;gap:18px;margin-bottom:44px}
.pin-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--bg4);transition:all .15s cubic-bezier(.34,1.56,.64,1)}
.pin-dot.filled{background:var(--blue);border-color:var(--blue);transform:scale(1.2);box-shadow:0 0 14px rgba(10,132,255,.55)}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:300px}
.pin-btn{height:72px;border-radius:50%;border:none;background:var(--bg2);font-size:26px;font-weight:400;color:#fff;transition:all .1s;display:flex;flex-direction:column;align-items:center;justify-content:center;user-select:none;-webkit-touch-callout:none}
.pin-btn:active{background:var(--bg4);transform:scale(.92)}
.pin-btn-sub{font-size:9px;font-weight:500;letter-spacing:.5px;color:var(--txt2);line-height:1;margin-top:1px}
.pin-del{background:transparent;font-size:22px}
.pin-del:active{background:var(--bg2)}
.pin-space{background:transparent;pointer-events:none}
.login-err{color:var(--red);font-size:13px;margin-top:20px;min-height:20px;font-weight:600;text-align:center}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-12px)}40%{transform:translateX(12px)}60%{transform:translateX(-8px)}80%{transform:translateX(8px)}}
.shake{animation:shake .4s ease}

/* ===== APP ===== */
#app{display:none;height:100%;flex-direction:column}
#app.show{display:flex}

/* ===== HEADER ===== */
#hdr-old-v1-inactive{background:var(--bg2);padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 14px;flex-shrink:0;border-bottom:1px solid var(--sep)}
.hdr-inner{display:flex;align-items:center;gap:10px;max-width:520px;margin:0 auto}
.hdr-photo{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--blue));display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;overflow:hidden;cursor:pointer;border:2px solid var(--bg4)}
.hdr-photo img{width:100%;height:100%;object-fit:cover}
.hdr-info{flex:1;min-width:0}
.hdr-greeting{font-size:12px;color:var(--txt2);font-weight:500}
.hdr-name{font-size:17px;font-weight:700;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-right{display:flex;align-items:center;gap:8px}
.hdr-icon-btn{background:var(--bg3);border:none;border-radius:10px;color:var(--txt2);width:36px;height:36px;font-size:17px;display:flex;align-items:center;justify-content:center;position:relative;transition:background .15s}
.hdr-icon-btn:active{background:var(--bg4);color:#fff}
.notif-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid var(--bg2);display:none}
.notif-dot.show{display:block}
/* Sprint Gun 7 D2 — Realtime connection indicator */
.rt-dot{width:9px;height:9px;border-radius:50%;background:#777;margin-right:4px;transition:background .2s,box-shadow .2s;cursor:pointer;position:relative}
.rt-dot.live{background:#3ad26b;box-shadow:0 0 6px rgba(58,210,107,.55)}
.rt-dot.poll{background:#f0b440}
.rt-dot.off{background:#e55}
/* Sprint Gun 7 D5 — Realtime detail popover */
.rt-pop{position:absolute;top:calc(env(safe-area-inset-top,0px) + 56px);right:14px;background:var(--bg3,#1d1f24);border:1px solid var(--sep,#333);border-radius:12px;padding:12px 14px;font-size:12px;color:#eee;z-index:250;box-shadow:0 8px 24px rgba(0,0,0,.5);min-width:220px;max-width:280px;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .15s,transform .15s}
.rt-pop.show{opacity:1;transform:translateY(0);pointer-events:auto}
.rt-pop-title{font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:6px;font-size:13px}
.rt-pop-row{display:flex;justify-content:space-between;padding:3px 0;color:var(--txt2,#aaa)}
.rt-pop-row b{color:#fff;font-weight:600}
.rt-pop-mode-live{color:#3ad26b}
.rt-pop-mode-poll{color:#f0b440}
.rt-pop-mode-off{color:#e55}
/* Sprint Gun 7 D7 — Offline banner (network disconnected) */
.offline-banner{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);left:50%;transform:translate(-50%,-180%);background:#e55;color:#fff;padding:8px 16px;border-radius:20px;font-size:13px;font-weight:600;z-index:280;box-shadow:0 6px 18px rgba(229,85,85,.45);transition:transform .3s cubic-bezier(.2,.9,.2,1.1);display:flex;align-items:center;gap:8px}
.offline-banner.show{transform:translate(-50%,0)}
.offline-banner::before{content:'';width:8px;height:8px;border-radius:50%;background:#fff;animation:offline-pulse 1.5s ease-in-out infinite}
@keyframes offline-pulse{0%,100%{opacity:.6}50%{opacity:1}}

/* ===== CONTENT ===== */
#content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 16px calc(84px + env(safe-area-inset-bottom,0px));max-width:520px;margin:0 auto;width:100%}
.tab-p{display:none}.tab-p.active{display:block}

/* ===== BOTTOM NAV ===== */
#nav-old-v1-inactive{position:fixed;bottom:0;left:0;right:0;background:rgba(28,28,30,.92);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--sep);padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px));display:flex}
.nav-btn{flex:1;min-width:0;border:none;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 1px;min-height:48px;color:var(--txt3);font-size:8.8px;font-weight:600;letter-spacing:.1px;transition:color .15s}
.nav-btn.active{color:var(--blue)}
.nav-btn .ni{font-size:19px;line-height:1}

/* ===== CARDS ===== */
.card{background:var(--bg2);border-radius:18px;padding:16px;margin-bottom:12px;overflow:hidden}
.card-ttl{font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--txt2);margin-bottom:12px;text-transform:uppercase}
.sec-ttl{font-size:20px;font-weight:700;letter-spacing:-.4px;margin:20px 0 10px;padding-left:2px}
.sec-ttl:first-child{margin-top:4px}

/* ===== LESSON CARD ===== */
.lesson-card{background:linear-gradient(135deg,#0d1f4a,#112060);border-radius:20px;padding:20px;margin-bottom:14px;position:relative;overflow:hidden;border:1px solid rgba(10,132,255,.2)}
.lesson-card::after{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(10,132,255,.2),transparent 70%);pointer-events:none}
.lesson-lbl{font-size:11px;font-weight:700;letter-spacing:1px;color:rgba(90,200,250,.9);margin-bottom:8px;text-transform:uppercase}
.lesson-date{font-size:24px;font-weight:700;letter-spacing:-.5px;margin-bottom:3px}
.lesson-time{font-size:15px;color:var(--txt2);margin-bottom:16px}
.lesson-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(10,132,255,.2);border:1px solid rgba(10,132,255,.3);border-radius:12px;padding:7px 14px;font-size:13px;font-weight:700;color:var(--blue)}
.lesson-subject{position:absolute;top:20px;right:20px;background:rgba(255,255,255,.07);border-radius:10px;padding:5px 10px;font-size:12px;font-weight:700;color:var(--txt2);max-width:100px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== NOTE CARD ===== */
.note-card{background:linear-gradient(135deg,rgba(191,90,242,.12),rgba(191,90,242,.05));border-radius:18px;padding:16px;margin-bottom:14px;border:1px solid rgba(191,90,242,.25)}
.note-lbl{font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--purple);margin-bottom:8px;text-transform:uppercase}
.note-txt{font-size:15px;color:#fff;line-height:1.6}

/* ===== STAT CARDS ===== */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.stat-card{background:var(--bg2);border-radius:16px;padding:14px 10px;text-align:center}
.stat-num{font-size:26px;font-weight:700;letter-spacing:-.5px}
.stat-lbl{font-size:11px;font-weight:600;color:var(--txt2);margin-top:2px}
.stat-card.blue{background:rgba(10,132,255,.12);border:1px solid rgba(10,132,255,.2)}.stat-card.blue .stat-num{color:var(--blue)}
.stat-card.green{background:rgba(50,215,75,.1);border:1px solid rgba(50,215,75,.2)}.stat-card.green .stat-num{color:var(--green)}
.stat-card.purple{background:rgba(191,90,242,.1);border:1px solid rgba(191,90,242,.2)}.stat-card.purple .stat-num{color:var(--purple)}

/* ===== HOMEWORK ===== */
.hw-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--sep)}
.hw-item:last-child{border-bottom:none}
.hw-status{width:36px;height:36px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px}
.hw-status.pending{background:rgba(255,69,58,.15)}
.hw-status.done{background:rgba(50,215,75,.12)}
.hw-status.partial{background:rgba(255,159,10,.12)}
.hw-body{flex:1;min-width:0}
.hw-title{font-size:15px;font-weight:600;color:#fff;margin-bottom:3px;line-height:1.35}
.hw-meta{font-size:12px;color:var(--txt2);margin-bottom:5px}
.hw-badge{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;margin-right:4px}
.b-red{background:rgba(255,69,58,.15);color:var(--red)}
.b-orange{background:rgba(255,159,10,.15);color:var(--orange)}
.b-green{background:rgba(50,215,75,.12);color:var(--green)}
.b-gray{background:var(--bg3);color:var(--txt2)}
.grade-pill{display:inline-flex;align-items:center;gap:4px;background:rgba(10,132,255,.15);border:1px solid rgba(10,132,255,.25);color:var(--blue);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;margin-top:4px}
.feedback{font-size:13px;color:var(--txt2);margin-top:5px;line-height:1.45;font-style:italic}
.hw-see-more{font-size:13px;color:var(--blue);text-align:center;padding:10px 0;font-weight:600;cursor:pointer}

/* ===== MATERYALLER ===== */
.mat-group-title{font-size:11px;color:var(--txt2);text-transform:uppercase;letter-spacing:1px;font-weight:700;margin:20px 0 10px;padding-left:2px}
.mat-group-title:first-child{margin-top:4px}
.mat-item{display:flex;gap:12px;padding:14px 12px;background:var(--bg2);border:1px solid var(--bg3);border-radius:14px;margin-bottom:8px;align-items:center}
.mat-icon{width:42px;height:42px;border-radius:12px;background:rgba(10,132,255,.15);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.mat-icon.daily{background:rgba(191,90,242,.15)}
.mat-icon.ann{background:rgba(255,159,10,.15)}
.mat-body{flex:1;min-width:0}
.mat-title{font-size:14px;font-weight:600;color:#fff;margin-bottom:3px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mat-meta{font-size:11px;color:var(--txt2)}
.mat-dl{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:rgba(10,132,255,.18);color:var(--blue);border:none;display:flex;align-items:center;justify-content:center;font-size:18px;text-decoration:none;cursor:pointer;transition:background .15s}
.mat-dl:active{background:rgba(10,132,255,.35)}
.mat-empty{text-align:center;padding:40px 20px;color:var(--txt2);font-size:14px}
.mat-empty .empty-icon{font-size:48px;margin-bottom:12px;opacity:.5}

/* ===== AJANDA ===== */
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal-month-lbl{font-size:17px;font-weight:700;letter-spacing:-.3px}
.cal-nav-btn{background:var(--bg3);border:none;color:var(--txt);width:32px;height:32px;border-radius:50%;font-size:16px;display:flex;align-items:center;justify-content:center}
.cal-nav-btn:active{background:var(--bg4)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.cal-day-name{text-align:center;font-size:11px;font-weight:700;color:var(--txt2);padding:5px 0;letter-spacing:.2px}
.cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:14px;font-weight:400;color:var(--txt2);cursor:pointer;position:relative;transition:background .15s}
.cal-day.cur-month{color:#fff;font-weight:500}
.cal-day.other-month{opacity:.25}
.cal-day.today{background:var(--red)!important;color:#fff;font-weight:700}
.cal-day.selected{background:var(--blue);color:#fff;font-weight:700}
.cal-day.lesson-day{background:rgba(10,132,255,.18);color:var(--blue);font-weight:700}
.cal-day.hw-day:not(.lesson-day){background:rgba(255,159,10,.15);color:var(--orange);font-weight:700}
.cal-day.agenda-day::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--purple)}
.cal-day.today.agenda-day::after,.cal-day.selected.agenda-day::after{background:rgba(255,255,255,.7)}
.cal-day:active{opacity:.7}

.agenda-section{margin-top:16px}
.agenda-date-ttl{font-size:15px;font-weight:700;color:var(--txt2);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.agenda-date-ttl span{flex:1}
.add-ev-btn{background:rgba(10,132,255,.15);border:1px solid rgba(10,132,255,.25);color:var(--blue);border-radius:10px;padding:6px 12px;font-size:13px;font-weight:700}
.add-ev-btn:active{background:rgba(10,132,255,.25)}
.ev-list{display:flex;flex-direction:column;gap:8px}
.ev-item{background:var(--bg3);border-radius:14px;padding:13px 14px;display:flex;align-items:center;gap:12px}
.ev-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.ev-body{flex:1;min-width:0}
.ev-title{font-size:14px;font-weight:600;color:#fff}
.ev-sub{font-size:12px;color:var(--txt2);margin-top:2px}
.ev-del{background:none;border:none;color:var(--txt3);font-size:18px;padding:4px}
.ev-del:active{color:var(--red)}
.no-ev{text-align:center;padding:20px;color:var(--txt2);font-size:14px}

/* Add Event Sheet */
#add-ev-sheet{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:200;display:none;align-items:flex-end;justify-content:center}
#add-ev-sheet.show{display:flex}
.sheet-card{background:var(--bg2);border-radius:26px 26px 0 0;padding:8px 0 calc(env(safe-area-inset-bottom,0px) + 20px);width:100%;max-width:520px}
.sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--bg4);margin:0 auto 16px}
.sheet-hdr{display:flex;align-items:center;justify-content:space-between;padding:0 20px 16px;border-bottom:1px solid var(--sep)}
.sheet-ttl{font-size:18px;font-weight:700}
.sheet-cancel{background:none;border:none;color:var(--txt2);font-size:15px}
.sheet-body{padding:16px 20px}
.ev-type-row{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;padding-bottom:4px}
.ev-type-chip{padding:8px 14px;border-radius:999px;border:1.5px solid var(--bg4);background:var(--bg3);font-size:13px;font-weight:700;color:var(--txt2);white-space:nowrap;flex-shrink:0}
.ev-type-chip.sel{border-color:var(--purple);background:rgba(191,90,242,.15);color:var(--purple)}

/* ===== ASISTAN / TAYLANA SOR ===== */
#p-tasor,#p-taylan{display:flex;flex-direction:column;height:calc(100vh - 60px - env(safe-area-inset-top,0px) - 84px - env(safe-area-inset-bottom,0px));padding:0;margin:0 -16px}
.tasor-msgs{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 16px 8px;display:flex;flex-direction:column;gap:10px}
.tasor-welcome{text-align:center;padding:24px 20px;color:var(--txt2)}
.tasor-welcome-icon{font-size:56px;margin-bottom:12px;display:block}
.tasor-welcome-title{font-size:18px;font-weight:700;color:#fff;margin-bottom:8px}
.tasor-welcome-sub{font-size:14px;line-height:1.55}

/* Maryo avatar uyku animasyonu (İŞ #38) */
@keyframes maryo-uyku {
  0%, 100% { transform: scale(1) translateY(0); opacity: 0.8; }
  50%      { transform: scale(0.98) translateY(2px); opacity: 0.7; }
}
@keyframes maryo-uyku-z {
  0%   { opacity: 0; transform: translateY(0); }
  50%  { opacity: 1; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(-16px); }
}
.tasor-welcome img.sleeping,
.greet-avatar.sleeping,
.maryo-avatar.sleeping {
  animation: maryo-uyku 3s ease-in-out infinite;
  filter: brightness(0.7) saturate(0.6);
  position: relative;
}
.tasor-welcome img.sleeping::after,
.greet-avatar.sleeping::after,
.maryo-avatar.sleeping::after {
  content: '💤';
  position: absolute;
  top: -15px;
  right: -10px;
  font-size: 24px;
  animation: maryo-uyku-z 2s ease-in-out infinite;
}
.msg{max-width:82%;display:flex;flex-direction:column;gap:3px}
.msg.user{align-self:flex-end;align-items:flex-end}
.msg.ai{align-self:flex-start;align-items:flex-start}
.msg-bubble{padding:12px 15px;border-radius:18px;font-size:15px;line-height:1.5;word-break:break-word}
.msg.user .msg-bubble{background:var(--blue);color:#fff;border-bottom-right-radius:5px}
.msg.ai .msg-bubble{background:var(--bg3);color:#fff;border-bottom-left-radius:5px;position:relative}
.msg-copy-btn{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.3);border:none;border-radius:8px;width:28px;height:28px;font-size:13px;cursor:pointer;opacity:.5;transition:opacity .15s}
.msg.ai .msg-bubble:hover .msg-copy-btn{opacity:.9}
.msg-copy-btn:active{opacity:1;background:rgba(108,92,231,.5)}
.msg.ai .msg-bubble.thinking{color:var(--txt2);font-style:italic}
@keyframes _typingDots {
  0%, 20% { opacity: 0.2; }
  50% { opacity: 1; }
  80%, 100% { opacity: 0.2; }
}
.msg-bubble.thinking::after {
  content: ' ●●●';
  animation: _typingDots 1.4s ease-in-out infinite;
  color: var(--purple);
  margin-left: 4px;
}
.msg-time{font-size:10px;color:var(--txt3);padding:0 4px}
.tasor-bar{padding:10px 16px;border-top:1px solid var(--sep);background:var(--bg2);display:flex;align-items:flex-end;gap:10px;flex-shrink:0}
.tasor-inp{flex:1;background:var(--bg3);border:1.5px solid transparent;border-radius:22px;padding:11px 16px;font-size:15px;color:#fff;outline:none;resize:none;max-height:120px;min-height:44px;-webkit-appearance:none;transition:border-color .15s;line-height:1.4}
.tasor-inp:focus{border-color:var(--blue)}
.tasor-inp::placeholder{color:var(--txt3)}
.tasor-mic{width:44px;height:44px;border-radius:50%;border:none;background:var(--bg3);color:var(--txt2);font-size:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.tasor-mic.recording{background:var(--red);color:#fff;animation:pulse .8s infinite}
.tasor-mic:active{opacity:.7}
.tasor-send{width:44px;height:44px;border-radius:50%;border:none;background:var(--blue);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s}
.tasor-send:active{opacity:.7}
.tasor-send:disabled{background:var(--bg4);color:var(--txt3)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.quick-chips{display:flex;gap:8px;padding:10px 16px 0;overflow-x:auto}
.quick-chip{background:var(--bg3);border:1.5px solid var(--bg4);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--txt2);white-space:nowrap;flex-shrink:0}
.quick-chip:active{background:rgba(10,132,255,.15);border-color:var(--blue);color:var(--blue)}
.msg-actions{margin-top:6px;padding-left:2px;display:flex;gap:6px;flex-wrap:wrap}
.ilet-btn{background:rgba(191,90,242,.12);border:1px solid rgba(191,90,242,.25);color:var(--purple);border-radius:10px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer}
.ilet-btn:active{background:rgba(191,90,242,.25)}
.speak-btn{background:rgba(52,199,89,.12);border:1px solid rgba(52,199,89,.3);color:#34c759;border-radius:10px;padding:6px 10px;font-size:13px;cursor:pointer;min-width:36px}
.speak-btn:active{background:rgba(52,199,89,.25)}
.voice-mode-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:var(--bg2);border-bottom:1px solid var(--border)}
.voice-mode-lbl{font-size:13px;color:var(--txt2);font-weight:600}
.voice-mode-toggle{border:none;border-radius:20px;padding:5px 14px;font-size:12px;font-weight:700;cursor:pointer;background:var(--bg3);color:var(--txt2);transition:.2s}
.voice-mode-toggle.on{background:rgba(52,199,89,.2);color:#34c759;border:1px solid rgba(52,199,89,.4)}

/* ===== TALEP ===== */
.input-method-row{display:flex;gap:8px;margin-bottom:20px}
.im-btn{flex:1;padding:14px 6px;border-radius:16px;border:1.5px solid var(--bg4);background:var(--bg3);display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--txt2);font-size:11px;font-weight:700;transition:all .18s}
.im-btn .im-icon{font-size:28px;line-height:1}
.im-btn.sel{border-color:var(--blue);background:rgba(10,132,255,.12);color:var(--blue)}
.im-btn:active{opacity:.7}
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.type-btn{padding:14px 8px;border-radius:14px;border:1.5px solid var(--bg4);background:var(--bg3);display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--txt2);font-size:11px;font-weight:700;transition:all .18s}
.type-btn .ti{font-size:26px}
.type-btn.sel{border-color:var(--purple);background:rgba(191,90,242,.1);color:var(--purple)}
.lbl{font-size:12px;font-weight:700;letter-spacing:.3px;color:var(--txt2);margin-bottom:6px;display:block}
.lbl-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:12px;font-weight:700;letter-spacing:.3px;color:var(--txt2)}
.lbl-voice-btn{background:rgba(10,132,255,.15);border:1px solid rgba(10,132,255,.3);color:var(--blue);border-radius:10px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;min-height:30px}
.lbl-voice-btn:active{background:rgba(10,132,255,.3)}
.lbl-voice-btn.listening{background:rgba(255,69,58,.18);border-color:rgba(255,69,58,.45);color:#ff453a;animation:listenPulse 1.5s ease-in-out infinite}
@keyframes listenPulse{0%,100%{opacity:1}50%{opacity:.65}}
.inp{background:var(--bg3);border:1.5px solid transparent;border-radius:12px;padding:13px 14px;width:100%;font-size:15px;outline:none;color:#fff;transition:border-color .18s;margin-bottom:10px;-webkit-appearance:none}
.inp:focus{border-color:var(--blue);background:var(--bg2)}
.inp::placeholder{color:var(--txt3)}
textarea.inp{resize:none;min-height:80px}
.photo-preview{width:100%;border-radius:14px;margin-bottom:10px;max-height:200px;object-fit:cover;display:none}
.file-preview{background:var(--bg3);border-radius:12px;padding:12px 14px;display:none;align-items:center;gap:10px;margin-bottom:10px}
.file-preview-icon{font-size:28px}
.file-preview-name{flex:1;font-size:13px;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-preview-del{background:none;border:none;color:var(--red);font-size:18px}
.send-btn{width:100%;padding:16px;background:var(--blue);color:#fff;border:none;border-radius:14px;font-size:16px;font-weight:700;box-shadow:0 4px 20px rgba(10,132,255,.3);transition:opacity .15s}
.send-btn:active{opacity:.75}
.req-item{background:var(--bg3);border-radius:14px;padding:14px;margin-bottom:8px}
.req-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px}
.req-title{font-size:14px;font-weight:700;color:#fff;flex:1}
.req-meta{font-size:12px;color:var(--txt2)}
.st-p{background:rgba(255,159,10,.15);color:var(--orange);padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.st-a{background:rgba(50,215,75,.12);color:var(--green);padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.st-r{background:rgba(255,69,58,.12);color:var(--red);padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.teacher-reply{font-size:13px;color:var(--txt2);margin-top:6px;padding:8px 10px;background:var(--bg2);border-radius:10px;line-height:1.4}

/* ===== PROFİL ===== */
.prof-hero{text-align:center;padding:8px 0 24px}
.prof-photo{width:100px;height:100px;border-radius:50%;margin:0 auto 14px;background:linear-gradient(135deg,var(--purple),var(--blue));display:flex;align-items:center;justify-content:center;font-size:44px;cursor:pointer;overflow:hidden;position:relative;border:3px solid var(--bg4)}
.prof-photo img{width:100%;height:100%;object-fit:cover}
.photo-hint{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.6);color:#fff;font-size:9px;font-weight:700;text-align:center;padding:5px;letter-spacing:.3px}
.prof-name{font-size:24px;font-weight:700;letter-spacing:-.5px;margin-bottom:3px}
.prof-sub{font-size:14px;color:var(--txt2)}
.prof-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(10,132,255,.15);border:1px solid rgba(10,132,255,.25);color:var(--blue);border-radius:999px;padding:5px 14px;font-size:12px;font-weight:700;margin-top:10px}
.prof-menu{background:var(--bg2);border-radius:18px;overflow:hidden;margin-bottom:12px}
.prof-menu-item{display:flex;align-items:center;gap:14px;padding:15px 16px;border-bottom:1px solid var(--sep)}
.prof-menu-item:last-child{border-bottom:none}
.pm-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.pm-icon.blue{background:rgba(10,132,255,.2)}.pm-icon.purple{background:rgba(191,90,242,.2)}.pm-icon.green{background:rgba(50,215,75,.15)}.pm-icon.orange{background:rgba(255,159,10,.15)}.pm-icon.red{background:rgba(255,69,58,.15)}
.pm-label{flex:1;font-size:15px;font-weight:500}
.pm-value{font-size:14px;color:var(--txt2)}
.logout-btn{width:100%;padding:15px;background:rgba(255,69,58,.12);border:1px solid rgba(255,69,58,.2);color:var(--red);border-radius:14px;font-size:15px;font-weight:700}
.logout-btn:active{background:rgba(255,69,58,.2)}

/* ===== ANNOUNCEMENT ===== */
#ann-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:300;display:none;align-items:flex-end;justify-content:center;padding:0 0 calc(env(safe-area-inset-bottom,0px) + 20px)}
#ann-overlay.show{display:flex}
.ann-card{background:var(--bg2);border-radius:26px 26px 20px 20px;padding:8px 0 0;max-width:520px;width:100%;border:1px solid var(--sep)}
.ann-handle{width:36px;height:4px;border-radius:2px;background:var(--bg4);margin:0 auto 20px}
.ann-inner{padding:0 22px 22px;text-align:center}
.ann-icon{font-size:52px;margin-bottom:12px;line-height:1}
.ann-title{font-size:20px;font-weight:700;letter-spacing:-.4px;margin-bottom:8px;color:#fff}
.ann-body{font-size:15px;color:var(--txt2);line-height:1.6;margin-bottom:20px}
.ann-img{width:100%;border-radius:14px;margin-bottom:16px;max-height:180px;object-fit:cover}
.ann-close{width:100%;padding:16px;background:var(--blue);color:#fff;border:none;border-radius:14px;font-size:16px;font-weight:700}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.ann-card{animation:slideup .35s cubic-bezier(.32,0,.67,0)}

/* ===== Sprint Gun 7 D3 — Announcement Toast Banner ===== */
.ann-toast{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);left:12px;right:12px;background:linear-gradient(135deg,#6C5CE7,#8e7eff);color:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 10px 28px rgba(108,92,231,.45);z-index:300;transform:translateY(-180%);transition:transform .35s cubic-bezier(.2,.9,.2,1.1);max-width:560px;margin:0 auto;cursor:pointer}
.ann-toast.show{transform:translateY(0)}
.ann-toast-hdr{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:13px;opacity:.9}
.ann-toast-title{font-weight:700;font-size:15px;line-height:1.3;margin-bottom:3px;padding-right:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ann-toast-body{font-size:13px;line-height:1.4;opacity:.92;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ann-toast-close{position:absolute;top:8px;right:10px;color:#fff;opacity:.7;font-size:18px;background:none;border:none;cursor:pointer;padding:4px}
.ann-toast-close:active{opacity:1}

/* ===== NOTIFICATIONS ===== */
#notif-panel{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:200;display:none;flex-direction:column;justify-content:flex-end}
#notif-panel.show{display:flex}
.notif-sheet{background:var(--bg2);border-radius:26px 26px 0 0;padding:8px 0 calc(env(safe-area-inset-bottom,0px) + 20px);max-height:70vh;overflow-y:auto}
.notif-handle{width:36px;height:4px;border-radius:2px;background:var(--bg4);margin:0 auto 16px}
.notif-shdr{display:flex;align-items:center;justify-content:space-between;padding:0 20px 14px;border-bottom:1px solid var(--sep)}
.notif-shdr-title{font-size:18px;font-weight:700}
.notif-clear{background:none;border:none;color:var(--blue);font-size:14px;font-weight:600}
.notif-item{display:flex;align-items:flex-start;gap:12px;padding:12px 20px;border-bottom:1px solid var(--sep);position:relative;transition:background .15s}
.notif-item:last-child{border-bottom:none}
.notif-item.unread{background:rgba(108,92,231,.08)}
.notif-item.unread::before{content:'';position:absolute;left:6px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:#6C5CE7;box-shadow:0 0 6px rgba(108,92,231,.6)}
.notif-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;background:rgba(10,132,255,.15)}
.notif-body{flex:1;min-width:0}
.notif-ntitle{font-size:14px;font-weight:700;color:#fff;margin-bottom:2px;display:flex;align-items:center;gap:6px}
.notif-cloud{font-size:10px;opacity:.6}
.notif-nsub{font-size:13px;color:var(--txt2);line-height:1.4}
.notif-ntime{font-size:11px;color:var(--txt3);margin-top:3px}

/* ===== LOADING / EMPTY ===== */
.loading{text-align:center;padding:44px 20px;color:var(--txt2)}
.spin{display:inline-block;width:28px;height:28px;border:2.5px solid var(--bg3);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;margin-bottom:10px}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center;padding:36px 16px;color:var(--txt2)}
.empty-icon{font-size:44px;margin-bottom:10px;opacity:.6}
.empty-txt{font-size:14px;font-weight:500}

/* API Key screen */
.apikey-wrap{padding:24px 0}
.apikey-info{font-size:14px;color:var(--txt2);line-height:1.6;margin-bottom:16px}

/* ===== GÜNLÜK MESAJ ===== */
.daily-card{background:linear-gradient(135deg,rgba(255,159,10,.1),rgba(255,69,58,.08));border:1px solid rgba(255,159,10,.25);border-radius:18px;padding:16px;margin-bottom:14px;overflow:hidden}
.daily-card-lbl{font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--orange);margin-bottom:8px;text-transform:uppercase}
.daily-card-txt{font-size:15px;color:#fff;line-height:1.6;margin-bottom:10px;white-space:pre-wrap}
.daily-card-img{width:100%;max-height:260px;object-fit:cover;border-radius:12px;margin-top:4px}
.daily-card-date{font-size:11px;color:var(--txt3);margin-top:8px}

/* ===== PASİF UYARI (V1.4) ===== */
.passive-card{background:linear-gradient(135deg,rgba(255,159,10,.16),rgba(108,92,231,.08));border:1.5px solid rgba(255,159,10,.32);border-radius:18px;padding:16px;margin-bottom:14px;display:flex;align-items:center;gap:12px}
.passive-icon{font-size:34px;flex-shrink:0}
.passive-text{flex:1;min-width:0}
.passive-ttl{font-size:14px;font-weight:700;color:#fff;margin-bottom:2px}
.passive-sub{font-size:12.5px;color:var(--txt2);line-height:1.4}
.passive-actions{display:flex;gap:6px;margin-top:8px}
.passive-btn{background:rgba(255,255,255,.08);border:none;border-radius:10px;padding:6px 10px;color:#fff;font-size:11.5px;font-weight:600;cursor:pointer}

/* ===== SMART REFLECTION (V1.4) ===== */
.refl-card{background:linear-gradient(135deg,rgba(108,92,231,.16),rgba(38,208,124,.08));border:1.5px solid rgba(108,92,231,.4);border-radius:18px;padding:16px;margin-bottom:14px}
.refl-ttl{font-size:14px;font-weight:800;color:#fff;margin-bottom:4px}
.refl-sub{font-size:12.5px;color:var(--txt2);margin-bottom:14px;line-height:1.45}
.refl-q{margin-bottom:12px}
.refl-q-lbl{font-size:12px;font-weight:700;color:#a594ff;margin-bottom:6px;letter-spacing:.3px}
.refl-q-inp{width:100%;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 12px;font-size:13px;color:#fff;outline:none;resize:vertical;min-height:54px;font-family:inherit;line-height:1.45;box-sizing:border-box}
.refl-q-inp:focus{border-color:#6C5CE7}
.refl-actions{display:flex;gap:8px;margin-top:6px}
.refl-btn{flex:1;border:none;border-radius:12px;padding:11px;font-size:13px;font-weight:700;cursor:pointer}
.refl-btn-primary{background:linear-gradient(135deg,#6C5CE7,#8e7eff);color:#fff}
.refl-btn-secondary{background:rgba(255,255,255,.06);color:var(--txt2)}
.refl-done{background:rgba(38,208,124,.12);border:1.5px solid rgba(38,208,124,.4);border-radius:14px;padding:14px;color:#fff;font-size:13.5px;text-align:center;line-height:1.45}

/* ===== EXAM SPRINT MODE (V1.4) ===== */
.sprint-chip-row{display:flex;gap:8px;margin-bottom:14px}
.sprint-chip{flex:1;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.08);border-radius:14px;padding:10px 12px;font-size:13px;font-weight:600;color:var(--txt2);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.sprint-chip.on{background:linear-gradient(135deg,rgba(230,57,70,.18),rgba(243,114,44,.12));border-color:rgba(230,57,70,.5);color:#fff}
.sprint-chip.urgent{background:linear-gradient(135deg,rgba(255,159,10,.22),rgba(243,114,44,.16));border-color:rgba(255,159,10,.55);color:#ffb347;animation:sprintPulse 2s ease-in-out infinite}
@keyframes sprintPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,159,10,.0)}50%{box-shadow:0 0 0 4px rgba(255,159,10,.14)}}
@keyframes dtSkeleton{0%,100%{opacity:.5}50%{opacity:.85}}
@keyframes dtSlideUp{0%{transform:translateY(40px);opacity:0}100%{transform:translateY(0);opacity:1}}

/* ===== MARYO STICKER ANIMATION (V1.6.0) ===== */
.maryo-sticker-img {
  width: 120px;
  height: 120px;
  aspect-ratio: 1 / 1;
  display: block;
  margin: 8px auto;
  border-radius: 12px;
  animation: maryoStickerPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes maryoStickerPop {
  0% { transform: scale(0.5) rotate(-5deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ===== SKELETON UI SHIMMER (V1.5.1) ===== */
.skel {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.08) 37%,
    rgba(255, 255, 255, 0.03) 63%
  );
  background-size: 400% 100%;
  animation: maryo-shimmer 1.5s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

@keyframes maryo-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.skel-text {
  height: 12px;
  margin-bottom: 8px;
  width: 100%;
  border-radius: 4px;
}
.skel-text.short { width: 60%; }
.skel-text.medium { width: 85%; }

.skel-circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.skel-balloon {
  border-radius: 18px;
  padding: 16px;
  height: 80px;
  margin-bottom: 12px;
}

.skel-card {
  border-radius: 18px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 14px;
}
/* V1.4.15 — Sınav modu: sade ton (eğlence kartlarını yumuşat) */
body.exam-mode .leaderboard-card,
body.exam-mode .badges-card{display:none}
body.exam-mode #p-daily-msg .daily-card{opacity:.55}
body.exam-mode .stats-row{display:none !important}
body.exam-mode #p-passive .passive-card{opacity:.7}
body.exam-mode #p-evening{display:none}
body.exam-mode #p-greet .mood-tl-row{opacity:.7}
.sprint-card{background:linear-gradient(135deg,rgba(230,57,70,.14),rgba(243,114,44,.06));border:1.5px solid rgba(230,57,70,.35);border-radius:18px;padding:14px 16px;margin-bottom:14px}
.sprint-ttl{font-size:13px;font-weight:800;color:#ff6b6b;margin-bottom:4px;letter-spacing:.3px}
.sprint-sub{font-size:12px;color:var(--txt2);margin-bottom:12px}
.sprint-list{display:flex;flex-direction:column;gap:8px}
.sprint-item{background:rgba(0,0,0,.25);border-radius:12px;padding:10px 12px;font-size:13.5px;color:#fff;line-height:1.4;display:flex;align-items:flex-start;gap:8px}
.sprint-item-num{font-weight:800;color:#ff6b6b;min-width:18px}
.sprint-item-txt{flex:1}

/* ===== SABAH GÜNAYDIN + MOOD (V1.4) ===== */
.greet-card{background:linear-gradient(135deg,rgba(38,208,124,.12),rgba(108,92,231,.08));border:1px solid rgba(38,208,124,.22);border-radius:18px;padding:14px 16px;margin-bottom:14px}
.greet-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.greet-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#6C5CE7,#26d07c);display:flex;align-items:center;justify-content:center;font-size:22px}
.greet-text{flex:1;min-width:0}
.greet-line1{font-size:14px;font-weight:700;color:#fff;line-height:1.2;margin-bottom:2px}
.greet-line2{font-size:12px;color:var(--txt2);line-height:1.35}
.greet-todayload{font-size:13px;color:var(--txt2);background:rgba(0,0,0,.18);padding:8px 10px;border-radius:10px;margin-bottom:10px;line-height:1.4}
.mood-row{display:flex;justify-content:space-between;gap:6px}
.mood-btn{flex:1;background:rgba(255,255,255,.04);border:1.5px solid transparent;border-radius:12px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;transition:all .15s}
.mood-btn:hover,.mood-btn:active{background:rgba(255,255,255,.08)}
.mood-btn.selected{border-color:#26d07c;background:rgba(38,208,124,.12)}
.mood-emoji{font-size:22px;line-height:1}
.mood-lbl{font-size:10px;color:var(--txt2);font-weight:600}
.mood-tl-row{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mood-tl-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 2px;border-radius:8px;background:rgba(255,255,255,.03)}
.mood-tl-cell.today{background:rgba(108,92,231,.16);border:1px solid rgba(108,92,231,.4)}
.mood-tl-day{font-size:9px;color:var(--txt3);font-weight:600;letter-spacing:.3px}
.mood-tl-em{font-size:17px;line-height:1;height:20px;display:flex;align-items:center;justify-content:center}

/* ===== HAZIRLIK RADARI (V1.4) ===== */
.radar-card{background:linear-gradient(135deg,rgba(108,92,231,.12),rgba(38,208,124,.06));border:1px solid rgba(108,92,231,.25);border-radius:18px;padding:14px 14px 12px;margin-bottom:14px}
.radar-header{margin-bottom:12px}
.radar-title{font-size:11px;font-weight:700;letter-spacing:.5px;color:#a594ff;margin-bottom:6px;text-transform:uppercase}
.radar-headline{font-size:13.5px;color:#fff;line-height:1.45;font-weight:500}
.radar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end;margin-bottom:4px}
.radar-col{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;color:var(--txt2);padding:6px 2px;border-radius:10px;cursor:pointer;transition:background .15s}
.radar-col:active,.radar-col:hover{background:rgba(255,255,255,.05)}
.radar-bar-wrap{width:100%;max-width:30px;height:60px;background:rgba(255,255,255,.05);border-radius:6px;display:flex;align-items:flex-end;overflow:hidden}
.radar-bar{width:100%;border-radius:6px 6px 4px 4px;min-height:8px;transition:height .25s ease}
.radar-day-name{font-size:10px;font-weight:600;color:var(--txt2);letter-spacing:.3px}
.radar-day-num{font-size:11px;font-weight:700;color:var(--txt3)}
.radar-detail{margin-top:8px;background:rgba(0,0,0,.25);border-radius:12px;padding:10px 12px}
.radar-detail-head{font-size:12px;font-weight:700;color:#fff;margin-bottom:6px}
.radar-detail-body{display:flex;flex-direction:column;gap:4px}
.radar-detail-row{font-size:12.5px;color:var(--txt2);line-height:1.4}

/* ===== ROZETLER ===== */
.badges-card{background:var(--bg2);border-radius:18px;padding:16px;margin-bottom:14px}
.badges-ttl{font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--txt2);margin-bottom:12px;text-transform:uppercase;display:flex;align-items:center;justify-content:space-between}
.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.badge-item{background:var(--bg3);border-radius:14px;padding:12px 8px;text-align:center;position:relative;transition:transform .2s}
.badge-item.earned{background:rgba(10,132,255,.12);border:1px solid rgba(10,132,255,.25)}
.badge-item.earned .badge-icon{opacity:1}
.badge-icon{font-size:26px;display:block;margin-bottom:5px;opacity:.25;filter:grayscale(1);transition:all .3s}
.badge-item.earned .badge-icon{opacity:1;filter:none}
.badge-name{font-size:10px;font-weight:700;color:var(--txt2);letter-spacing:.2px}
.badge-item.earned .badge-name{color:var(--blue)}
.badge-desc{font-size:9px;color:var(--txt3);margin-top:2px}
.liga-card{border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:14px}
.liga-card.sampiyon{background:linear-gradient(135deg,rgba(255,214,0,.15),rgba(255,159,10,.1));border:1px solid rgba(255,214,0,.3)}
.liga-card.yildiz{background:linear-gradient(135deg,rgba(191,90,242,.15),rgba(10,132,255,.1));border:1px solid rgba(191,90,242,.25)}
.liga-card.roket{background:linear-gradient(135deg,rgba(10,132,255,.15),rgba(90,200,250,.1));border:1px solid rgba(10,132,255,.25)}
.liga-card.yukselenTR{background:linear-gradient(135deg,rgba(50,215,75,.1),rgba(50,215,75,.05));border:1px solid rgba(50,215,75,.2)}
.liga-icon{font-size:36px;flex-shrink:0}
.liga-info{flex:1}
.liga-name{font-size:17px;font-weight:700;letter-spacing:-.3px}
.liga-desc{font-size:12px;color:var(--txt2);margin-top:2px}
.liga-bar-wrap{margin-top:8px;background:var(--bg4);border-radius:8px;height:6px;overflow:hidden}
.liga-bar{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--blue),var(--purple));transition:width .6s cubic-bezier(.34,1.56,.64,1)}

/* ===== LEADERBOARD ===== */
.lb-card{background:var(--bg2);border-radius:18px;padding:16px;margin-bottom:14px}
.lb-ttl{font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--txt2);margin-bottom:12px;text-transform:uppercase}
.lb-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;margin-bottom:4px;transition:background .2s}
.lb-row.me{background:rgba(10,132,255,.14);border:1px solid rgba(10,132,255,.25)}
.lb-rank{font-size:15px;font-weight:800;width:28px;text-align:center;flex-shrink:0;color:var(--txt3)}
.lb-rank.r1{color:#FFD700;font-size:18px}
.lb-rank.r2{color:#C0C0C0}
.lb-rank.r3{color:#CD7F32}
.lb-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--blue));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0;position:relative}
.lb-crown{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:16px;line-height:1}
.lb-name{flex:1;font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-name.me-name{color:var(--blue)}
.lb-rate{font-size:13px;font-weight:700;flex-shrink:0}
.lb-bar-mini{height:4px;border-radius:4px;background:var(--bg4);margin-top:3px;overflow:hidden}
.lb-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--blue),var(--purple))}
.lb-myrank{text-align:center;font-size:12px;color:var(--txt2);margin-top:8px;padding-top:8px;border-top:1px solid var(--sep)}
.lb-myrank strong{color:#fff}

/* === V2 INTEGRATED STYLES === */

    :root {
      /* Theme B: Titanium Luxe (Now Default) - Premium Slate/Teal Aesthetic */
      --bg-dark: hsl(220, 12%, 8%);
      --bg-glass: rgba(22, 28, 36, 0.75);
      --bg-glass-heavy: rgba(28, 34, 46, 0.95);
      --bg-glass-active: rgba(20, 184, 166, 0.08); /* Teal tint */
      --border-glass: rgba(255, 255, 255, 0.07);
      --border-active: rgba(20, 184, 166, 0.35); /* Slate/Teal premium border */
      
      --purple: hsl(172, 66%, 50%); /* Crisp Teal primary accent */
      --purple-glow: rgba(20, 184, 166, 0.4);
      --green: hsl(142, 60%, 45%);
      --green-glow: rgba(34, 197, 94, 0.4);
      --red: hsl(355, 75%, 55%);
      --red-glow: rgba(239, 68, 68, 0.5);
      --yellow: hsl(38, 80%, 50%);
      --yellow-glow: rgba(234, 179, 8, 0.4);
      --cyan: hsl(190, 70%, 45%);
      --cyan-glow: rgba(6, 182, 212, 0.4);
      --blue: hsl(210, 60%, 45%);
      --blue-glow: rgba(59, 130, 246, 0.4);
      
      --txt-primary: #f8fafc;
      --txt-secondary: hsl(215, 15%, 85%);
      --txt-muted: hsl(215, 12%, 60%);
      
      --font-outfit: 'Outfit', sans-serif;
      --font-jakarta: 'Plus Jakarta Sans', sans-serif;
      
      --transition-smooth: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
      --panel-glow: 0 10px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(20, 184, 166, 0.05);
    }

    /* Theme Styles overrides */
    body.theme-cosmic {
      --bg-dark: hsl(260, 50%, 4%);
      --bg-glass: rgba(18, 12, 38, 0.55);
      --bg-glass-heavy: rgba(24, 16, 50, 0.85);
      --bg-glass-active: rgba(168, 85, 247, 0.18);
      --border-glass: rgba(255, 255, 255, 0.06);
      --border-active: rgba(168, 85, 247, 0.35);
      --purple: hsl(270, 85%, 65%);
      --purple-glow: rgba(168, 85, 247, 0.5);
      --green: hsl(152, 75%, 48%);
      --red: hsl(355, 90%, 60%);
      --yellow: hsl(45, 95%, 52%);
      --cyan: hsl(185, 90%, 50%);
      --blue: hsl(205, 95%, 55%);
      --txt-primary: #FFFFFF;
      --txt-secondary: hsl(260, 20%, 85%);
      --txt-muted: hsl(260, 15%, 65%);
      --panel-glow: 0 0 40px rgba(168, 85, 247, 0.2);
    }

    body.theme-titanium {
      --bg-dark: hsl(220, 12%, 8%);
      --bg-glass: rgba(22, 28, 36, 0.75);
      --bg-glass-heavy: rgba(28, 34, 46, 0.95);
      --bg-glass-active: rgba(20, 184, 166, 0.08);
      --border-glass: rgba(255, 255, 255, 0.07);
      --border-active: rgba(20, 184, 166, 0.35);
      --purple: hsl(172, 66%, 50%);
      --purple-glow: rgba(20, 184, 166, 0.4);
      --green: hsl(142, 60%, 45%);
      --red: hsl(355, 75%, 55%);
      --yellow: hsl(38, 80%, 50%);
      --cyan: hsl(190, 70%, 45%);
      --blue: hsl(210, 60%, 45%);
      --txt-primary: #f8fafc;
      --txt-secondary: hsl(215, 15%, 85%);
      --txt-muted: hsl(215, 12%, 60%);
      --panel-glow: 0 10px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(20, 184, 166, 0.05);
    }

    body.theme-gold {
      --bg-dark: hsl(20, 10%, 6%);
      --bg-glass: rgba(30, 26, 20, 0.7);
      --bg-glass-heavy: rgba(40, 36, 30, 0.95);
      --bg-glass-active: rgba(212, 175, 55, 0.1);
      --border-glass: rgba(212, 175, 55, 0.15);
      --border-active: rgba(212, 175, 55, 0.5);
      --purple: hsl(38, 62%, 50%);
      --purple-glow: rgba(212, 175, 55, 0.3);
      --green: hsl(145, 63%, 42%);
      --red: hsl(12, 76%, 53%);
      --yellow: hsl(45, 100%, 50%);
      --blue: hsl(200, 65%, 45%);
      --cyan: hsl(180, 60%, 45%);
      --txt-primary: #fcf8f2;
      --txt-secondary: hsl(38, 20%, 80%);
      --txt-muted: hsl(38, 15%, 55%);
      --panel-glow: 0 0 30px rgba(212, 175, 55, 0.15);
    }

    body.theme-nordic {
      --bg-dark: hsl(210, 20%, 98%);
      --bg-glass: rgba(255, 255, 255, 0.85);
      --bg-glass-heavy: rgba(255, 255, 255, 0.96);
      --bg-glass-active: rgba(30, 41, 59, 0.05);
      --border-glass: rgba(15, 23, 42, 0.08);
      --border-active: rgba(30, 41, 59, 0.3);
      --purple: hsl(215, 25%, 27%);
      --purple-glow: rgba(71, 85, 105, 0.2);
      --green: hsl(160, 84%, 39%);
      --red: hsl(0, 72%, 51%);
      --yellow: hsl(35, 92%, 50%);
      --blue: hsl(217, 91%, 60%);
      --cyan: hsl(188, 78%, 41%);
      --txt-primary: hsl(215, 47%, 15%);
      --txt-secondary: hsl(215, 25%, 27%);
      --txt-muted: hsl(215, 16%, 47%);
      --panel-glow: 0 10px 30px rgba(15, 23, 42, 0.06);
    }

    /* V2 Overrides for Legacy Homework Cards */
    .hw-item {
      background: var(--bg-glass) !important;
      border: 1px solid var(--border-glass) !important;
      border-radius: 14px !important;
      padding: 12px !important;
      margin-bottom: 8px !important;
      transition: all 0.3s ease !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 8px !important;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }
    body.theme-nordic .hw-item {
      background: #ffffff !important;
      border-color: rgba(0,0,0,0.06) !important;
      box-shadow: 0 4px 12px rgba(0,0,0,0.02) !important;
    }
    .hw-item:hover {
      background: var(--bg-glass-active) !important;
      border-color: var(--border-active) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 18px rgba(0,0,0,0.2) !important;
    }
    .hw-item:last-child {
      margin-bottom: 0 !important;
    }


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

    body {
      background-color: var(--bg-dark);
      background-image: 
        radial-gradient(circle at 10% 20%, rgba(20, 184, 166, 0.06) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(6, 182, 212, 0.05) 0%, transparent 45%);
      background-attachment: fixed;
      font-family: var(--font-jakarta);
      color: var(--txt-primary);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30px 20px;
      overflow-x: hidden;
      transition: background-color 0.5s ease, color 0.3s ease;
    }

    /* Glowing decorative orbs (Only visible on dark themes) */
    .aurora-blur {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: radial-gradient(circle at 70% 15%, rgba(20, 184, 166, 0.12) 0%, transparent 45%),
                  radial-gradient(circle at 20% 75%, rgba(6, 182, 212, 0.08) 0%, transparent 50%);
      pointer-events: none;
      z-index: -1;
      transition: opacity 0.5s ease;
    }
    body.theme-nordic .aurora-blur {
      opacity: 0.02;
    }

    /* Master Layout */
    .master-layout {
      width: 100%;
      max-width: 1200px;
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 40px;
      margin-top: 24px;
    }

    @media (max-width: 950px) {
      .master-layout {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 768px) {
      body {
        padding: 0 !important;
        background: var(--bg-dark) !important;
        overflow: hidden !important;
      }
      .aurora-blur {
        display: none !important;
      }
      .screen-area .aurora-blur {
        display: block !important;
      }
      .master-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
      }
      .control-panel {
        display: none !important;
      }
      .emulator-wrapper {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
      }
      .phone-mockup {
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 10 !important;
        background: var(--bg-dark) !important;
      }
      .phone-notch-island {
        display: none !important;
      }
      .screen-area {
        padding-top: env(safe-area-inset-top, 10px) !important;
        height: 100% !important;
      }
      .app-bottom-nav {
        margin: 0 10px calc(10px + env(safe-area-inset-bottom, 0px)) 10px !important;
      }
    }

    /* Left Side: Control & Proposal Info */
    .control-panel {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .proposal-badge {
      background: var(--bg-glass-active);
      border: 1px solid var(--border-active);
      color: var(--purple);
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 800;
      align-self: flex-start;
      text-transform: uppercase;
      letter-spacing: 1.5px;
    }

    .proposal-title {
      font-family: var(--font-outfit);
      font-size: 34px;
      font-weight: 900;
      line-height: 1.15;
      background: linear-gradient(135deg, var(--txt-primary) 30%, var(--purple) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .proposal-desc {
      font-size: 14px;
      color: var(--txt-secondary);
      line-height: 1.6;
    }

    /* Theme Option Selector Grid */
    .theme-selection-box {
      background: var(--bg-glass);
      border: 1px solid var(--border-glass);
      border-radius: 24px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      box-shadow: var(--panel-glow);
    }

    .section-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--txt-muted);
      font-weight: 800;
    }

    .proposal-btn-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .proposal-card-btn {
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid var(--border-glass);
      color: var(--txt-primary);
      padding: 16px 10px;
      border-radius: 16px;
      cursor: pointer;
      font-family: var(--font-outfit);
      transition: var(--transition-smooth);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      text-align: center;
      outline: none;
    }
    body.theme-nordic .proposal-card-btn {
      background: rgba(0, 0, 0, 0.03);
    }

    .proposal-card-btn:hover {
      border-color: var(--border-active);
      background: var(--bg-glass-active);
    }

    .proposal-card-btn.active {
      border-color: var(--purple);
      background: var(--bg-glass-active);
      box-shadow: 0 0 20px var(--purple-glow);
    }

    /* Mobile theme selectors styling */
    .mobile-theme-btn {
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid var(--border-glass);
      color: var(--txt-primary);
      padding: 12px 6px;
      border-radius: 12px;
      cursor: pointer;
      font-family: var(--font-outfit);
      transition: var(--transition-smooth);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      outline: none;
    }
    body.theme-nordic .mobile-theme-btn {
      background: rgba(0, 0, 0, 0.03);
    }
    .mobile-theme-btn:hover {
      border-color: var(--border-active);
      background: var(--bg-glass-active);
    }
    .mobile-theme-btn.active {
      border-color: var(--purple) !important;
      background: var(--bg-glass-active) !important;
      box-shadow: 0 0 10px var(--purple-glow) !important;
    }

    .proposal-dot-preview {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.2);
      box-shadow: 0 0 10px rgba(0,0,0,0.5);
    }

    .proposal-name {
      font-size: 12px;
      font-weight: 800;
    }

    .proposal-subtext {
      font-size: 9px;
      color: var(--txt-muted);
      line-height: 1.3;
    }

    /* Feature Details accordion list on the left */
    .feature-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .feat-item {
      background: var(--bg-glass);
      border: 1px solid var(--border-glass);
      border-radius: 16px;
      padding: 14px 18px;
      display: flex;
      gap: 14px;
      align-items: center;
      cursor: pointer;
      transition: var(--transition-smooth);
    }

    .feat-item:hover {
      transform: translateX(6px);
      border-color: var(--border-active);
    }

    .feat-item.active {
      border-color: var(--purple);
      background: var(--bg-glass-active);
    }

    .feat-icon {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
      border: 1px solid var(--border-glass);
    }

    .feat-body {
      flex: 1;
    }

    .feat-title {
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 2px;
    }

    .feat-desc {
      font-size: 10px;
      color: var(--txt-muted);
      line-height: 1.4;
    }

    /* RIGHT SIDE: PREMIUM EMULATOR */
    .emulator-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .phone-mockup {
      width: 375px;
      height: 780px;
      background: var(--bg-dark);
      border: 12px solid #1c1c1f;
      border-radius: 54px;
      position: relative;
      box-shadow: 0 30px 100px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      backdrop-filter: blur(30px);
      transition: border-color 0.3s ease, background-color 0.5s ease;
    }
    body.theme-nordic .phone-mockup {
      border-color: #e2e8f0;
      box-shadow: 0 20px 60px rgba(15,23,42,0.1), 0 0 0 1px rgba(0,0,0,0.05);
    }

    .phone-notch-island {
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 120px;
      height: 24px;
      background: #1c1c1f;
      border-bottom-left-radius: 16px;
      border-bottom-right-radius: 16px;
      z-index: 1000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    body.theme-nordic .phone-notch-island {
      background: #e2e8f0;
    }

    .notch-camera-glass {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #08080a;
      margin-left: 24px;
    }

    /* Screen Internals */
    .screen-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      padding-top: 24px;
    }

    /* PWA App Header */
    .app-header {
      padding: 14px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--border-glass);
      background: rgba(0,0,0,0.15);
      backdrop-filter: blur(10px);
      z-index: 10;
    }
    body.theme-nordic .app-header {
      background: rgba(255,255,255,0.75);
    }

    .student-badge {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .student-avatar-box {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--purple) 0%, var(--cyan) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 900;
      color: white;
      box-shadow: 0 0 10px var(--purple-glow);
      overflow: hidden;
      position: relative;
    }
    .student-avatar-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .student-name-col {
      display: flex;
      flex-direction: column;
    }

    .student-display-name {
      font-family: var(--font-outfit);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: -0.2px;
    }

    .student-level-tag {
      font-size: 7px;
      color: var(--txt-muted);
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .app-hud-currencies {
      display: flex;
      gap: 8px;
      font-size: 10px;
      font-weight: 800;
      font-family: var(--font-outfit);
    }
    body.minimal-mode .app-hud-currencies {
      display: none !important;
    }

    .hud-currency-pill {
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid var(--border-glass);
      padding: 3px 8px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    body.theme-nordic .hud-currency-pill {
      background: rgba(255,255,255,0.8);
    }

    /* Screen Main Body Content */
    .screen-content-scroller {
      flex: 1;
      overflow-y: auto;
      padding: 14px 14px 20px 14px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      overscroll-behavior: contain;
    }
    .screen-content-scroller::-webkit-scrollbar {
      display: none;
    }

    /* Shared Mockup Card Style */
    .app-card {
      background: var(--bg-glass);
      border: 1px solid var(--border-glass);
      border-radius: 20px;
      padding: 14px;
      backdrop-filter: blur(20px);
      box-shadow: var(--panel-glow);
      position: relative;
      overflow: hidden;
      transition: var(--transition-smooth);
    }

    .app-card-title {
      font-family: var(--font-outfit);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--purple);
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /* Accordion Note Widget */
    .accordion-note-widget {
      padding: 0 !important;
      border-color: var(--purple);
    }

    .accordion-header {
      width: 100%;
      padding: 12px 14px;
      background: none;
      border: none;
      text-align: left;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      color: var(--txt-primary);
      outline: none;
    }

    .accordion-arrow-icon {
      font-size: 10px;
      transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
      color: var(--txt-muted);
    }

    .accordion-body-content {
      max-height: 0px;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
      padding: 0 14px;
    }

    /* Lesson Radar Heatmap Grid */
    .radar-heatmap-bar {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      gap: 4px;
    }

    .heatmap-col {
      flex: 1;
      height: 24px;
      border-radius: 4px;
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--border-glass);
      position: relative;
    }

    .heatmap-fill {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      border-radius: 3px;
      background: linear-gradient(to top, var(--purple) 0%, var(--cyan) 100%);
      opacity: 0.8;
      transition: height 0.6s ease;
    }

    /* Leaderboard Styling with Circular face images */
    .leaderboard-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .leaderboard-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 10px;
      background: rgba(255,255,255,0.01);
      border: 1px solid var(--border-glass);
      border-radius: 12px;
      transition: var(--transition-smooth);
    }

    .leaderboard-row.highlight {
      background: var(--bg-glass-active);
      border-color: var(--border-active);
      box-shadow: 0 0 10px var(--purple-glow);
    }

    .leaderboard-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .leaderboard-rank {
      font-family: var(--font-outfit);
      font-size: 11px;
      font-weight: 900;
      width: 14px;
      text-align: center;
    }

    .leaderboard-img {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 1.5px solid var(--border-glass);
      object-fit: cover;
    }

    .leaderboard-row.rank1 .leaderboard-img {
      border-color: var(--yellow);
      box-shadow: 0 0 6px var(--yellow-glow);
    }

    .leaderboard-row.highlight .leaderboard-img {
      border-color: var(--purple);
      box-shadow: 0 0 6px var(--purple-glow);
    }

    .leaderboard-meta {
      display: flex;
      flex-direction: column;
    }

    .leaderboard-username {
      font-size: 10px;
      font-weight: 700;
    }

    .leaderboard-stats {
      font-size: 7.5px;
      color: var(--txt-muted);
    }

    .leaderboard-xp {
      font-family: var(--font-outfit);
      font-size: 9px;
      font-weight: 800;
      color: var(--green);
    }
    .leaderboard-row.highlight .leaderboard-xp {
      color: var(--purple);
    }

    /* Dynamic Badges grid (Gamified rewards) */
    .badges-mini-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    .badge-icon-card {
      background: rgba(0,0,0,0.2);
      border: 1px solid var(--border-glass);
      border-radius: 12px;
      padding: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      transition: var(--transition-smooth);
    }
    body.theme-nordic .badge-icon-card {
      background: rgba(255,255,255,0.5);
    }

    .badge-icon-card:hover {
      border-color: var(--border-active);
      transform: translateY(-2px);
    }

    .badge-avatar {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: var(--bg-glass-active);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      border: 1px solid var(--border-glass);
    }

    .badge-info-col {
      display: flex;
      flex-direction: column;
    }

    .badge-name {
      font-size: 9px;
      font-weight: 800;
    }

    .badge-perk {
      font-size: 7px;
      color: var(--green);
      font-weight: 600;
    }

    /* Tab screens manager */
    .tab-screen {
      display: none;
      flex-direction: column;
      gap: 14px;
    }

    .tab-screen.active {
      display: flex;
    }

    /* GAME TAB SPECIFIC LAYOUT */
    .dopamine-subtabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin-bottom: 4px;
    }

    .dopamine-subtab-btn {
      background: rgba(0,0,0,0.25);
      border: 1px solid var(--border-glass);
      color: var(--txt-secondary);
      padding: 8px 4px;
      border-radius: 10px;
      font-size: 9px;
      font-weight: 700;
      cursor: pointer;
      font-family: var(--font-outfit);
      transition: var(--transition-smooth);
      outline: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }
    body.theme-nordic .dopamine-subtab-btn {
      background: rgba(0,0,0,0.03);
    }

    .dopamine-subtab-btn.active {
      background: var(--purple);
      border-color: var(--purple);
      color: white;
      box-shadow: 0 0 10px var(--purple-glow);
    }

    .game-section {
      display: none;
      flex-direction: column;
      gap: 12px;
    }

    .game-section.active {
      display: flex;
    }

    /* Dragon Co-op Battle Animation box */
    .dragon-arena-box {
      height: 120px;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, transparent 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      border: 1px solid rgba(239, 68, 68, 0.15);
    }

    .dragon-character {
      font-size: 44px;
      animation: floatDragon 2.5s ease-in-out infinite alternate;
      cursor: pointer;
      user-select: none;
    }

    @keyframes floatDragon {
      0% { transform: translateY(-4px) scale(1); }
      100% { transform: translateY(6px) scale(1.05); }
    }

    .dragon-hp-widget {
      width: 80%;
      margin-top: 8px;
    }

    .dragon-hp-progress {
      width: 100%;
      height: 6px;
      background: rgba(255,255,255,0.05);
      border-radius: 3px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.05);
    }

    .dragon-hp-fill {
      width: 68%;
      height: 100%;
      background: linear-gradient(to right, var(--red) 0%, var(--yellow) 100%);
      border-radius: 3px;
      transition: width 0.5s ease;
    }

    /* Math attack multiple-choice inside phone */
    .attack-card-interactive {
      background: rgba(0,0,0,0.15);
      border: 1px solid var(--border-glass);
      border-radius: 14px;
      padding: 10px;
    }

    .opt-grid-layout {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 8px;
    }

    .opt-pill-button {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 8px;
      padding: 6px 10px;
      color: white;
      text-align: left;
      font-size: 9px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: var(--transition-smooth);
      outline: none;
    }
    body.theme-nordic .opt-pill-button {
      color: var(--txt-primary);
      background: rgba(255,255,255,0.7);
      border-color: rgba(0,0,0,0.05);
    }

    .opt-pill-button:hover {
      background: rgba(255,255,255,0.05);
      border-color: rgba(168, 85, 247, 0.3);
    }

    .opt-letter-tag {
      width: 14px;
      height: 14px;
      border-radius: 3px;
      background: rgba(255,255,255,0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      font-weight: 800;
      color: var(--txt-muted);
    }

    .opt-pill-button.correct {
      border-color: var(--green);
      background: rgba(34, 197, 94, 0.15);
    }

    .opt-pill-button.wrong {
      border-color: var(--red);
      background: rgba(239, 68, 68, 0.15);
    }

    /* Düello TV scrolling messages */
    .tv-scroller-box {
      background: rgba(0,0,0,0.35);
      border: 1px solid var(--border-glass);
      border-radius: 12px;
      padding: 10px;
      font-family: monospace;
      font-size: 9px;
      color: var(--cyan);
      height: 100px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    /* VOICE AI ASSISTANT VIEW (Taylan'a Sor) */
    .voice-visualizer-container {
      height: 160px;
      border-radius: 20px;
      background: rgba(0,0,0,0.25);
      border: 1px solid var(--border-glass);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .voice-glow-orb {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--purple) 0%, var(--cyan) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      box-shadow: 0 0 30px var(--purple-glow);
      cursor: pointer;
      position: relative;
      z-index: 5;
      transition: var(--transition-smooth);
    }

    .voice-glow-orb:hover {
      transform: scale(1.05);
      box-shadow: 0 0 45px var(--purple-glow);
    }

    .waveform-visual-bars {
      display: flex;
      gap: 3px;
      align-items: center;
      height: 40px;
      margin-top: 14px;
    }

    .wave-bar {
      width: 3px;
      height: 8px;
      background: var(--purple);
      border-radius: 2px;
      transition: height 0.15s ease;
      animation: wavePulse 1s ease-in-out infinite alternate;
    }

    @keyframes wavePulse {
      0% { height: 6px; }
      100% { height: 32px; }
    }

    .wave-bar:nth-child(even) {
      background: var(--cyan);
      animation-delay: 0.2s;
    }
    .wave-bar:nth-child(3n) {
      animation-delay: 0.4s;
    }

    .upload-box-interactive {
      border: 1.5px dashed var(--border-glass);
      border-radius: 12px;
      padding: 12px;
      text-align: center;
      font-size: 9px;
      color: var(--txt-muted);
      cursor: pointer;
      transition: var(--transition-smooth);
    }

    .upload-box-interactive:hover {
      border-color: var(--purple);
      color: var(--txt-secondary);
    }

    /* FILES LIBRARY VIEW */
    .file-item-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      background: rgba(0,0,0,0.15);
      border: 1px solid var(--border-glass);
      border-radius: 12px;
      transition: var(--transition-smooth);
      cursor: pointer;
    }
    body.theme-nordic .file-item-row {
      background: rgba(255,255,255,0.7);
    }

    .file-item-row:hover {
      border-color: var(--purple);
      transform: translateX(3px);
    }

    .file-left-col {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .file-icon-box {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--border-glass);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }

    .file-meta-col {
      display: flex;
      flex-direction: column;
    }

    .file-name-label {
      font-size: 10px;
      font-weight: 800;
    }

    .file-size-label {
      font-size: 7.5px;
      color: var(--txt-muted);
    }

    /* REQUESTS VIEW (Talep Paneli) */
    .form-input-text {
      width: 100%;
      background: rgba(0,0,0,0.25);
      border: 1px solid var(--border-glass);
      border-radius: 10px;
      padding: 8px 10px;
      color: white;
      font-family: inherit;
      font-size: 10px;
      outline: none;
      transition: var(--transition-smooth);
    }
    body.theme-nordic .form-input-text {
      color: var(--txt-primary);
      background: rgba(255,255,255,0.7);
      border-color: rgba(0,0,0,0.1);
    }

    .form-input-text:focus {
      border-color: var(--purple);
    }

    .submit-button-action {
      background: var(--purple);
      border: none;
      color: white;
      font-family: var(--font-outfit);
      font-weight: 800;
      padding: 8px 12px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 10px;
      transition: var(--transition-smooth);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .submit-button-action:hover {
      box-shadow: 0 0 10px var(--purple-glow);
      transform: translateY(-1px);
    }

    /* Floating Popups Inside Phone Mockup */
    .em-alert-overlay {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.7);
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      pointer-events: none; /* Fallback safety to never intercept clicks when hidden */
    }

    .em-alert-card {
      background: var(--bg-glass-heavy);
      border: 1px solid var(--purple);
      border-radius: 20px;
      padding: 16px;
      width: 240px;
      text-align: center;
      box-shadow: 0 0 30px rgba(20, 184, 166, 0.4);
    }

    /* PWA App Bottom Navigation Bar - Floating Apple Dock */
    .app-bottom-nav {
      margin: 0 10px 10px 10px;
      padding: 6px 8px;
      background: var(--bg-glass-heavy);
      backdrop-filter: blur(25px);
      border: 1px solid var(--border-glass);
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
      z-index: 10;
      transition: var(--transition-smooth);
    }
    body.theme-nordic .app-bottom-nav {
      background: rgba(255,255,255,0.95);
      border-color: rgba(15, 23, 42, 0.08);
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    }

    .bottom-nav-row {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
    }

    .nav-tab-button {
      flex: 1;
      background: none;
      border: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      color: var(--txt-muted);
      cursor: pointer;
      font-size: 7px;
      font-weight: 700;
      transition: var(--transition-smooth);
      outline: none;
      padding: 4px 0;
      min-height: 48px;
    }

    .nav-tab-button.active {
      color: var(--purple);
      text-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
    }
    body.theme-nordic .nav-tab-button.active {
      color: var(--purple);
      text-shadow: none;
    }

    .nav-tab-icon {
      font-size: 13px;
      transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .nav-tab-button.active .nav-tab-icon {
      transform: scale(1.22);
      filter: drop-shadow(0 0 4px var(--purple));
    }

    .nav-tab-button:active .nav-tab-icon {
      transform: scale(0.85);
    }

    /* Monthly Calendar CSS */
    .calendar-monthly-container {
      background: rgba(0,0,0,0.15);
      border: 1px solid var(--border-glass);
      border-radius: 16px;
      padding: 12px;
    }
    body.theme-nordic .calendar-monthly-container {
      background: rgba(255,255,255,0.5);
    }
    
    .calendar-day-cell {
      font-size: 8px;
      font-weight: 700;
      padding: 5px 0;
      border-radius: 8px;
      background: rgba(255,255,255,0.02);
      color: var(--txt-secondary);
      cursor: pointer;
      position: relative;
      transition: var(--transition-smooth);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      aspect-ratio: 1;
    }
    body.theme-nordic .calendar-day-cell {
      background: rgba(0,0,0,0.02);
    }
    .calendar-day-cell:hover {
      background: rgba(255,255,255,0.08);
      color: var(--txt-primary);
    }
    body.theme-nordic .calendar-day-cell:hover {
      background: rgba(0,0,0,0.05);
    }
    .calendar-day-cell.muted {
      opacity: 0.15;
      cursor: default;
      background: none !important;
    }
    .calendar-day-cell.active {
      background: var(--purple) !important;
      color: white !important;
      box-shadow: 0 0 6px var(--purple-glow);
    }
    .calendar-day-cell.today {
      border: 1px dashed var(--purple);
    }
    .day-dot {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      display: inline-block;
      margin-top: 1px;
    }
    .day-dot.purple { background: var(--purple); }
    .day-dot.cyan { background: var(--cyan); }
    .day-dot.yellow { background: var(--yellow); }
    .day-dot.blue { background: var(--blue); }
    .day-dot.green { background: var(--green); }

    @keyframes pulse {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.2); opacity: 0.5; }
      100% { transform: scale(1); opacity: 1; }
    }

    /* Focus Room (Birlikte Çalışıyoruz) CSS Classes */
    .focus-room-header {
      padding: 10px 12px;
      background: linear-gradient(135deg, rgba(108, 92, 231, 0.08) 0%, rgba(20, 184, 166, 0.04) 100%);
      border: 1px solid var(--border-glass);
      border-radius: 12px;
      margin-bottom: 10px;
    }
    .focus-room-title {
      font-family: var(--font-outfit);
      font-size: 11px;
      font-weight: 800;
      color: white;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .focus-room-online-pill {
      font-size: 7px;
      color: var(--green);
      background: rgba(38, 208, 124, 0.1);
      padding: 2px 6px;
      border-radius: 20px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .focus-room-online-pill .pulse-dot {
      width: 4px;
      height: 4px;
      background: var(--green);
      border-radius: 50%;
      animation: pulse 1.5s infinite;
    }
    .focus-room-chip-grid {
      display: flex;
      gap: 4px;
      margin-top: 8px;
      overflow-x: auto;
      padding-bottom: 2px;
    }
    .focus-room-chip {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--border-glass);
      color: var(--txt-muted);
      font-size: 7.5px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 20px;
      cursor: pointer;
      white-space: nowrap;
      transition: var(--transition-smooth);
    }
    .focus-room-chip.active {
      background: var(--bg-glass-active);
      border-color: var(--border-active);
      color: white;
      box-shadow: 0 0 6px var(--purple-glow);
    }
    .costudy-worker-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 8px;
      background: rgba(255, 255, 255, 0.01);
      border-bottom: 1px solid rgba(255, 255, 255, 0.03);
      transition: var(--transition-smooth);
    }
    .costudy-worker-card:hover {
      background: rgba(255, 255, 255, 0.03);
    }
    .costudy-worker-left {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .costudy-worker-img-wrap {
      position: relative;
      width: 24px;
      height: 24px;
    }
    .costudy-worker-img {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      object-fit: cover;
      border: 1.5px solid var(--border-glass);
    }
    .costudy-worker-img.active {
      border-color: var(--green);
      box-shadow: 0 0 4px var(--green-glow);
    }
    .costudy-worker-presence {
      position: absolute;
      bottom: -1px;
      right: -1px;
      width: 6px;
      height: 6px;
      background-color: var(--green);
      border: 1px solid var(--bg-dark);
      border-radius: 50%;
    }
    .costudy-worker-presence.away {
      background-color: var(--yellow);
    }
    .costudy-worker-info {
      display: flex;
      flex-direction: column;
      text-align: left;
    }
    .costudy-worker-name {
      font-size: 8px;
      font-weight: 800;
      color: white;
    }
    .costudy-worker-status {
      font-size: 6.5px;
      color: var(--txt-muted);
    }
    .costudy-worker-rxn-btn {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border-glass);
      color: var(--txt-secondary);
      font-size: 7px;
      padding: 2px 6px;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 700;
      transition: var(--transition-smooth);
    }
    .costudy-worker-rxn-btn:hover {
      background: var(--purple);
      border-color: var(--purple);
      color: white;
      box-shadow: 0 0 5px var(--purple-glow);
    }
    .costudy-chat-container {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .costudy-chat-bubble {
      display: flex;
      flex-direction: column;
      padding: 4px 6px;
      border-radius: 6px;
      max-width: 85%;
      font-size: 7.5px;
      line-height: 1.3;
      text-align: left;
    }
    .costudy-chat-bubble.self {
      align-self: flex-end;
      background: var(--bg-glass-active);
      border: 1px solid var(--border-active);
      color: white;
    }
    .costudy-chat-bubble.other {
      align-self: flex-start;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--border-glass);
      color: var(--txt-secondary);
    }
    .costudy-chat-bubble.system {
      align-self: center;
      background: rgba(234, 179, 8, 0.1);
      border: 1px solid rgba(234, 179, 8, 0.2);
      color: var(--yellow);
      font-size: 7px;
      text-align: center;
      width: 90%;
      border-radius: 4px;
    }
    .costudy-chat-sender {
      font-weight: 800;
      font-size: 6.5px;
      margin-bottom: 1px;
    }
    .costudy-chat-sender.self { color: var(--purple); }
    .costudy-chat-sender.other { color: var(--cyan); }

    /* ============================================================ */
    /* V2 MASTER CLASS UPGRADES — Elevating V1 elements to V2 Glass */
    /* ============================================================ */
    .card, .lesson-card, .note-card, .sprint-card, .greet-card, .passive-card, .refl-card, .stat-card, .lb-card, .badges-card, .liga-card {
      background: var(--bg-glass) !important;
      border: 1px solid var(--border-glass) !important;
      border-radius: 20px !important;
      padding: 16px !important;
      margin-bottom: 0 !important; /* Managed by scroller gap */
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      box-shadow: var(--panel-glow) !important;
      position: relative !important;
      overflow: hidden !important;
      transition: var(--transition-smooth) !important;
      font-family: var(--font-jakarta) !important;
    }

    body.theme-nordic .card,
    body.theme-nordic .lesson-card,
    body.theme-nordic .note-card,
    body.theme-nordic .sprint-card,
    body.theme-nordic .greet-card,
    body.theme-nordic .passive-card,
    body.theme-nordic .refl-card,
    body.theme-nordic .stat-card,
    body.theme-nordic .lb-card,
    body.theme-nordic .badges-card,
    body.theme-nordic .liga-card {
      background: rgba(255, 255, 255, 0.85) !important;
      border: 1px solid rgba(15, 23, 42, 0.08) !important;
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04) !important;
    }

    /* Nordic theme contrast overrides for light background readability */
    body.theme-nordic .greet-line1 {
      color: var(--txt-primary) !important;
    }
    body.theme-nordic .greet-line2 {
      color: var(--txt-secondary) !important;
    }
    body.theme-nordic .greet-todayload {
      background: rgba(15, 23, 42, 0.05) !important;
      color: var(--txt-secondary) !important;
    }
    body.theme-nordic .mood-lbl {
      color: var(--txt-secondary) !important;
    }
    body.theme-nordic .mood-tl-cell {
      background: rgba(15, 23, 42, 0.03) !important;
    }
    body.theme-nordic .mood-tl-cell.today {
      background: rgba(108, 92, 231, 0.08) !important;
      border: 1px solid rgba(108, 92, 231, 0.25) !important;
    }
    body.theme-nordic .mood-tl-day {
      color: var(--txt-muted) !important;
    }
    body.theme-nordic .radar-headline {
      color: var(--txt-primary) !important;
    }
    body.theme-nordic .sprint-item {
      background: rgba(15, 23, 42, 0.04) !important;
      color: var(--txt-primary) !important;
    }
    body.theme-nordic .cal-day.cur-month {
      color: var(--txt-primary) !important;
    }
    body.theme-nordic .cal-day.other-month {
      color: var(--txt-muted) !important;
      opacity: 0.35 !important;
    }
    body.theme-nordic .cal-day.selected {
      background: var(--blue) !important;
      color: #fff !important;
    }
    body.theme-nordic .cal-day.today {
      background: var(--red) !important;
      color: #fff !important;
    }

    /* Hover effects for interactive cards */
    .card:hover, .lesson-card:hover, .note-card:hover, .sprint-card:hover, .stat-card:hover, .lb-card:hover, .badges-card:hover {
      background: var(--bg-glass-active) !important;
      border-color: var(--border-active) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 15px rgba(20, 184, 166, 0.1) !important;
    }

    body.theme-nordic .card:hover,
    body.theme-nordic .lesson-card:hover,
    body.theme-nordic .note-card:hover,
    body.theme-nordic .sprint-card:hover,
    body.theme-nordic .stat-card:hover {
      background: rgba(255, 255, 255, 0.95) !important;
      border-color: rgba(30, 41, 59, 0.2) !important;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
    }

    /* Outfity typography for titles */
    .card-ttl, .daily-card-lbl, .radar-title, .app-card-title {
      font-family: var(--font-outfit) !important;
      font-size: 11px !important;
      font-weight: 800 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.8px !important;
      color: var(--purple) !important;
      margin-bottom: 12px !important;
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
    }

    body.theme-nordic .card-ttl,
    body.theme-nordic .daily-card-lbl,
    body.theme-nordic .radar-title {
      color: var(--purple) !important;
    }

    /* Specific decorative additions for V2 Card presets */
    .lesson-card {
      border-left: 4px solid var(--purple) !important;
    }
    
    .note-card {
      border-left: 4px solid var(--purple) !important;
    }

    .sprint-card {
      border-left: 4px solid var(--red) !important;
    }

    .greet-card {
      border-left: 4px solid var(--green) !important;
    }

    .refl-card {
      border-left: 4px solid var(--purple) !important;
    }

    /* Stat row custom alignment for V2 */
    .stats-row {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 10px !important;
      width: 100% !important;
    }

    .stat-card {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 12px 8px !important;
    }

    .stat-num {
      font-family: var(--font-outfit) !important;
      font-size: 20px !important;
      font-weight: 900 !important;
      letter-spacing: -0.5px !important;
    }

    .stat-lbl {
      font-size: 8px !important;
      font-weight: 700 !important;
      text-transform: uppercase !important;
      color: var(--txt-muted) !important;
      margin-top: 4px !important;
      letter-spacing: 0.3px !important;
    }

    /* Elevated Inputs and Buttons */
    .inp {
      background: var(--bg-glass) !important;
      border: 1px solid var(--border-glass) !important;
      border-radius: 14px !important;
      color: var(--txt-primary) !important;
      backdrop-filter: blur(15px) !important;
      -webkit-backdrop-filter: blur(15px) !important;
      transition: var(--transition-smooth) !important;
      font-family: var(--font-jakarta) !important;
    }
    .inp:focus {
      border-color: var(--border-active) !important;
      background: var(--bg-glass-heavy) !important;
      box-shadow: 0 0 10px rgba(20, 184, 166, 0.15) !important;
    }

    .send-btn {
      background: linear-gradient(135deg, var(--purple) 0%, var(--cyan) 100%) !important;
      border: none !important;
      border-radius: 14px !important;
      color: #fff !important;
      font-weight: 700 !important;
      font-family: var(--font-outfit) !important;
      box-shadow: 0 4px 15px var(--purple-glow) !important;
      transition: var(--transition-smooth) !important;
    }
    .send-btn:hover {
      transform: translateY(-1px) !important;
      box-shadow: 0 6px 20px var(--purple-glow) !important;
      opacity: 0.95 !important;
    }
    .send-btn:active {
      transform: translateY(1px) !important;
      opacity: 0.8 !important;
    }

    .logout-btn {
      width: 100% !important;
      padding: 14px !important;
      background: rgba(255, 69, 58, 0.08) !important;
      border: 1px solid rgba(255, 69, 58, 0.25) !important;
      color: var(--red) !important;
      border-radius: 14px !important;
      font-weight: 700 !important;
      font-family: var(--font-outfit) !important;
      transition: var(--transition-smooth) !important;
      margin-top: 14px !important;
    }
    .logout-btn:hover {
      background: rgba(255, 69, 58, 0.15) !important;
      border-color: var(--red) !important;
      box-shadow: 0 0 12px rgba(255, 69, 58, 0.15) !important;
    }

    /* Floating macOS Apple Dock Bottom Nav Upgrade */
    .nav-btn {
      flex: 1;
      background: none !important;
      border: none !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 2px !important;
      color: var(--txt-muted) !important;
      cursor: pointer !important;
      font-size: 8px !important;
      font-weight: 800 !important;
      transition: var(--transition-smooth) !important;
      outline: none !important;
      padding: 6px 0 !important;
      font-family: var(--font-jakarta) !important;
    }

    .nav-btn.active {
      color: var(--purple) !important;
      text-shadow: 0 0 10px var(--purple-glow) !important;
      background: none !important;
    }

    body.theme-nordic .nav-btn.active {
      color: var(--purple) !important;
      text-shadow: none !important;
    }

    .nav-tab-icon {
      font-size: 16px !important;
      margin-bottom: 2px !important;
      transition: var(--transition-smooth) !important;
      display: inline-block !important;
    }

    .nav-btn.active .nav-tab-icon {
      transform: scale(1.18) translateY(-2px) !important;
    }


/* --- Extracted Style Block --- */


.msg-bubble{line-height:1.55}
.msg-bubble p{margin:0 0 8px 0}.msg-bubble p:last-child{margin-bottom:0}
.msg-bubble ul,.msg-bubble ol{margin:6px 0 6px 18px;padding:0}
.msg-bubble li{margin-bottom:4px}
.msg-bubble strong{font-weight:700;color:#fff}
.msg-bubble code{background:rgba(255,255,255,.1);padding:1px 5px;border-radius:4px;font-size:.9em;font-family:'SF Mono',Menlo,monospace}
.msg-bubble pre{background:rgba(0,0,0,.3);padding:10px;border-radius:8px;overflow-x:auto;margin:8px 0}
.msg-bubble pre code{background:none;padding:0}
.msg-bubble hr{border:none;border-top:1px solid rgba(255,255,255,.15);margin:10px 0}
.msg-bubble h1,.msg-bubble h2,.msg-bubble h3{margin:10px 0 6px;font-weight:700;color:#fff}
.msg-bubble h1{font-size:18px}.msg-bubble h2{font-size:16px}.msg-bubble h3{font-size:15px}
.msg-bubble .katex{font-size:1em}
.msg-bubble .katex-display{margin:8px 0;overflow-x:auto;overflow-y:hidden}

/* Nordic Minimalist Login Styles */
#login {
  position: fixed;
  inset: 0;
  background: hsl(210, 20%, 98%) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
}
#login::before {
  content: '' !important;
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 350px at 15% 15%, rgba(10, 132, 255, 0.05) 0%, transparent 80%),
              radial-gradient(circle 300px at 85% 85%, rgba(108, 92, 231, 0.06) 0%, transparent 80%) !important;
  pointer-events: none;
  animation: none !important;
}
.nordic-login-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 350px;
  background: #ffffff;
  border-radius: 24px;
  padding: 32px 24px;
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.06), 0 5px 15px rgba(15, 23, 42, 0.02);
  border: 1px solid rgba(15, 23, 42, 0.04);
}
.nordic-login-header {
  text-align: center;
  margin-bottom: 24px;
}
.nordic-login-logo {
  font-size: 32px;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: hsl(210, 20%, 96%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
.nordic-login-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: hsl(215, 47%, 15%);
  margin-bottom: 4px;
}
.nordic-login-subtitle {
  font-size: 11px;
  color: hsl(215, 16%, 47%);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.nordic-profiles-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 4px 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.04);
  scrollbar-width: none;
}
.nordic-profiles-list::-webkit-scrollbar {
  display: none;
}
.nordic-profile-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: hsl(210, 20%, 98%);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 20px;
  padding: 14px 12px;
  width: 96px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}
.nordic-profile-card:hover {
  transform: translateY(-2px);
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  border-color: rgba(10, 132, 255, 0.3);
}
.nordic-profile-avatar {
  font-size: 26px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.06);
}
.nordic-profile-name {
  font-size: 11px;
  font-weight: 700;
  color: hsl(215, 25%, 27%);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nordic-profile-delete {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: hsl(0, 72%, 51%);
  color: #ffffff;
  border: none;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  z-index: 10;
}
.nordic-input-group {
  display: flex;
  flex-direction: column;
}
.nordic-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: hsl(215, 16%, 47%);
  margin-bottom: 6px;
  text-transform: uppercase;
  text-align: left;
}
.nordic-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.nordic-input-icon {
  position: absolute;
  left: 14px;
  font-size: 16px;
  color: hsl(215, 16%, 47%);
  pointer-events: none;
}
.nordic-input {
  width: 100%;
  height: 48px;
  background: hsl(210, 20%, 98%) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 12px !important;
  padding: 0 16px 0 40px !important;
  font-size: 14px !important;
  color: hsl(215, 47%, 15%) !important;
  outline: none !important;
  transition: all 0.2s ease !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.01) !important;
}
.nordic-input:focus {
  border-color: rgba(10, 132, 255, 0.4) !important;
  background: #ffffff !important;
  box-shadow: 0 4px 18px rgba(10, 132, 255, 0.03), inset 0 2px 4px rgba(0,0,0,0.005) !important;
}
.nordic-bio-btn {
  position: absolute;
  right: 6px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.nordic-bio-btn:hover {
  border-color: rgba(10, 132, 255, 0.3);
  background: hsl(210, 20%, 98%);
  transform: scale(1.03);
}
.nordic-bio-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
}
.nordic-bio-circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: hsl(210, 20%, 96%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.nordic-bio-circle:hover {
  transform: scale(1.03);
  background: #ffffff;
  border-color: rgba(10, 132, 255, 0.3);
  box-shadow: 0 6px 18px rgba(10, 132, 255, 0.1);
}
.nordic-bio-label {
  font-size: 13px;
  color: hsl(215, 16%, 47%);
  margin-top: 12px;
  font-weight: 600;
}
.nordic-bio-alt-btn {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 700;
  color: hsl(217, 91%, 60%);
  cursor: pointer;
  padding: 8px 16px;
}
.nordic-bio-alt-btn:hover {
  text-decoration: underline;
}
.nordic-submit-btn {
  width: 100%;
  height: 48px;
  background: hsl(215, 25%, 27%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
  transition: all 0.2s !important;
  margin: 0 !important;
}
.nordic-submit-btn:hover {
  background: hsl(215, 47%, 15%) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.15) !important;
  transform: translateY(-1px) !important;
}
.nordic-submit-btn:active {
  transform: translateY(1px) !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}
.nordic-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
  color: hsl(215, 16%, 67%);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.nordic-divider::before, .nordic-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.nordic-divider:not(:empty)::before {
  margin-right: 12px;
}
.nordic-divider:not(:empty)::after {
  margin-left: 12px;
}
.nordic-social-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nordic-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: hsl(215, 25%, 27%) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.nordic-social-btn img {
  pointer-events: none;
}
.nordic-social-btn:hover {
  background: hsl(210, 20%, 98%) !important;
  border-color: rgba(15, 23, 42, 0.15) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.04) !important;
}
.nordic-footer {
  text-align: center;
  margin-top: 24px;
  border-top: 1px solid rgba(15, 23, 42, 0.04);
  padding-top: 20px;
}
.nordic-demo-btn {
  background: none !important;
  border: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: hsl(217, 91%, 60%) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  padding: 0 !important;
  margin: 0 !important;
}
.nordic-demo-btn:hover {
  color: hsl(217, 91%, 50%) !important;
  text-decoration: underline !important;
}

/* BATCH B: Soru Meydanı ve Birlikte Çalış kart boyutları %18 büyütme (clamp fluid) */
#p-calis .focus-room-header {
  padding: clamp(12px, 2.2vw, 16px) clamp(14px, 2.5vw, 18px) !important;
  margin-bottom: clamp(12px, 2.2vw, 16px) !important;
}
#p-calis .focus-room-title {
  font-size: clamp(12.5px, 2vw, 15px) !important;
}
#p-calis .focus-room-online-pill {
  font-size: clamp(8px, 1.5vw, 10px) !important;
  padding: clamp(3px, 0.6vw, 4px) clamp(7px, 1.4vw, 9px) !important;
}
#p-calis .focus-room-chip {
  font-size: clamp(9px, 1.6vw, 11px) !important;
  padding: clamp(4px, 0.8vw, 6px) clamp(10px, 1.8vw, 13px) !important;
}
#calis-timer {
  font-size: clamp(38px, 6vw, 46px) !important;
  margin: clamp(8px, 1.5vw, 12px) 0 !important;
}
#calis-status {
  font-size: clamp(9.5px, 1.8vw, 11.5px) !important;
  margin-bottom: clamp(10px, 1.8vw, 13px) !important;
}
#p-calis .send-btn {
  font-size: clamp(9.5px, 1.8vw, 11.5px) !important;
  padding: clamp(5px, 1vw, 7px) clamp(12px, 2vw, 16px) !important;
  min-height: 44px !important; /* Touch target standard */
}
#p-calis .card-ttl {
  font-size: clamp(11px, 2vw, 13.5px) !important;
  margin-bottom: clamp(8px, 1.5vw, 11px) !important;
}
#costudy-chat-input {
  font-size: clamp(9.5px, 1.8vw, 11.5px) !important;
  padding: clamp(5px, 1vw, 7px) clamp(8px, 1.5vw, 10px) !important;
  min-height: 44px !important; /* Touch target standard */
}
.costudy-worker-name {
  font-size: clamp(9.5px, 1.8vw, 11.5px) !important;
}
.costudy-worker-status {
  font-size: clamp(8px, 1.5vw, 10px) !important;
}
.costudy-worker-rxn-btn {
  font-size: clamp(8px, 1.5vw, 10px) !important;
  padding: clamp(3px, 0.6vw, 4px) clamp(7px, 1.4vw, 9px) !important;
  min-height: 44px !important; /* Touch target standard */
}
.costudy-chat-bubble {
  font-size: clamp(9px, 1.6vw, 11px) !important;
  padding: clamp(5px, 1vw, 7px) clamp(7px, 1.4vw, 9px) !important;
}
.costudy-chat-sender {
  font-size: clamp(8px, 1.5vw, 10px) !important;
}

#p-game .dopamine-subtab-btn {
  font-size: clamp(11px, 2vw, 13.5px) !important;
  padding: clamp(8px, 1.5vw, 11px) clamp(12px, 2vw, 16px) !important;
  min-height: 44px !important; /* Touch target standard */
}
.dragon-arena-box {
  height: clamp(142px, 25vw, 170px) !important;
}
.dragon-character {
  font-size: clamp(52px, 9vw, 62px) !important;
}
.dragon-hp-progress {
  height: clamp(7px, 1.3vw, 9px) !important;
}
#dragon-hp-label {
  font-size: clamp(9px, 1.6vw, 11px) !important;
}
.attack-card-interactive {
  padding: clamp(12px, 2vw, 15px) !important;
}
.attack-card-interactive > div:first-child {
  font-size: clamp(8.5px, 1.6vw, 10px) !important;
}
.attack-card-interactive > div:nth-child(2) {
  font-size: clamp(12px, 2.2vw, 14.5px) !important;
}
.opt-pill-button {
  font-size: clamp(11px, 2vw, 13.5px) !important;
  padding: clamp(8px, 1.5vw, 11px) clamp(12px, 2vw, 16px) !important;
  min-height: 44px !important; /* Touch target standard */
}
.opt-letter-tag {
  width: clamp(17px, 3vw, 21px) !important;
  height: clamp(17px, 3vw, 21px) !important;
  font-size: clamp(9.5px, 1.8vw, 11.5px) !important;
}
#coop-attack-log {
  font-size: clamp(9.5px, 1.8vw, 11.5px) !important;
}
#tv-stream-log-box {
  max-height: clamp(142px, 25vw, 170px) !important;
}
#tv-stream-log-box div {
  font-size: clamp(9.5px, 1.8vw, 11.5px) !important;
}
.tv-scroller-box + div {
  font-size: clamp(8.5px, 1.6vw, 10px) !important;
}

/* Real Rewards Store Premium CSS */
.store-header-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
}
.store-header-glow {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, rgba(0,0,0,0) 70%);
  filter: blur(20px);
  pointer-events: none;
}
.store-balance-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.store-balance-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  position: relative;
}
body.theme-nordic .store-balance-box {
  background: rgba(15, 23, 42, 0.02);
  border-color: rgba(15, 23, 42, 0.05);
}
.store-balance-val {
  font-size: 20px;
  font-weight: 800;
  margin-top: 4px;
}
.store-balance-val.available {
  color: #10b981;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}
.store-balance-val.total {
  color: #3b82f6;
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
}
.store-balance-lbl {
  font-size: 10px;
  color: var(--txt2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.store-chips-wrapper {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 12px 0;
  margin-bottom: 12px;
  scrollbar-width: none;
}
.store-chips-wrapper::-webkit-scrollbar {
  display: none;
}
.store-chip {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--txt1);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
body.theme-nordic .store-chip {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.08);
}
.store-chip.active {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.reward-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.reward-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  border-color: rgba(168, 85, 247, 0.3);
}
.reward-emoji-bg {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 10px;
  transition: transform 0.3s ease;
}
.reward-card:hover .reward-emoji-bg {
  transform: scale(1.1) rotate(5deg);
}
.reward-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--txt1);
  line-height: 1.3;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 34px;
}
.reward-desc {
  font-size: 10px;
  color: var(--txt2);
  line-height: 1.4;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 42px;
}
.reward-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.reward-cost-tag {
  font-size: 11px;
  font-weight: 800;
  color: #eab308;
  display: flex;
  align-items: center;
  gap: 3px;
}
.reward-stock-badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  font-weight: 700;
}
.reward-action-btn {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--purple) 0%, #7c3aed 100%);
  border: none;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
  text-align: center;
}
.reward-action-btn:hover {
  opacity: 0.95;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.2);
}
.reward-action-btn:disabled {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--txt3) !important;
  cursor: not-allowed;
  box-shadow: none !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}
body.theme-nordic .reward-action-btn:disabled {
  background: rgba(15, 23, 42, 0.05) !important;
  border-color: rgba(15, 23, 42, 0.05) !important;
}
.reward-parent-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  font-weight: 700;
  text-transform: uppercase;
}
.reward-locked-card {
  opacity: 0.75;
}
.store-history-title {
  font-size: 15px;
  font-weight: 800;
  margin-top: 24px;
  margin-bottom: 12px;
  color: var(--txt1);
  display: flex;
  align-items: center;
  gap: 6px;
}
.timeline-list {
  position: relative;
  padding-left: 20px;
  border-left: 2px solid rgba(255, 255, 255, 0.05);
  margin-left: 8px;
}
body.theme-nordic .timeline-list {
  border-left-color: rgba(15, 23, 42, 0.05);
}
.timeline-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  position: relative;
}
.timeline-dot {
  position: absolute;
  left: -27px;
  top: 16px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
  background: #cbd5e1;
}
.timeline-dot.pending { background: #eab308; box-shadow: 0 0 8px #eab308; }
.timeline-dot.approved { background: #3b82f6; box-shadow: 0 0 8px #3b82f6; }
.timeline-dot.delivered { background: #10b981; box-shadow: 0 0 8px #10b981; }
.timeline-dot.rejected { background: #ef4444; box-shadow: 0 0 8px #ef4444; }

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}
.timeline-reward-name {
  font-size: 12px;
  font-weight: 800;
  color: var(--txt1);
}
.timeline-status-badge {
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 700;
  text-transform: uppercase;
}
.timeline-status-badge.pending { background: rgba(234, 179, 8, 0.1); color: #eab308; }
.timeline-status-badge.approved { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.timeline-status-badge.delivered { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.timeline-status-badge.rejected { background: rgba(239, 104, 104, 0.1); color: #ef4444; }

.timeline-meta {
  font-size: 9px;
  color: var(--txt3);
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.timeline-notes {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  padding: 6px 8px;
  margin-top: 6px;
  border: 1px solid rgba(255, 255, 255, 0.03);
  color: var(--txt2);
}
body.theme-nordic .timeline-notes {
  background: rgba(15, 23, 42, 0.01);
  border-color: rgba(15, 23, 42, 0.03);
}

/* Modal notes input */
.store-notes-textarea {
  width: 100%;
  height: 60px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px;
  color: #fff;
  font-size: 12px;
  font-family: inherit;
  resize: none;
  margin-top: 8px;
  outline: none;
  transition: border-color 0.2s ease;
}
body.theme-nordic .store-notes-textarea {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.08);
  color: #000;
}
.store-notes-textarea:focus {
  border-color: var(--purple);
}


/* --- Extracted Style Block --- */


  .fr-topic-btn{background:rgba(255,255,255,.04);border:1.5px solid transparent;border-radius:10px;padding:10px 4px;color:var(--txt2);font-size:12px;font-weight:600;cursor:pointer}
  .fr-topic-btn.selected{border-color:#26d07c;background:rgba(38,208,124,.14);color:#fff}
  .fr-item{background:var(--bg2);border-radius:14px;padding:12px;display:flex;align-items:center;gap:10px}
  .fr-presence{width:10px;height:10px;border-radius:50%;flex-shrink:0}
  .fr-presence.green{background:#26d07c;box-shadow:0 0 8px rgba(38,208,124,.7)}
  .fr-presence.yellow{background:#f9c74f}
  .fr-presence.red{background:#e63946}
  .fr-presence.gray{background:#6c757d}
  .fr-item-body{flex:1;min-width:0}
  .fr-item-name{font-size:13.5px;font-weight:700;color:#fff;line-height:1.2;margin-bottom:2px}
  .fr-item-meta{font-size:11.5px;color:var(--txt2);display:flex;gap:6px;flex-wrap:wrap}
  .fr-item-cycle{font-size:11px;font-weight:700;padding:2px 6px;border-radius:6px;flex-shrink:0}
  .fr-item-cycle.focus{background:rgba(108,92,231,.2);color:#a594ff}
  .fr-item-cycle.break{background:rgba(38,208,124,.2);color:#26d07c}
  .fr-rxns{display:flex;gap:4px;flex-shrink:0}
  .fr-rxn{background:rgba(255,255,255,.05);border:none;border-radius:10px;padding:5px 8px;color:var(--txt2);font-size:12.5px;cursor:pointer;display:flex;align-items:center;gap:3px;min-width:32px;justify-content:center}
  .fr-rxn:active{background:rgba(255,255,255,.15)}
  @media (max-width:360px){.fr-rxns{gap:2px}.fr-rxn{padding:5px 6px;font-size:12px}}
  .fr-self-card{background:linear-gradient(135deg,rgba(108,92,231,.18),rgba(38,208,124,.1));border:1.5px solid rgba(108,92,231,.45);border-radius:16px;padding:14px;margin-bottom:8px}
  .fr-self-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  .fr-self-topic{font-size:13px;font-weight:700;color:#fff}
  .fr-timer{font-size:32px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;text-align:center;letter-spacing:-1px;margin:8px 0}
  .fr-timer-lbl{text-align:center;font-size:11px;color:var(--txt2);text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-bottom:6px}
  .fr-self-actions{display:flex;gap:8px;margin-top:10px}
  .fr-self-btn{flex:1;border:none;border-radius:12px;padding:10px;font-size:13px;font-weight:700;cursor:pointer}
  .fr-self-btn.primary{background:rgba(255,255,255,.08);color:#fff}
  .fr-self-btn.danger{background:rgba(230,57,70,.18);color:#ff6b6b}
  .fr-home-card{background:linear-gradient(135deg,rgba(108,92,231,.12),rgba(38,208,124,.08));border:1px solid rgba(108,92,231,.3);border-radius:18px;padding:14px 16px;margin-bottom:14px;cursor:pointer}
  .fr-home-row{display:flex;align-items:center;gap:12px}
  .fr-home-icon{font-size:28px}
  .fr-home-text{flex:1;min-width:0}
  .fr-home-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:2px}
  .fr-home-sub{font-size:12.5px;color:var(--txt2);line-height:1.35}
  .fr-home-arrow{color:var(--txt3);font-size:20px}
  .fr-bc-card{background:linear-gradient(135deg,#6C5CE7,#8e7eff);border-radius:16px;padding:14px 16px;margin-bottom:10px;box-shadow:0 10px 28px rgba(108,92,231,.45)}
  .fr-bc-from{font-size:11px;font-weight:700;color:rgba(255,255,255,.8);letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px}
  .fr-bc-msg{font-size:14px;color:#fff;line-height:1.4;font-weight:600}
  .fr-bc-time{font-size:11px;color:rgba(255,255,255,.6);margin-top:6px}
  .fr-buddy-btn{background:linear-gradient(135deg,#26d07c,#2bc4ff);border:none;border-radius:10px;padding:5px 10px;color:#fff;font-size:11.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
  .fr-buddy-btn:disabled{opacity:.5;cursor:default}
  .fr-buddy-badge{background:rgba(38,208,124,.18);color:#26d07c;border:1px solid rgba(38,208,124,.4);border-radius:6px;padding:2px 6px;font-size:10px;font-weight:700;margin-left:4px}
  .fr-buddy-req-card{background:linear-gradient(135deg,rgba(38,208,124,.18),rgba(43,196,255,.12));border:1.5px solid rgba(38,208,124,.45);border-radius:14px;padding:12px;margin-bottom:10px}
  .fr-buddy-req-msg{font-size:13.5px;color:#fff;margin-bottom:10px;line-height:1.4}
  .fr-buddy-req-actions{display:flex;gap:8px}
  .fr-buddy-req-btn{flex:1;border:none;border-radius:10px;padding:9px;font-size:12.5px;font-weight:700;cursor:pointer}
  .fr-buddy-req-btn.yes{background:#26d07c;color:#fff}
  .fr-buddy-req-btn.no{background:rgba(255,255,255,.08);color:var(--txt2)}


/* --- Extracted Style Block --- */


  .ast-exam-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
  }
  .ast-exam-pill:hover {
    border-color: rgba(108,92,231,0.5);
    background: rgba(108,92,231,0.05);
  }
  .ast-exam-pill.active {
    background: rgba(108,92,231,0.12);
    border-color: var(--purple, #6C5CE7);
    box-shadow: 0 4px 12px rgba(108,92,231,0.15);
  }
  .pill-check {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    display: inline-block;
    position: relative;
    transition: all 0.2s ease;
  }
  .ast-exam-pill.active .pill-check {
    border-color: var(--purple, #6C5CE7);
    background: var(--purple, #6C5CE7);
  }
  .ast-exam-pill.active .pill-check::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
  }
  .pill-text {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
  }
  .ast-chip {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--txt2, #a0aec0);
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .ast-chip:hover {
    background: rgba(108,92,231,0.15);
    border-color: var(--purple, #6C5CE7);
    color: #fff;
  }


/* --- Extracted Style Block --- */


/* === BATCH F: iPad Native Layout (Strategy B) === */
@media (min-width: 768px) and (max-width: 1366px) and (pointer: coarse) {
  /* Hide desktop proposals panel and notch on tablet */
  .control-panel, .phone-notch-island {
    display: none !important;
  }
  
  /* Make the emulator fill the viewport */
  .emulator-wrapper {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
  }
  
  .phone-mockup {
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 10 !important;
    background: var(--bg-dark) !important;
  }
  
  /* Hiding mobile bottom navigation bar */
  #nav.app-bottom-nav {
    display: none !important;
  }
  
  /* Grid layout for iPad screen area */
  .screen-area {
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    height: 100vh !important;
    height: 100dvh !important;
    position: relative !important;
    overflow: hidden !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
  }
  
  /* Sidebars default view (Portrait Mode - hidden off-canvas) */
  #ipad-sidebar {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 240px !important;
    background: var(--bg2, #18181b) !important;
    border-right: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08)) !important;
    padding: 20px 12px !important;
    box-sizing: border-box !important;
    z-index: 9999 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
  }
  
  /* Overlay backdrop when sidebar is open in Portrait Mode */
  .ipad-sidebar-backdrop {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  
  .screen-area.ipad-sidebar-open .ipad-sidebar-backdrop {
    display: block !important;
  }
  
  .screen-area.ipad-sidebar-open #ipad-sidebar {
    transform: translateX(0) !important;
  }
  
  /* Sidebar items design */
  .ipad-sidebar-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    min-height: 44px !important;
    color: var(--txt2, #a1a1aa) !important;
    margin-bottom: 4px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    border: 1px solid transparent !important;
  }
  
  .ipad-sidebar-item:active {
    transform: scale(0.97) !important;
  }
  
  .ipad-sidebar-item.active {
    background: var(--bg-glass-active, rgba(108, 92, 231, 0.15)) !important;
    color: var(--purple, #a594ff) !important;
    border: 1px solid var(--border-active, rgba(108, 92, 231, 0.3)) !important;
  }
  
  /* Header adjustments on iPad */
  #hdr.app-header {
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08)) !important;
    background: var(--bg-glass-heavy, var(--bg2)) !important;
  }
  
  .ipad-hamburger-btn {
    display: inline-flex !important;
  }
  
  /* Content area adjustment */
  #content.content {
    grid-row: 2 !important;
    padding: 20px 24px !important;
    overflow-y: auto !important;
    height: 100% !important;
  }
  
  /* Modal / Popups centering and width limit */
  .em-alert-overlay .em-alert-card,
  #reward-confirm-modal .card,
  #bio-enroll .be-card,
  .pwa-dialog-box .em-alert-card {
    max-width: 600px !important;
    width: 60vw !important;
    margin: auto !important;
    border-radius: 20px !important;
  }
  
  /* Voice conversation overlay centering */
  #voice-conv-overlay.voice-conv-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px !important;
  }
  
  #voice-conv-overlay.voice-conv-overlay > div:first-of-type {
    max-width: 600px !important;
    background: var(--bg-glass-heavy, rgba(24, 24, 27, 0.7)) !important;
    border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.1)) !important;
    border-radius: 32px !important;
    padding: 40px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5) !important;
    height: auto !important;
    max-height: 80vh !important;
  }
  
  /* Soru Meydanı Grid layout */
  .opt-grid-layout {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  
  /* Real Rewards Store layout (kategori sidebar + grid) */
  #p-store {
    display: grid !important;
    grid-template-columns: 200px 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 20px !important;
  }
  
  .store-header-card {
    grid-column: 1 / span 2 !important;
  }
  
  /* Category list as sidebar on iPad */
  #store-category-chips.store-chips-wrapper {
    grid-column: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: visible !important;
    gap: 8px !important;
    padding-bottom: 0 !important;
  }
  
  .store-chip {
    width: 100% !important;
    text-align: left !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
  }
  
  #store-rewards-grid.store-grid {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  
  .store-history-title, #store-timeline-list {
    grid-column: 1 / span 2 !important;
  }
}

/* Landscape Mode (Yatay Mod) - Sidebar is always open and static */
@media (min-width: 1024px) and (max-width: 1366px) and (pointer: coarse) {
  .screen-area {
    grid-template-columns: 240px 1fr !important;
  }
  
  #ipad-sidebar {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    position: static !important;
    transform: translateX(0) !important;
    border-right: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08)) !important;
  }
  
  #hdr.app-header {
    grid-column: 2 !important;
  }
  
  #content.content {
    grid-column: 2 !important;
  }
  
  .ipad-hamburger-btn {
    display: none !important;
  }
  
  .ipad-sidebar-backdrop {
    display: none !important;
  }
  
  /* Larger Rewards Grid in Landscape */
  #store-rewards-grid.store-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}