/* JOmaxPath styles.css */
:root {
    --bg: #080810; --card: #0f0f1a; --card2: #161625;
    --accent: #7c3aed; --accent2: #a78bfa;
    --cyan: #00b8d9; --cyan2: #38d9f5;
    --green: #10b981; --orange: #f59e0b; --red: #ef4444;
    --blue: #3b82f6; --pink: #ec4899; --yellow: #eab308; --teal: #14b8a6;
    --text: #e2e8f0; --muted: #64748b; --border: rgba(124,58,237,0.2);
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { background:var(--bg); color:var(--text); font-family:'Plus Jakarta Sans','Sora',sans-serif; min-height:100vh; overflow-x:hidden; }
  ::-webkit-scrollbar { width:5px; height:5px; }
  ::-webkit-scrollbar-track { background:transparent; }
  ::-webkit-scrollbar-thumb { background:rgba(124,58,237,0.3); border-radius:10px; }
  ::-webkit-scrollbar-thumb:hover { background:rgba(0,180,216,0.5); }
  body::before {
    content:''; position:fixed; top:-50%; left:-50%; width:200%; height:200%;
    background:
      radial-gradient(ellipse at 5% 50%,rgba(0,180,216,0.07) 0%,transparent 35%),
      radial-gradient(ellipse at 95% 50%,rgba(0,191,165,0.06) 0%,transparent 35%),
      radial-gradient(ellipse at 20% 15%,rgba(124,58,237,0.09) 0%,transparent 45%),
      radial-gradient(ellipse at 80% 85%,rgba(59,130,246,0.07) 0%,transparent 45%),
      radial-gradient(ellipse at 50% 50%,rgba(105,240,174,0.03) 0%,transparent 55%);
    pointer-events:none; z-index:0;
  }
  body::after {
    content:'';
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:
      linear-gradient(to right, rgba(0,180,216,0.04) 0%, transparent 8%),
      linear-gradient(to left,  rgba(0,191,165,0.04) 0%, transparent 8%);
    pointer-events:none;
    z-index:0;
  }
  .container { max-width:1100px; margin:0 auto; padding:40px 20px; position:relative; z-index:1; }
  .side-deco { position:fixed; top:0; bottom:0; width:3px; z-index:0; pointer-events:none; }
  .side-deco-left  { left:0;  background:linear-gradient(to bottom, transparent 0%, rgba(0,180,216,0.45) 30%, rgba(124,58,237,0.3) 60%, rgba(0,191,165,0.2) 85%, transparent 100%); box-shadow:0 0 20px rgba(0,180,216,0.18); }
  .side-deco-right { right:0; background:linear-gradient(to bottom, transparent 0%, rgba(0,191,165,0.4) 30%, rgba(124,58,237,0.25) 60%, rgba(0,180,216,0.2) 85%, transparent 100%); box-shadow:0 0 20px rgba(0,191,165,0.15); }
  .side-deco-left::before  { content:''; position:absolute; top:12%; left:-4px; width:11px; height:50px; background:rgba(0,180,216,0.55); border-radius:50%; filter:blur(5px); }
  .side-deco-right::before { content:''; position:absolute; top:12%; right:-4px; width:11px; height:50px; background:rgba(0,191,165,0.45); border-radius:50%; filter:blur(5px); }
  .logo-bolt-hint { position:fixed; top:14px; left:16px; z-index:1999; font-size:22px; opacity:0.32; filter:drop-shadow(0 0 6px rgba(0,180,216,0.6)); pointer-events:none; user-select:none; transition:opacity 0.3s; }

  /* HEADER */
  .header { text-align:center; margin-bottom:50px; }
  .header .tag {
    display:inline-block;
    background:linear-gradient(135deg,rgba(0,180,216,0.12),rgba(124,58,237,0.12));
    border:1px solid rgba(0,180,216,0.35);
    color:#38d9f5;
    font-family:'Space Mono',monospace; font-size:11px; letter-spacing:3px;
    text-transform:uppercase; padding:6px 16px; border-radius:20px; margin-bottom:20px;
    text-shadow: 0 0 12px rgba(0,180,216,0.4);
  }
  .header h1 {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    letter-spacing: -1.5px;
    background: linear-gradient(135deg, #fff 30%, rgba(0,180,216,0.85) 70%, rgba(124,58,237,0.9) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    margin-bottom: 10px;
  }
  .header p { color:var(--muted); font-size:15px; font-weight:300; }

  /* GOAL BANNER */
  .goal-banner {
    background: linear-gradient(135deg, rgba(124,58,237,0.1), rgba(0,180,216,0.06));
    border: 1px solid rgba(124,58,237,0.2);
    border-radius: 20px;
    padding: 28px 32px;
    margin-bottom: 32px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
  }
  .goal-banner::before { content:''; position:absolute; top:-40px; right:-40px; width:160px; height:160px; background:radial-gradient(circle, rgba(0,180,216,0.12), transparent 70%); pointer-events:none; }
  .goal-banner .icon { font-size:40px; flex-shrink:0; filter: drop-shadow(0 0 12px rgba(124,58,237,0.5)); }
  .goal-banner h3 { font-size:18px; font-weight:700; color:var(--accent2); margin-bottom:6px; }
  .goal-banner p { font-size:13px; color:var(--muted); line-height:1.6; }

  /* PROGRESS */
  .progress-section { background:linear-gradient(160deg,rgba(15,15,26,1),rgba(18,18,32,1)); border:1px solid rgba(255,255,255,0.07); border-top: 2px solid rgba(0,180,216,0.45); border-radius:18px; padding:26px 30px; margin-bottom:40px; position:relative; overflow:hidden; box-shadow:0 4px 32px rgba(0,0,0,0.3); }
  .progress-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
  .progress-header h3 { font-size:15px; font-weight:600; }
  .progress-header span { font-family:'Space Mono',monospace; font-size:13px; color:var(--accent2); }
  .progress-bar { background:rgba(255,255,255,0.05); border-radius:8px; height:12px; overflow:hidden; margin-bottom:10px; }
  .progress-fill {
    height:100%; width:44%;
    background:linear-gradient(90deg,var(--accent),var(--blue));
    border-radius:8px; position:relative; transition:width 1s ease;
  }
  .progress-fill::after { content:''; position:absolute; right:0; top:0; height:100%; width:20px; background:rgba(255,255,255,0.3); filter:blur(4px); }
  .progress-chapters { display:flex; gap:8px; margin-top:14px; }
  .chapter-dot { flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,0.1); cursor:pointer; transition:transform 0.15s,background 0.2s; position:relative; }
  .chapter-dot:hover { transform:scaleY(1.8); }
  .chapter-dot.done { background:var(--green); }
  .chapter-dot.current { background:var(--accent2); animation:pulse-dot 2s infinite; }
  .chapter-dot[data-label]::after {
    content:attr(data-label); position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
    background:#1a1a26; color:var(--text); font-family:'Space Mono',monospace; font-size:10px;
    padding:3px 8px; border-radius:6px; white-space:nowrap; border:1px solid rgba(255,255,255,0.1);
    opacity:0; pointer-events:none; transition:opacity 0.2s; z-index:10;
  }
  .chapter-dot:hover[data-label]::after { opacity:1; }
  @keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.5} }
  .progress-btn-row { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
  .progress-btn {
    background:rgba(124,58,237,0.12); border:1px solid rgba(124,58,237,0.3);
    color:var(--accent2); font-family:'Space Mono',monospace; font-size:10px;
    letter-spacing:1px; padding:6px 14px; border-radius:20px; cursor:pointer; transition:all 0.2s;
  }
  .progress-btn:hover { background:rgba(124,58,237,0.25); }
  .progress-btn.minus { border-color:rgba(239,68,68,0.3); color:#fca5a5; background:rgba(239,68,68,0.08); }
  .progress-btn.minus:hover { background:rgba(239,68,68,0.18); }
  .progress-congrats {
    margin-top:12px; padding:10px 14px; border-radius:10px;
    background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.3);
    color:#6ee7b7; font-size:13px; font-weight:600; display:none; animation:fadeUp 0.4s forwards;
  }

  /* SECTION TITLE */
  .section-title {
    font-family:'Space Mono',monospace; font-size:11px; letter-spacing:3px; text-transform:uppercase;
    color:var(--muted); margin-bottom:20px; display:flex; align-items:center; gap:12px;
  }
  .section-title::after { content:''; flex:1; height:1px; background:var(--border); }

  /* LEGEND */
  .legend { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:30px; }
  .legend-item { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
  .legend-dot { width:10px; height:10px; border-radius:3px; flex-shrink:0; }

  /* DAY CARDS */
  .week-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px; margin-bottom:50px; }
  .day-card {
    background:var(--card); border:1px solid var(--border);
    border-radius:16px; overflow:hidden; transition:transform 0.2s,border-color 0.2s,box-shadow 0.2s;
    animation:fadeUp 0.5s forwards; opacity:0;
  }
  .day-card:hover { transform:translateY(-3px); border-color:rgba(124,58,237,0.4); box-shadow:0 8px 32px rgba(124,58,237,0.1); }
  .day-card.weekend { border-color:rgba(249,115,22,0.2); }
  .day-card:nth-child(1){animation-delay:0.08s}.day-card:nth-child(2){animation-delay:0.13s}
  .day-card:nth-child(3){animation-delay:0.18s}.day-card:nth-child(4){animation-delay:0.23s}
  .day-card:nth-child(5){animation-delay:0.28s}.day-card:nth-child(6){animation-delay:0.33s}
  .day-card:nth-child(7){animation-delay:0.38s}
  @keyframes fadeUp { to { opacity:1; transform:translateY(0); } }

  .day-header {
    padding:16px 20px; display:flex; justify-content:space-between; align-items:center;
    border-bottom:1px solid rgba(255,255,255,0.05);
    background:linear-gradient(135deg,rgba(255,255,255,0.03),transparent);
  }
  .day-name { font-size:16px; font-weight:700; }
  .day-sleep { font-family:'Space Mono',monospace; font-size:11px; color:var(--muted); background:rgba(255,255,255,0.05); padding:4px 10px; border-radius:20px; }
  .day-body { padding:16px 20px; }

  /* BLOCKS */
  .block { display:flex; align-items:flex-start; gap:12px; padding:10px 12px; border-radius:10px; margin-bottom:8px; font-size:13px; }
  .block:last-child { margin-bottom:0; }
  .block-time { font-family:'Space Mono',monospace; font-size:10px; color:var(--muted); min-width:70px; flex-shrink:0; padding-top:2px; }
  .block-content { flex:1; }
  .block-label { font-weight:600; font-size:13px; margin-bottom:2px; }
  .block-note { font-size:11px; opacity:0.6; line-height:1.4; }
  .block-escola    { background:rgba(59,130,246,0.08);  border-left:2px solid var(--blue); }
  .block-escola    .block-label { color:#93c5fd; }
  .block-prog      { background:rgba(124,58,237,0.12); border-left:2px solid var(--accent); }
  .block-prog      .block-label { color:var(--accent2); }
  .block-robotech  { background:rgba(16,185,129,0.08);  border-left:2px solid var(--green); }
  .block-robotech  .block-label { color:#6ee7b7; }
  .block-hockey    { background:rgba(239,68,68,0.08);   border-left:2px solid var(--red); }
  .block-hockey    .block-label { color:#fca5a5; }
  .block-angles    { background:rgba(236,72,153,0.08);  border-left:2px solid var(--pink); }
  .block-angles    .block-label { color:#f9a8d4; }
  .block-escola-feina { background:rgba(20,184,166,0.08); border-left:2px solid var(--teal); }
  .block-escola-feina .block-label { color:#5eead4; }
  .block-rest      { background:rgba(255,255,255,0.03); border-left:2px solid rgba(255,255,255,0.1); }
  .block-rest      .block-label { color:var(--muted); }
  .block-sopar     { background:rgba(245,158,11,0.06);  border-left:2px solid rgba(245,158,11,0.3); }
  .block-sopar     .block-label { color:#fcd34d; }
  .block-prep      { background:rgba(234,179,8,0.06);   border-left:2px solid rgba(234,179,8,0.3); }
  .block-prep      .block-label { color:#fef08a; }
  .prog-badge {
    display:inline-block; background:var(--accent); color:white;
    font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    padding:2px 7px; border-radius:10px; margin-left:6px; vertical-align:middle;
  }

  /* WEEKLY SUMMARY */
  .weekly-summary { background:linear-gradient(160deg,rgba(15,15,26,1),rgba(18,18,32,1)); border:1px solid rgba(255,255,255,0.07); border-radius:18px; padding:30px; margin-bottom:40px; box-shadow:0 4px 32px rgba(0,0,0,0.3); }
  .stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:16px; margin-top:20px; }
  .stat-card { background:linear-gradient(145deg, var(--card2), rgba(20,20,35,0.9)); border-radius:14px; padding:18px; text-align:center; border:1px solid rgba(255,255,255,0.06); transition: transform 0.2s, border-color 0.2s; }
  .stat-card:hover { transform: translateY(-2px); border-color: rgba(0,180,216,0.2); }
  .stat-number { font-family:'Space Mono',monospace; font-size:26px; font-weight:700; margin-bottom:6px; }
  .stat-label { font-size:11px; color:var(--muted); line-height:1.4; }

  /* MATCHES */
  .matches-section { background:var(--card); border:1px solid rgba(239,68,68,0.2); border-radius:16px; padding:30px; margin-bottom:40px; }
  .match-item { display:flex; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
  .match-item:last-child { border-bottom:none; }
  .match-date { font-family:'Space Mono',monospace; font-size:11px; color:var(--muted); min-width:80px; flex-shrink:0; }
  .match-info { flex:1; }
  .match-name { font-size:13px; font-weight:600; color:#fca5a5; margin-bottom:3px; }
  .match-teams { font-size:11px; color:var(--muted); }
  .match-tag { font-size:10px; padding:3px 10px; border-radius:20px; font-weight:600; flex-shrink:0; }
  .match-tag.casa { background:rgba(16,185,129,0.15); color:#6ee7b7; }
  .match-tag.fora { background:rgba(239,68,68,0.15); color:#fca5a5; }
  .match-countdown { font-family:'Space Mono',monospace; font-size:10px; padding:3px 8px; border-radius:20px; background:rgba(59,130,246,0.12); color:#93c5fd; border:1px solid rgba(59,130,246,0.2); flex-shrink:0; }
  .match-countdown.propera { background:rgba(245,158,11,0.12); color:#fcd34d; border-color:rgba(245,158,11,0.2); }
  .match-countdown.avui { background:rgba(239,68,68,0.15); color:#fca5a5; border-color:rgba(239,68,68,0.3); animation:pulse-dot 1.5s infinite; }
  .match-countdown.passat { opacity:0.4; }

  /* EXAM TRACKER */
  .exam-section { background:var(--card); border:1px solid rgba(234,179,8,0.25); border-radius:16px; padding:30px; margin-bottom:40px; }
  .exam-header-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
  .exam-header-bar h3 { font-size:16px; font-weight:700; color:#fef08a; }
  .add-exam-btn {
    background:rgba(234,179,8,0.15); border:1px solid rgba(234,179,8,0.4);
    color:#fef08a; font-family:'Space Mono',monospace; font-size:11px;
    padding:7px 14px; border-radius:20px; cursor:pointer; transition:all 0.2s; letter-spacing:1px;
  }
  .add-exam-btn:hover { background:rgba(234,179,8,0.25); }
  .exam-form { display:none; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
  .exam-form.open { display:flex; }
  .exam-form input,.exam-form select {
    background:var(--card2); border:1px solid rgba(255,255,255,0.1);
    color:var(--text); font-family:'Sora',sans-serif; font-size:13px;
    padding:9px 14px; border-radius:10px; outline:none; flex:1; min-width:130px;
  }
  .exam-form input:focus,.exam-form select:focus { border-color:rgba(234,179,8,0.5); }
  .exam-form select option { background:#1a1a26; }
  .save-exam-btn { background:var(--yellow); color:#0a0a0f; font-weight:700; font-size:12px; padding:9px 18px; border-radius:10px; border:none; cursor:pointer; }
  .exam-list { display:flex; flex-direction:column; gap:10px; }
  .exam-item {
    background: rgba(255,255,255,0.025);
    border-left: 3px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.2s;
    cursor: pointer;
  }
  .exam-item:hover { background:rgba(255,255,255,0.04); transform:translateX(3px); }
  .exam-item.done-item { opacity:0.4; }
  .exam-item.done-item .exam-name { text-decoration:line-through; }
  .exam-item.urgent { border-left-color:var(--red); animation:urgentPulse 2.5s ease-in-out infinite; }
  .exam-item.soon   { border-left-color:var(--orange); }
  .exam-item.ok     { border-left-color:var(--green); }
  .exam-check { width:18px; height:18px; border-radius:5px; border:2px solid rgba(255,255,255,0.2); cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
  .exam-check.checked { background:var(--green); border-color:var(--green); }
  .exam-check.checked::after { content:'✓'; color:white; font-size:11px; font-weight:700; }
  .exam-info { flex:1; }
  .exam-name { font-size:14px; font-weight:600; margin-bottom:3px; }
  .exam-meta { font-size:11px; color:var(--muted); }
  .exam-badge { font-size:10px; padding:3px 10px; border-radius:20px; font-weight:600; flex-shrink:0; }
  .exam-badge.urgent { background:rgba(239,68,68,0.15); color:#fca5a5; }
  .exam-badge.soon   { background:rgba(245,158,11,0.15); color:#fcd34d; }
  .exam-badge.ok     { background:rgba(16,185,129,0.15); color:#6ee7b7; }
  .exam-delete { color:var(--muted); cursor:pointer; font-size:16px; padding:4px; transition:color 0.2s; }
  .exam-delete:hover { color:var(--red); }
  .exam-empty { text-align:center; color:var(--muted); font-size:13px; padding:30px; }
  .exam-edit { color:var(--muted); cursor:pointer; font-size:14px; padding:4px; transition:color 0.2s; margin-right:2px; }
  .exam-edit:hover { color:var(--accent2); }
  .exam-edit-form { display:none; background:var(--card2); border-radius:10px; padding:12px 14px; margin-top:8px; }
  .exam-edit-form.open { display:flex; flex-wrap:wrap; gap:8px; }
  .exam-edit-form input,.exam-edit-form select { background:var(--card); border:1px solid rgba(255,255,255,0.1); color:var(--text); font-family:'Sora',sans-serif; font-size:12px; padding:7px 10px; border-radius:8px; outline:none; flex:1; min-width:100px; }
  .exam-edit-form input:focus,.exam-edit-form select:focus { border-color:rgba(124,58,237,0.4); }
  .exam-edit-save { background:var(--accent); color:white; font-weight:700; font-size:11px; padding:7px 14px; border-radius:8px; border:none; cursor:pointer; }

  /* SCREEN TIME TIPS */
  .screen-section { background:var(--card); border:1px solid rgba(20,184,166,0.25); border-radius:16px; padding:30px; margin-bottom:40px; }
  .screen-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-top:16px; }
  .screen-tip { background:var(--card2); border-radius:12px; padding:18px; border:1px solid rgba(20,184,166,0.1); }
  .screen-tip .tip-icon { font-size:26px; margin-bottom:10px; }
  .screen-tip .tip-title { font-size:14px; font-weight:700; color:#5eead4; margin-bottom:7px; }
  .screen-tip .tip-text { font-size:12px; color:var(--muted); line-height:1.6; }

  /* TIPS GRID */
  .tips-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; margin-bottom:50px; }
  .tip-card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:22px; }
  .tip-icon { font-size:28px; margin-bottom:14px; }
  .tip-title { font-size:15px; font-weight:700; margin-bottom:8px; color:var(--accent2); }
  .tip-text { font-size:13px; color:var(--muted); line-height:1.7; }

  /* FOOTER */
  .moto { text-align:center; padding:40px 20px; border-top:1px solid var(--border); }
  .moto-text { font-size:clamp(1.2rem,3vw,2rem); font-weight:800; line-height:1.3; background:linear-gradient(135deg,var(--accent2),var(--green)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:12px; }
  .moto-sub { font-family:'Space Mono',monospace; font-size:12px; color:var(--muted); letter-spacing:2px; }

  /* STICKY NOTES */
  #notes-overlay { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1000; }
  .sticky {
    position:absolute; width:210px; min-height:130px; border-radius:4px 14px 14px 4px; padding:0;
    cursor:grab; pointer-events:all;
    box-shadow:4px 6px 24px rgba(0,0,0,0.5),0 1px 0 rgba(255,255,255,0.05);
    transition:box-shadow 0.2s,transform 0.1s; user-select:none;
    display:flex; flex-direction:column;
    animation:stickyPop 0.3s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
    resize:both; overflow:hidden; min-width:160px; min-height:110px; max-width:400px; max-height:500px;
  }
  @keyframes stickyPop { from{transform:scale(0.7) rotate(-5deg);opacity:0} to{transform:scale(1) rotate(var(--rot,0deg));opacity:1} }
  .sticky:active { cursor:grabbing; box-shadow:8px 12px 30px rgba(0,0,0,0.7); transform:scale(1.04) rotate(var(--rot,0deg)) !important; }
  .sticky.dragging { z-index:9999; }
  .sticky-header { display:flex; justify-content:space-between; align-items:center; padding:8px 10px 6px; border-radius:4px 14px 0 0; background:rgba(0,0,0,0.2); }
  .sticky-drag-hint { font-size:10px; opacity:0.5; letter-spacing:2px; }
  .sticky-close { width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,0.25); border:none; cursor:pointer; color:rgba(255,255,255,0.6); font-size:12px; line-height:1; display:flex; align-items:center; justify-content:center; transition:background 0.2s; pointer-events:all; }
  .sticky-close:hover { background:rgba(239,68,68,0.5); color:white; }
  .sticky-textarea { flex:1; background:transparent; border:none; outline:none; font-family:'Sora',sans-serif; font-size:13px; line-height:1.6; color:rgba(0,0,0,0.75); padding:10px 12px; resize:none; min-height:90px; }
  .sticky-textarea::placeholder { color:rgba(0,0,0,0.35); }
  .sticky-footer { padding:4px 10px 8px; font-size:10px; opacity:0.5; text-align:right; font-family:'Space Mono',monospace; color:rgba(0,0,0,0.5); }
  .sticky.color-yellow{background:#fef08a} .sticky.color-green{background:#bbf7d0}
  .sticky.color-pink{background:#fbcfe8}   .sticky.color-blue{background:#bae6fd}
  .sticky.color-purple{background:#ddd6fe} .sticky.color-orange{background:#fed7aa}

  /* FAB BUTTONS */
  #add-note-fab {
    position:fixed; bottom:30px; right:30px; width:56px; height:56px; border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--blue)); border:none; cursor:pointer; z-index:1100;
    box-shadow:0 4px 20px rgba(124,58,237,0.5); display:flex; align-items:center; justify-content:center;
    font-size:24px; transition:transform 0.2s,box-shadow 0.2s;
  }
  #add-note-fab:hover { transform:scale(1.1); box-shadow:0 6px 28px rgba(124,58,237,0.7); }
  #add-note-fab { z-index:1600 !important; }
  #note-picker {
    position:fixed; bottom:96px; right:30px; background:var(--card); border:1px solid var(--border);
    border-radius:16px; padding:16px; z-index:1100; display:none;
    box-shadow:0 8px 32px rgba(0,0,0,0.6); animation:fadeUp 0.2s forwards;
  }
  #note-picker.open { display:block; }
  #note-picker h4 { font-size:12px; color:var(--muted); margin-bottom:12px; font-family:'Space Mono',monospace; letter-spacing:2px; }
  .color-picker-row { display:flex; gap:8px; flex-wrap:wrap; }
  .color-pick-btn { width:32px; height:32px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:transform 0.15s,border-color 0.15s; }
  .color-pick-btn:hover { transform:scale(1.2); border-color:white; }

  /* EDITABLE BADGES */
  .editable-badge { cursor:pointer; transition:background 0.2s,opacity 0.2s; position:relative; }
  .editable-badge:hover { background:rgba(167,139,250,0.35); opacity:0.85; }
  .editable-badge::after { content:' ✎'; font-size:8px; opacity:0.5; }
  .day-custom-badge {
    display:inline-block; cursor:pointer; font-family:'Space Mono',monospace; font-size:9px;
    font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:2px 7px; border-radius:10px;
    margin-left:4px; vertical-align:middle; background:rgba(255,255,255,0.07); color:var(--muted);
    border:1px dashed rgba(255,255,255,0.15); transition:all 0.2s; min-width:20px;
  }
  .day-custom-badge:empty::before { content:'+ etiqueta'; opacity:0.4; font-size:8px; }
  .day-custom-badge:not(:empty) { background:rgba(124,58,237,0.15); color:var(--accent2); border:1px solid rgba(124,58,237,0.3); }
  .day-custom-badge:hover { border-color:rgba(124,58,237,0.5); background:rgba(124,58,237,0.2); }
  .badge-edit-input {
    font-family:'Space Mono',monospace; font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    background:rgba(124,58,237,0.2); border:1px solid rgba(124,58,237,0.5); color:var(--accent2);
    padding:2px 7px; border-radius:10px; outline:none; width:110px; vertical-align:middle;
  }
  .day-date-badge {
    display:inline-block; font-family:'Space Mono',monospace; font-size:10px;
    background:rgba(255,255,255,0.07); color:var(--muted); padding:2px 8px; border-radius:10px;
    margin-left:4px; vertical-align:middle; border:1px solid rgba(255,255,255,0.08);
  }
  .day-date-badge.today { background:rgba(124,58,237,0.25); color:var(--accent2); border-color:rgba(124,58,237,0.4); font-weight:700; }

  /* DAY EVENTS */
  .day-events { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
  .day-event-item { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:8px; padding:7px 10px; font-size:12px; color:var(--text); animation:fadeUp 0.2s forwards; }
  .day-event-item .ev-icon { font-size:14px; flex-shrink:0; }
  .day-event-item .ev-text { flex:1; line-height:1.3; }
  .day-event-item .ev-time { font-family:'Space Mono',monospace; font-size:10px; color:var(--muted); flex-shrink:0; }
  .day-event-item .ev-del { color:var(--muted); cursor:pointer; font-size:14px; padding:2px 4px; transition:color 0.2s; }
  .day-event-item .ev-del:hover { color:var(--red); }
  .day-event-item.exam-event {
    background: linear-gradient(135deg, rgba(239,68,68,0.18), rgba(180,30,30,0.10));
    border: 1px solid rgba(239,68,68,0.45);
    box-shadow: 0 2px 12px rgba(239,68,68,0.18), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .day-event-item.exam-event .ev-icon { font-size:18px; }
  .day-event-item.exam-event .ev-text {
    font-weight:700;
    color:#fca5a5;
    font-size:13px;
    letter-spacing:0.2px;
  }
  .day-event-item.exam-event .ev-time { color:rgba(252,165,165,0.7); }
  .day-event-item.exam-event::before {
    content:'EXAMEN';
    font-family:'Space Mono',monospace;
    font-size:8px;
    letter-spacing:2px;
    color:rgba(239,68,68,0.7);
    font-weight:700;
    position:absolute;
    top:-1px; right:28px;
    background:rgba(239,68,68,0.12);
    padding:1px 6px;
    border-radius:0 0 5px 5px;
    border: 1px solid rgba(239,68,68,0.25);
    border-top:none;
  }
  .day-event-item.exam-event { position:relative; padding-top:14px; }
  .add-day-event-btn {
    margin-top:8px; width:100%; background:rgba(124,58,237,0.07);
    border:1px dashed rgba(124,58,237,0.25); color:rgba(124,58,237,0.6);
    font-family:'Sora',sans-serif; font-size:11px; font-weight:600;
    padding:8px; border-radius:8px; cursor:pointer; transition:all 0.2s; letter-spacing:0.5px;
  }
  .add-day-event-btn:hover { background:rgba(124,58,237,0.14); border-color:rgba(124,58,237,0.5); color:var(--accent2); }

  /* TIMED EVENTS — mini timeline inside day cards */
  .timed-events-section { margin-top:10px; border-top:1px solid rgba(255,255,255,0.05); padding-top:10px; }
  .timed-events-label { font-family:'Space Mono',monospace; font-size:9px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; }
  .timed-events-label button { background:rgba(0,180,216,0.08); border:1px solid rgba(0,180,216,0.2); color:rgba(0,180,216,0.7); font-size:9px; font-family:'Space Mono',monospace; padding:2px 8px; border-radius:10px; cursor:pointer; transition:all 0.15s; letter-spacing:1px; }
  .timed-events-label button:hover { background:rgba(0,180,216,0.18); color:#38d9f5; }
  .timed-ev-item {
    display:flex; align-items:stretch; gap:0; border-radius:8px; overflow:hidden;
    margin-bottom:5px; cursor:pointer; transition:filter 0.15s, transform 0.1s;
    box-shadow:0 2px 8px rgba(0,0,0,0.3); position:relative;
  }
  .timed-ev-item:hover { filter:brightness(1.15); transform:translateX(2px); }
  .timed-ev-color-bar { width:4px; flex-shrink:0; }
  .timed-ev-body { flex:1; padding:7px 10px; display:flex; flex-direction:column; gap:2px; }
  .timed-ev-title { font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .timed-ev-time { font-family:'Space Mono',monospace; font-size:10px; opacity:0.65; }
  .timed-ev-del { position:absolute; top:4px; right:5px; width:16px; height:16px; border-radius:50%; background:rgba(0,0,0,0.5); display:none; align-items:center; justify-content:center; font-size:9px; color:white; cursor:pointer; border:none; }
  .timed-ev-item:hover .timed-ev-del { display:flex; }

  /* Color variants for timed events */
  .tec-purple { background:linear-gradient(135deg,rgba(124,58,237,0.18),rgba(90,40,160,0.12)); border:1px solid rgba(124,58,237,0.3); }
  .tec-purple .timed-ev-color-bar { background:linear-gradient(180deg,#7C5CBF,#5A3E99); }
  .tec-purple .timed-ev-title { color:#c4b5fd; }
  .tec-blue { background:linear-gradient(135deg,rgba(59,110,165,0.18),rgba(40,78,120,0.12)); border:1px solid rgba(59,110,165,0.3); }
  .tec-blue .timed-ev-color-bar { background:linear-gradient(180deg,#3B6EA5,#2A4E7A); }
  .tec-blue .timed-ev-title { color:#93c5fd; }
  .tec-green { background:linear-gradient(135deg,rgba(46,125,82,0.18),rgba(30,90,58,0.12)); border:1px solid rgba(46,125,82,0.3); }
  .tec-green .timed-ev-color-bar { background:linear-gradient(180deg,#2E7D52,#1E5C3A); }
  .tec-green .timed-ev-title { color:#6ee7b7; }
  .tec-orange { background:linear-gradient(135deg,rgba(181,98,42,0.18),rgba(130,70,30,0.12)); border:1px solid rgba(181,98,42,0.3); }
  .tec-orange .timed-ev-color-bar { background:linear-gradient(180deg,#B5622A,#8A4A1F); }
  .tec-orange .timed-ev-title { color:#fcd34d; }
  .tec-red { background:linear-gradient(135deg,rgba(160,48,48,0.22),rgba(120,32,32,0.14)); border:1px solid rgba(160,48,48,0.4); }
  .tec-red .timed-ev-color-bar { background:linear-gradient(180deg,#A03030,#7A2020); }
  .tec-red .timed-ev-title { color:#fca5a5; }
  .tec-pink { background:linear-gradient(135deg,rgba(155,48,112,0.18),rgba(114,31,82,0.12)); border:1px solid rgba(155,48,112,0.3); }
  .tec-pink .timed-ev-color-bar { background:linear-gradient(180deg,#9B3070,#721F52); }
  .tec-pink .timed-ev-title { color:#f9a8d4; }
  .tec-teal { background:linear-gradient(135deg,rgba(30,112,104,0.18),rgba(20,80,72,0.12)); border:1px solid rgba(30,112,104,0.3); }
  .tec-teal .timed-ev-color-bar { background:linear-gradient(180deg,#1E7068,#154E48); }
  .tec-teal .timed-ev-title { color:#5eead4; }

  /* Timed event modal */
  #timed-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:3000; display:none; align-items:center; justify-content:center; backdrop-filter:blur(6px); }
  #timed-modal-overlay.open { display:flex; }
  #timed-modal { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:28px; width:90%; max-width:400px; box-shadow:0 20px 60px rgba(0,0,0,0.9); animation:stickyPop 0.3s cubic-bezier(0.175,0.885,0.32,1.275) forwards; }
  #timed-modal h4 { font-size:16px; font-weight:700; margin-bottom:18px; color:var(--accent2); }
  .timed-color-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
  .tcbtn { width:24px; height:24px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:all 0.15s; }
  .tcbtn:hover { transform:scale(1.2); }
  .tcbtn.sel { border-color:white; box-shadow:0 0 0 2px rgba(124,58,237,0.6); }
  .timed-modal-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

  /* DAY EVENT MODAL */
  #day-modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:2000; display:none;
    align-items:center; justify-content:center; backdrop-filter:blur(4px);
  }
  #day-modal-overlay.open { display:flex; }
  #day-modal { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:28px; width:90%; max-width:420px; box-shadow:0 20px 60px rgba(0,0,0,0.8); animation:stickyPop 0.3s cubic-bezier(0.175,0.885,0.32,1.275) forwards; }
  #day-modal h4 { font-size:16px; font-weight:700; color:var(--accent2); margin-bottom:20px; }
  .modal-field { margin-bottom:14px; }
  .modal-field label { display:block; font-size:11px; color:var(--muted); font-family:'Space Mono',monospace; letter-spacing:1px; margin-bottom:6px; }
  .modal-field input,.modal-field select { width:100%; background:var(--card2); border:1px solid rgba(255,255,255,0.1); color:var(--text); font-family:'Sora',sans-serif; font-size:13px; padding:10px 14px; border-radius:10px; outline:none; transition:border-color 0.2s; }
  .modal-field input:focus,.modal-field select:focus { border-color:rgba(124,58,237,0.5); }
  .modal-field select option { background:#1a1a26; }
  .modal-btns { display:flex; gap:10px; margin-top:20px; }
  .modal-save { flex:1; background:var(--accent); color:white; font-weight:700; font-size:13px; padding:11px; border-radius:10px; border:none; cursor:pointer; transition:background 0.2s; }
  .modal-save:hover { background:#6d28d9; }
  .modal-cancel { padding:11px 18px; background:transparent; border:1px solid rgba(255,255,255,0.1); color:var(--muted); border-radius:10px; cursor:pointer; font-size:13px; transition:all 0.2s; }
  .modal-cancel:hover { border-color:rgba(255,255,255,0.25); color:var(--text); }

  /* MONTHLY CALENDAR */
  .monthly-section { background:var(--card); border:1px solid rgba(124,58,237,0.25); border-radius:16px; padding:30px; margin-bottom:40px; }
  .cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
  .cal-nav h3 { font-size:18px; font-weight:700; background:linear-gradient(135deg,#fff,var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; text-transform:capitalize; }
  .cal-nav-btn { background:rgba(0,180,216,0.08); border:1px solid rgba(0,180,216,0.25); color:#38d9f5; width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:16px; transition:all 0.2s; display:flex; align-items:center; justify-content:center; }
  .cal-nav-btn:hover { background:rgba(0,180,216,0.2); box-shadow:0 0 12px rgba(0,180,216,0.3); }
  .cal-grid-header { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px; }
  .cal-grid-header span { text-align:center; font-family:'Space Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:1px; padding:4px 0; }
  .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
  .cal-cell { min-height:72px; border-radius:10px; background:var(--card2); border:1px solid rgba(255,255,255,0.04); padding:6px; position:relative; cursor:pointer; transition:border-color 0.2s,background 0.2s,transform 0.15s; display:flex; flex-direction:column; gap:3px; }
  .cal-cell:hover { border-color:rgba(124,58,237,0.35); background:rgba(124,58,237,0.06); transform:scale(1.02); }
  .cal-cell.empty { background:transparent; border-color:transparent; cursor:default; }
  .cal-cell.today { border-color:rgba(0,180,216,0.6); background:rgba(0,180,216,0.08); box-shadow:0 0 0 1px rgba(0,180,216,0.2) inset; }
  .cal-cell.has-events { border-color:rgba(124,58,237,0.25); }
  .cal-day-num { font-family:'Space Mono',monospace; font-size:12px; font-weight:700; color:var(--muted); line-height:1; }
  .cal-cell.today .cal-day-num { color:#38d9f5; font-weight:800; }
  .cal-cell.weekend-day .cal-day-num { color:#fb923c; }
  .cal-cell.has-exam { border-color:rgba(239,68,68,0.45) !important; background:rgba(239,68,68,0.06); }
  .cal-cell.has-exam .cal-day-num { color:#fca5a5; }
  .cal-cell.has-exam::after { content:''; position:absolute; top:4px; right:4px; width:6px; height:6px; background:#ef4444; border-radius:50%; box-shadow:0 0 6px rgba(239,68,68,0.8); }
  .cal-event-dot { font-size:10px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:2px 5px; border-radius:4px; background:rgba(124,58,237,0.15); color:var(--accent2); max-width:100%; font-weight:500; }
  /* ── Tipus al calendari mensual ── */
  .cal-event-dot.type-exam     { background:rgba(239,68,68,0.22);   color:#ff6b6b;  font-weight:700; border-left:2px solid #ef4444; box-shadow:0 0 6px rgba(239,68,68,0.25); }
  .cal-event-dot.type-deures   { background:rgba(20,184,166,0.18);  color:#5eead4;  border-left:2px solid #14b8a6; }
  .cal-event-dot.type-treball  { background:rgba(245,158,11,0.20);  color:#fcd34d;  border-left:2px solid #f59e0b; font-weight:600; }
  .cal-event-dot.type-tasca    { background:rgba(59,130,246,0.20);  color:#93c5fd;  border-left:2px solid #3b82f6; }
  .cal-event-dot.type-personal { background:rgba(236,72,153,0.18);  color:#f9a8d4;  border-left:2px solid #ec4899; }
  .cal-event-dot.type-partit   { background:rgba(239,68,68,0.12);   color:#fca5a5; }
  .cal-event-dot.type-other    { background:rgba(124,58,237,0.15);  color:var(--accent2); }
  /* ── Tipus al calendari setmanal (day-event-item) ── */
  .day-event-item.treball-event  { background:linear-gradient(135deg,rgba(245,158,11,0.15),rgba(180,110,0,0.08)); border-color:rgba(245,158,11,0.4); }
  .day-event-item.treball-event .ev-text { font-weight:700; color:#fcd34d; }
  .day-event-item.treball-event::before { content:'TREBALL'; font-family:'Space Mono',monospace; font-size:8px; letter-spacing:2px; color:rgba(245,158,11,0.7); font-weight:700; position:absolute; top:-1px; right:28px; background:rgba(245,158,11,0.1); padding:1px 6px; border-radius:0 0 5px 5px; border:1px solid rgba(245,158,11,0.25); border-top:none; }
  .day-event-item.treball-event { position:relative; padding-top:14px; }
  .day-event-item.tasca-event    { background:linear-gradient(135deg,rgba(59,130,246,0.15),rgba(30,70,180,0.08)); border-color:rgba(59,130,246,0.4); }
  .day-event-item.tasca-event .ev-text { font-weight:700; color:#93c5fd; }
  .day-event-item.tasca-event::before  { content:'TASCA'; font-family:'Space Mono',monospace; font-size:8px; letter-spacing:2px; color:rgba(59,130,246,0.7); font-weight:700; position:absolute; top:-1px; right:28px; background:rgba(59,130,246,0.1); padding:1px 6px; border-radius:0 0 5px 5px; border:1px solid rgba(59,130,246,0.25); border-top:none; }
  .day-event-item.tasca-event { position:relative; padding-top:14px; }
  .day-event-item.personal-event { background:linear-gradient(135deg,rgba(236,72,153,0.15),rgba(150,30,100,0.08)); border-color:rgba(236,72,153,0.4); }
  .day-event-item.personal-event .ev-text { font-weight:700; color:#f9a8d4; }
  .day-event-item.personal-event::before { content:'PERSONAL'; font-family:'Space Mono',monospace; font-size:8px; letter-spacing:2px; color:rgba(236,72,153,0.7); font-weight:700; position:absolute; top:-1px; right:28px; background:rgba(236,72,153,0.1); padding:1px 6px; border-radius:0 0 5px 5px; border:1px solid rgba(236,72,153,0.25); border-top:none; }
  .day-event-item.personal-event { position:relative; padding-top:14px; }
  .day-event-item.deures-event   { background:linear-gradient(135deg,rgba(20,184,166,0.13),rgba(0,100,90,0.08)); border-color:rgba(20,184,166,0.35); }
  .day-event-item.deures-event .ev-text { font-weight:600; color:#5eead4; }
  .cal-more { font-size:10px; color:var(--muted); font-family:'Space Mono',monospace; }
  .cal-legend { display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
  .cal-legend-item { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); }
  .cal-legend-dot { width:8px; height:8px; border-radius:2px; }

  /* Month event modal */
  #month-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:2000; display:none; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
  #month-modal-overlay.open { display:flex; }
  #month-modal { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:28px; width:90%; max-width:440px; box-shadow:0 20px 60px rgba(0,0,0,0.8); animation:stickyPop 0.25s cubic-bezier(0.175,0.885,0.32,1.275) forwards; }
  #month-modal h4 { font-size:16px; font-weight:700; color:var(--accent2); margin-bottom:6px; }
  #month-modal .modal-date-sub { font-size:12px; color:var(--muted); margin-bottom:20px; font-family:'Space Mono',monospace; }
  .month-event-list { max-height:180px; overflow-y:auto; margin-bottom:16px; display:flex; flex-direction:column; gap:8px; }
  .month-event-row { display:flex; align-items:center; gap:10px; background:var(--card2); border-radius:10px; padding:10px 12px; font-size:13px; }
  .month-event-row .mev-icon { font-size:15px; flex-shrink:0; }
  .month-event-row .mev-text { flex:1; }
  .month-event-row .mev-time { font-family:'Space Mono',monospace; font-size:10px; color:var(--muted); }
  .month-event-row .mev-del { color:var(--muted); cursor:pointer; font-size:15px; transition:color 0.2s; padding:2px 4px; }
  .month-event-row .mev-del:hover { color:var(--red); }
  .month-add-form { display:flex; flex-direction:column; gap:10px; }
  .month-add-row { display:flex; gap:8px; }
  .month-add-row input,.month-add-row select { flex:1; background:var(--card2); border:1px solid rgba(255,255,255,0.1); color:var(--text); font-family:'Sora',sans-serif; font-size:13px; padding:9px 12px; border-radius:10px; outline:none; transition:border-color 0.2s; }
  .month-add-row input:focus,.month-add-row select:focus { border-color:rgba(124,58,237,0.5); }
  .month-add-row select option { background:#1a1a26; }
  .month-save-btn { background:var(--accent); color:white; font-weight:700; font-size:13px; padding:10px; border-radius:10px; border:none; cursor:pointer; transition:background 0.2s; }
  .month-save-btn:hover { background:#6d28d9; }
  .month-close-btn { margin-top:10px; width:100%; padding:9px; background:transparent; border:1px solid rgba(255,255,255,0.1); color:var(--muted); border-radius:10px; cursor:pointer; font-size:13px; transition:all 0.2s; }
  .month-close-btn:hover { border-color:rgba(255,255,255,0.25); color:var(--text); }

  /* STREAK */
  .streak-widget {
    display:flex; align-items:center; gap:16px;
    background:linear-gradient(135deg,rgba(245,158,11,0.1),rgba(239,68,68,0.07));
    border:1px solid rgba(245,158,11,0.25); border-radius:16px; padding:20px 24px; margin-bottom:40px;
  }
  .streak-fire { font-size:42px; line-height:1; flex-shrink:0; filter:drop-shadow(0 0 8px rgba(245,158,11,0.5)); }
  .streak-info { flex:1; }
  .streak-number { font-family:'Space Mono',monospace; font-size:36px; font-weight:700; color:#fcd34d; line-height:1; animation:softGlow 3s ease-in-out infinite; text-shadow:0 0 20px rgba(252,211,77,0.4); }
  .streak-label { font-size:12px; color:var(--muted); margin-top:4px; }
  #streak-label-txt:hover { color:#38d9f5; }
  #streak-label-edit-wrap { display:flex; align-items:center; gap:6px; margin-top:4px; }
  #streak-label-input { background:rgba(255,255,255,0.06); border:1px solid rgba(0,180,216,0.4); border-radius:8px; padding:5px 10px; color:#fff; font-family:'Plus Jakarta Sans','Sora',sans-serif; font-size:12px; outline:none; flex:1; }
  #streak-label-save { background:rgba(0,180,216,0.2); border:1px solid rgba(0,180,216,0.4); border-radius:8px; padding:5px 10px; color:#38d9f5; font-size:11px; cursor:pointer; font-family:'Space Mono',monospace; transition:background 0.2s; }
  #streak-label-save:hover { background:rgba(0,180,216,0.35); }
  .streak-best { font-family:'Space Mono',monospace; font-size:11px; color:rgba(245,158,11,0.6); margin-top:6px; }
  .streak-days { display:flex; gap:5px; margin-top:12px; flex-wrap:wrap; }
  .streak-day-dot { width:28px; height:28px; border-radius:8px; border:1px solid rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; font-family:'Space Mono',monospace; font-size:9px; color:var(--muted); flex-direction:column; gap:1px; cursor:pointer; transition:all 0.15s; }
  .streak-day-dot:hover { border-color:rgba(245,158,11,0.4); }
  .streak-day-dot.done { background:rgba(245,158,11,0.18); border-color:rgba(245,158,11,0.4); color:#fcd34d; }
  .streak-day-dot.today-dot { border-color:rgba(124,58,237,0.5); color:var(--accent2); }
  .streak-day-dot.today-dot.done { border-color:#fcd34d; }
  .streak-actions { display:flex; flex-direction:column; gap:8px; flex-shrink:0; }
  .streak-btn { background:rgba(245,158,11,0.12); border:1px solid rgba(245,158,11,0.3); color:#fcd34d; font-family:'Space Mono',monospace; font-size:9px; letter-spacing:1px; padding:8px 14px; border-radius:10px; cursor:pointer; transition:all 0.2s; white-space:nowrap; }
  .streak-btn:hover { background:rgba(245,158,11,0.22); }
  .streak-btn.done-today { background:rgba(16,185,129,0.15); border-color:rgba(16,185,129,0.4); color:#6ee7b7; }

  /* VICTORIES */
  .victories-section { background:linear-gradient(160deg,rgba(15,15,26,1),rgba(18,18,32,1)); border:1px solid rgba(167,139,250,0.2); border-top:2px solid rgba(167,139,250,0.4); border-radius:18px; padding:24px 28px; margin-bottom:40px; box-shadow:0 4px 32px rgba(0,0,0,0.3); }
  .victories-week-nav { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
  .victories-week-label { font-family:'Space Mono',monospace; font-size:11px; color:var(--muted); flex:1; text-align:center; letter-spacing:1px; }
  .vic-nav-btn { background:none; border:1px solid rgba(255,255,255,0.1); color:var(--muted); width:28px; height:28px; border-radius:8px; cursor:pointer; transition:all 0.15s; font-size:14px; display:flex; align-items:center; justify-content:center; }
  .vic-nav-btn:hover { border-color:var(--accent2); color:var(--accent2); }
  .victories-list { display:flex; flex-direction:column; gap:10px; }
  .victory-input-row { display:flex; align-items:center; gap:10px; }
  .victory-num { font-family:'Space Mono',monospace; font-size:18px; font-weight:700; color:rgba(167,139,250,0.3); flex-shrink:0; width:24px; text-align:center; }
  .victory-input { flex:1; background:var(--card2); border:1px solid rgba(255,255,255,0.07); color:var(--text); font-family:'Sora',sans-serif; font-size:14px; padding:10px 14px; border-radius:10px; outline:none; transition:border-color 0.2s; }
  .victory-input:focus { border-color:rgba(167,139,250,0.4); }
  .victory-input::placeholder { color:rgba(255,255,255,0.2); }
  .victories-save-btn { width:100%; margin-top:14px; background:rgba(167,139,250,0.12); border:1px solid rgba(167,139,250,0.3); color:var(--accent2); font-weight:700; font-size:12px; font-family:'Space Mono',monospace; letter-spacing:1px; padding:10px; border-radius:10px; cursor:pointer; transition:all 0.2s; }
  .victories-save-btn:hover { background:rgba(167,139,250,0.22); }
  .victories-saved-msg { font-size:11px; color:var(--green); text-align:center; margin-top:8px; display:none; font-family:'Space Mono',monospace; }

  /* NEXT UP */
  .next-up-bar { background:linear-gradient(135deg,rgba(0,180,216,0.1),rgba(124,58,237,0.08)); border:1px solid rgba(0,180,216,0.3); border-radius:14px; padding:16px 20px; margin-bottom:20px; display:flex; align-items:center; gap:14px; box-shadow: 0 4px 20px rgba(0,180,216,0.08); }
  .next-up-icon { font-size:22px; flex-shrink:0; }
  .next-up-info { flex:1; }
  .next-up-label { font-size:10px; font-family:'Space Mono',monospace; letter-spacing:1px; color:var(--muted); margin-bottom:3px; }
  .next-up-text { font-size:14px; font-weight:600; color:var(--text); }
  .next-up-when { font-size:11px; color:#38d9f5; margin-top:2px; }
  .next-up-countdown { font-family:'Space Mono',monospace; font-size:22px; font-weight:700; color:#38d9f5; flex-shrink:0; text-shadow: 0 0 20px rgba(0,180,216,0.5); }

  /* ARA indicator */
  .block-ara { outline:2px solid rgba(16,185,129,0.6); background-color:rgba(16,185,129,0.08) !important; position:relative; }
  .block-ara::before { content:'⚡ ARA'; position:absolute; top:6px; right:8px; font-family:'Space Mono',monospace; font-size:9px; font-weight:700; color:#6ee7b7; letter-spacing:1px; background:rgba(16,185,129,0.2); padding:2px 6px; border-radius:8px; }
  .day-card.today-card { border-color:rgba(124,58,237,0.5); box-shadow:0 0 0 1px rgba(124,58,237,0.2); }
  .day-card.work-day { border-color:rgba(245,158,11,0.4); }
  .day-card.work-day .day-header { background:linear-gradient(135deg,rgba(245,158,11,0.08),transparent); }
  .day-card.work-day .day-name { color:#fcd34d; }
  .day-card.work-day .day-name::after { content:' 📄'; font-size:11px; }
  .day-card.exam-day {
    border-color:rgba(239,68,68,0.55) !important;
    box-shadow: 0 0 0 1px rgba(239,68,68,0.2), 0 4px 24px rgba(239,68,68,0.15);
    animation: fadeUp 0.5s forwards, examCardPulse 3s 1s ease-in-out infinite;
  }
  .day-card.exam-day .day-header {
    background:linear-gradient(135deg,rgba(239,68,68,0.14),rgba(239,68,68,0.03));
    border-bottom-color:rgba(239,68,68,0.2);
  }
  .day-card.exam-day .day-name { color:#fca5a5; }
  .day-card.exam-day .day-name::after { content:' 📝'; font-size:11px; }
  @keyframes examCardPulse {
    0%,100% { box-shadow: 0 0 0 1px rgba(239,68,68,0.2), 0 4px 24px rgba(239,68,68,0.1); }
    50%      { box-shadow: 0 0 0 1px rgba(239,68,68,0.4), 0 4px 32px rgba(239,68,68,0.28); }
  }
  .day-card.today-card .day-header { background:linear-gradient(135deg,rgba(124,58,237,0.12),transparent); }
  .avui-btn { background:rgba(16,185,129,0.12); border:1px solid rgba(16,185,129,0.3); color:#6ee7b7; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1px; padding:5px 12px; border-radius:20px; cursor:pointer; transition:all 0.2s; flex-shrink:0; }
  .avui-btn:hover { background:rgba(16,185,129,0.22); }

  /* ═══ JULIANS AI SECTION ═══ */
  #ai-section { margin-bottom:50px; }
  #ai-section-card { background:var(--card); border:1px solid rgba(124,58,237,0.28); border-radius:20px; overflow:hidden; }
  #ai-layout { display:flex; height:540px; }
  #ai-sidebar { width:200px; flex-shrink:0; background:rgba(0,0,0,0.25); border-right:1px solid rgba(124,58,237,0.15); display:flex; flex-direction:column; overflow:hidden; }
  #ai-sidebar-header { padding:14px 14px 10px; border-bottom:1px solid rgba(255,255,255,0.05); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
  .ai-sidebar-title { font-size:13px; font-weight:700; color:var(--accent2); font-family:'Space Mono',monospace; }
  .ai-new-chat-btn { background:rgba(124,58,237,0.15); border:1px solid rgba(124,58,237,0.3); color:var(--accent2); width:26px; height:26px; border-radius:7px; cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
  .ai-new-chat-btn:hover { background:rgba(124,58,237,0.3); }
  #ai-chat-list { flex:1; overflow-y:auto; padding:8px 6px; display:flex; flex-direction:column; gap:3px; }
  #ai-chat-list::-webkit-scrollbar { width:3px; }
  #ai-chat-list::-webkit-scrollbar-thumb { background:rgba(124,58,237,0.2); border-radius:3px; }
  .ai-chat-item { padding:9px 10px; border-radius:9px; cursor:pointer; font-size:12px; color:var(--muted); transition:all 0.15s; display:flex; align-items:center; gap:6px; position:relative; overflow:hidden; }
  .ai-chat-item:hover { background:rgba(124,58,237,0.1); color:var(--text); }
  .ai-chat-item.active { background:linear-gradient(135deg,rgba(0,180,216,0.14),rgba(124,58,237,0.12)); color:#38d9f5; border-left:2px solid rgba(0,180,216,0.5); }
  .ai-chat-item-icon { font-size:11px; flex-shrink:0; }
  .ai-chat-item-title { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px; }
  .ai-chat-item-del { opacity:0; font-size:13px; color:var(--muted); transition:opacity 0.15s; flex-shrink:0; background:none; border:none; cursor:pointer; padding:0 2px; }
  .ai-chat-item:hover .ai-chat-item-del { opacity:1; }
  .ai-chat-item-del:hover { color:#fca5a5; }
  #ai-main { flex:1; display:flex; flex-direction:column; min-width:0; }
  #ai-main-header { padding:14px 18px; background:linear-gradient(135deg,rgba(124,58,237,0.1),rgba(59,130,246,0.06)); border-bottom:1px solid rgba(124,58,237,0.12); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
  .ai-main-left { display:flex; align-items:center; gap:10px; }
  .ai-avatar-sm { width:36px; height:36px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,var(--accent),#3b82f6); display:flex; align-items:center; justify-content:center; font-size:15px; box-shadow:0 0 10px rgba(124,58,237,0.35); overflow:hidden; }
  .ai-chat-title-display { font-size:14px; font-weight:700; color:var(--text); }
  .ai-subtitle-sm { font-size:10px; color:var(--muted); font-family:'Space Mono',monospace; margin-top:1px; }
  .ai-clear-btn { background:none; border:1px solid rgba(255,255,255,0.07); border-radius:8px; color:var(--muted); font-size:13px; width:30px; height:30px; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; justify-content:center; }
  .ai-clear-btn:hover { border-color:rgba(239,68,68,0.3); color:#fca5a5; }
  .ai-chat-messages { flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:10px; }
  .ai-chat-messages::-webkit-scrollbar { width:4px; }
  .ai-chat-messages::-webkit-scrollbar-thumb { background:rgba(124,58,237,0.15); border-radius:4px; }
  .ai-msg { max-width:84%; line-height:1.6; font-size:13.5px; border-radius:16px; padding:11px 15px; word-break:break-word; }
  .ai-msg.user { background:linear-gradient(135deg,rgba(0,180,216,0.2),rgba(124,58,237,0.18)); color:var(--text); align-self:flex-end; border-bottom-right-radius:4px; border:1px solid rgba(0,180,216,0.2); }
  .ai-msg.assistant { background:linear-gradient(135deg, var(--card2), rgba(18,18,30,0.95)); color:var(--text); align-self:flex-start; border-bottom-left-radius:4px; border:1px solid rgba(255,255,255,0.08); box-shadow: 0 2px 12px rgba(0,0,0,0.2); }
  .ai-msg.thinking { background:var(--card2); color:var(--muted); align-self:flex-start; border-bottom-left-radius:4px; }
  .ai-msg-empty { text-align:center; color:var(--muted); font-size:13px; padding:40px 20px; align-self:center; }
  .ai-typing { display:flex; gap:5px; align-items:center; padding:2px 0; }
  .ai-typing span { width:7px; height:7px; border-radius:50%; background:var(--accent2); animation:typing-dot 1.2s infinite; }
  .ai-typing span:nth-child(2){animation-delay:0.2s}.ai-typing span:nth-child(3){animation-delay:0.4s}
  @keyframes typing-dot { 0%,80%,100%{opacity:0.3;transform:scale(0.8)} 40%{opacity:1;transform:scale(1)} }
  .ai-chip-row { display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 10px; flex-shrink:0; transition:opacity 0.3s, max-height 0.4s, padding 0.3s; overflow:hidden; }
  .ai-suggestion { background:rgba(124,58,237,0.08); border:1px solid rgba(124,58,237,0.25); color:var(--accent2); font-size:11px; padding:6px 13px; border-radius:20px; cursor:pointer; transition:all 0.18s; white-space:nowrap; font-weight:500; }
  .ai-suggestion:hover { background:rgba(124,58,237,0.22); border-color:rgba(124,58,237,0.5); transform:translateY(-1px); box-shadow:0 4px 14px rgba(124,58,237,0.2); }

  /* AI MODE SELECTOR */
  .ai-mode-row { display:flex; gap:6px; padding:8px 16px 4px; flex-shrink:0; border-top:1px solid rgba(255,255,255,0.04); background:rgba(0,0,0,0.08); }
  .ai-mode-btn { padding:5px 12px; border-radius:20px; font-size:11px; font-weight:600; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:var(--muted); cursor:pointer; transition:all 0.2s; font-family:'Sora',sans-serif; }
  .ai-mode-btn.active { background:linear-gradient(135deg,rgba(0,180,216,0.18),rgba(124,58,237,0.18)); border-color:rgba(0,180,216,0.5); color:#38d9f5; box-shadow: 0 0 12px rgba(0,180,216,0.2); }
  .ai-mode-btn:hover { border-color:rgba(124,58,237,0.3); color:var(--text); }
  .ai-mode-label { display:flex; align-items:center; gap:6px; padding:0 16px 2px; font-size:9px; color:var(--muted); font-family:'Space Mono',monospace; letter-spacing:1px; flex-shrink:0; }

  .ai-chat-input-row { display:flex; gap:10px; padding:12px 16px; border-top:1px solid rgba(255,255,255,0.04); background:rgba(0,0,0,0.12); flex-shrink:0; }
  #ai-chat-input { flex:1; background:var(--card2); border:1px solid rgba(255,255,255,0.1); color:var(--text); font-family:'Sora',sans-serif; font-size:13px; padding:9px 13px; border-radius:12px; outline:none; transition:border-color 0.2s; }
  #ai-chat-input:focus { border-color:rgba(124,58,237,0.45); }
  #ai-chat-input::placeholder { color:rgba(255,255,255,0.18); }
  #ai-chat-send { width:38px; height:38px; border-radius:12px; border:none; background:linear-gradient(135deg,var(--accent),#3b82f6); color:white; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:opacity 0.2s; flex-shrink:0; }
  #ai-chat-send:hover { opacity:0.85; }
  #ai-chat-send:disabled { opacity:0.3; cursor:not-allowed; }

  /* AI FAB */
  #ai-fab { position:fixed; bottom:30px; left:30px; width:50px; height:50px; border-radius:50%; background:linear-gradient(135deg,var(--accent),#3b82f6); border:none; color:white; font-size:20px; cursor:pointer; display:none; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(124,58,237,0.5); transition:transform 0.2s; z-index:1100; animation:ai-pulse 3s infinite; overflow:hidden; }
  @keyframes ai-pulse { 0%,100%{box-shadow:0 4px 20px rgba(124,58,237,0.5)} 50%{box-shadow:0 4px 30px rgba(124,58,237,0.8),0 0 0 7px rgba(124,58,237,0.08)} }
  #ai-fab { z-index:1600 !important; }
  #ai-fab:hover { transform:scale(1.08); }

  /* AI MULTI-SELECT */
  .ai-select-toolbar { display:none; align-items:center; justify-content:space-between; padding:8px 12px; background:rgba(239,68,68,0.1); border-bottom:1px solid rgba(239,68,68,0.2); flex-shrink:0; }
  .ai-sel-count { font-size:12px; color:#fca5a5; font-weight:600; }
  .ai-sel-actions { display:flex; gap:6px; }
  .ai-sel-btn { padding:5px 10px; border-radius:7px; font-size:11px; cursor:pointer; border:1px solid; transition:all 0.15s; }
  .ai-sel-del { background:rgba(239,68,68,0.15); border-color:rgba(239,68,68,0.3); color:#fca5a5; }
  .ai-sel-del:hover { background:rgba(239,68,68,0.3); }
  .ai-sel-cancel { background:transparent; border-color:rgba(255,255,255,0.1); color:var(--muted); }
  .ai-sel-cancel:hover { color:var(--text); }
  .ai-chat-item.selecting { cursor:default; }
  .ai-chat-item .ai-sel-check { display:none; width:15px; height:15px; border-radius:4px; border:2px solid rgba(255,255,255,0.2); flex-shrink:0; transition:all 0.15s; }
  .ai-chat-item.selecting .ai-sel-check { display:flex; align-items:center; justify-content:center; }
  .ai-chat-item.selected .ai-sel-check { background:var(--accent); border-color:var(--accent); color:#fff; font-size:10px; }
  .ai-chat-item.selected { background:rgba(124,58,237,0.15); }


  /* CONFIG PANEL */
  #config-btn { position:fixed; bottom:100px; right:30px; width:48px; height:48px; border-radius:50%; background:var(--card2); border:1px solid var(--border); color:var(--muted); font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(0,0,0,0.4); transition:all 0.2s; z-index:1100; }
  #config-btn:hover { border-color:var(--accent); color:var(--accent2); transform:rotate(30deg); }
  #config-btn { z-index:1600 !important; }
  #config-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:3000; display:none; backdrop-filter:blur(4px); }
  #config-overlay.open { display:flex; }
  #config-panel { background:var(--card); border-left:1px solid var(--border); width:420px; max-width:95vw; height:100%; margin-left:auto; display:flex; flex-direction:column; animation:slideIn 0.3s ease; overflow:hidden; }
  @keyframes slideIn { from{transform:translateX(100%)} to{transform:translateX(0)} }
  .config-header { padding:22px 24px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
  .config-header h2 { font-size:17px; font-weight:700; color:var(--accent2); }
  .config-close { background:none; border:none; color:var(--muted); font-size:24px; cursor:pointer; transition:color 0.2s; padding:0; }
  .config-close:hover { color:var(--text); }
  .config-tabs { display:flex; border-bottom:1px solid var(--border); flex-shrink:0; }
  .config-tab { flex:1; padding:11px 8px; text-align:center; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; transition:all 0.2s; background:none; border-top:none; border-left:none; border-right:none; }
  .config-tab.active { color:var(--accent2); border-bottom-color:var(--accent2); }
  .config-body { flex:1; overflow-y:auto; padding:20px; }
  .day-selector { display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap; }
  .day-sel-btn { padding:5px 11px; border-radius:20px; font-size:11px; font-weight:600; cursor:pointer; border:1px solid rgba(255,255,255,0.1); background:var(--card2); color:var(--muted); transition:all 0.2s; }
  .day-sel-btn.active { background:rgba(124,58,237,0.2); border-color:var(--accent); color:var(--accent2); }
  .cfg-block-list { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
  .cfg-block-row { display:flex; align-items:center; gap:8px; background:var(--card2); border-radius:10px; padding:9px 11px; border-left:3px solid var(--accent); }
  .cfg-block-info { flex:1; min-width:0; }
  .cfg-block-time { font-family:'Space Mono',monospace; font-size:10px; color:var(--muted); }
  .cfg-block-label { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cfg-block-actions { display:flex; gap:4px; flex-shrink:0; }
  .cfg-btn { width:28px; height:28px; border-radius:6px; border:none; cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
  .cfg-btn-edit { background:rgba(124,58,237,0.15); color:var(--accent2); }
  .cfg-btn-edit:hover { background:rgba(124,58,237,0.3); }
  .cfg-btn-del { background:rgba(239,68,68,0.12); color:#fca5a5; }
  .cfg-btn-del:hover { background:rgba(239,68,68,0.25); }
  .cfg-btn-up,.cfg-btn-dn { background:rgba(255,255,255,0.06); color:var(--muted); }
  .cfg-btn-up:hover,.cfg-btn-dn:hover { background:rgba(255,255,255,0.12); color:var(--text); }
  .cfg-add-btn { width:100%; padding:10px; background:rgba(124,58,237,0.1); border:1px dashed rgba(124,58,237,0.35); color:rgba(124,58,237,0.7); border-radius:10px; cursor:pointer; font-size:12px; font-weight:600; transition:all 0.2s; }
  .cfg-add-btn:hover { background:rgba(124,58,237,0.2); color:var(--accent2); }
  .cfg-form { background:rgba(124,58,237,0.07); border:1px solid rgba(124,58,237,0.2); border-radius:12px; padding:16px; margin-top:12px; }
  .cfg-form h4 { font-size:13px; font-weight:700; color:var(--accent2); margin-bottom:12px; }
  .cfg-form-row { margin-bottom:10px; }
  .cfg-form-row label { display:block; font-size:10px; font-family:'Space Mono',monospace; letter-spacing:1px; color:var(--muted); margin-bottom:5px; }
  .cfg-form-row input,.cfg-form-row select,.cfg-form-row textarea { width:100%; background:var(--card); border:1px solid rgba(255,255,255,0.1); color:var(--text); font-family:'Sora',sans-serif; font-size:13px; padding:9px 12px; border-radius:8px; outline:none; transition:border-color 0.2s; box-sizing:border-box; }
  .cfg-form-row input:focus,.cfg-form-row select:focus,.cfg-form-row textarea:focus { border-color:rgba(124,58,237,0.5); }
  .cfg-form-row textarea { resize:vertical; min-height:56px; }
  .cfg-form-row select option { background:#1a1a26; }
  .cfg-form-btns { display:flex; gap:8px; margin-top:12px; }
  .cfg-save-btn { flex:1; background:var(--accent); color:white; font-weight:700; font-size:12px; padding:9px; border-radius:8px; border:none; cursor:pointer; }
  .cfg-cancel-btn { padding:9px 14px; background:transparent; border:1px solid rgba(255,255,255,0.1); color:var(--muted); border-radius:8px; cursor:pointer; font-size:12px; }
  .profile-field { margin-bottom:14px; }
  .profile-field label { display:block; font-size:10px; font-family:'Space Mono',monospace; letter-spacing:1px; color:var(--muted); margin-bottom:6px; }
  .profile-field input,.profile-field textarea { width:100%; background:var(--card2); border:1px solid rgba(255,255,255,0.1); color:var(--text); font-family:'Sora',sans-serif; font-size:14px; padding:10px 14px; border-radius:10px; outline:none; box-sizing:border-box; }
  .profile-field input:focus,.profile-field textarea:focus { border-color:rgba(124,58,237,0.5); }
  .profile-field textarea { resize:vertical; min-height:60px; font-size:13px; }
  .profile-save { width:100%; background:var(--accent); color:white; font-weight:700; font-size:14px; padding:12px; border-radius:10px; border:none; cursor:pointer; margin-top:4px; }
  .reset-btn { width:100%; margin-top:10px; padding:11px; background:transparent; border:1px solid rgba(239,68,68,0.3); color:#fca5a5; border-radius:10px; cursor:pointer; font-size:13px; transition:all 0.2s; }
  .reset-btn:hover { background:rgba(239,68,68,0.1); }

  /* THEMES */
  body.theme-blanc  { --bg:#f0f2f8;--card:#ffffff;--card2:#eef0f7;--accent:#6d28d9;--accent2:#7c3aed;--text:#1a1a2e;--muted:#64748b;--border:rgba(109,40,217,0.15);--green:#059669;--orange:#d97706;--red:#dc2626;--blue:#2563eb;--pink:#db2777;--yellow:#ca8a04;--teal:#0d9488; }
  body.theme-ocean  { --bg:#03111f;--card:#061728;--card2:#091f36;--accent:#0ea5e9;--accent2:#38bdf8;--text:#e0f2fe;--muted:#64748b;--border:rgba(14,165,233,0.2); }
  body.theme-forest { --bg:#040e07;--card:#0a1c0e;--card2:#112614;--accent:#16a34a;--accent2:#4ade80;--text:#dcfce7;--muted:#6b7280;--border:rgba(22,163,74,0.2); }
  body.theme-sunset { --bg:#130408;--card:#1e0a10;--card2:#28101a;--accent:#e11d48;--accent2:#fb7185;--text:#ffe4e6;--muted:#9ca3af;--border:rgba(225,29,72,0.2); }
  body.theme-midnight { --bg:#05050f;--card:#0c0c1e;--card2:#10102a;--accent:#4f46e5;--accent2:#818cf8;--text:#e0e7ff;--muted:#6b7280;--border:rgba(79,70,229,0.2); }
  body.theme-caramel { --bg:#0e0a02;--card:#1a1406;--card2:#241d0a;--accent:#d97706;--accent2:#fbbf24;--text:#fef3c7;--muted:#78716c;--border:rgba(217,119,6,0.2); }
  body.theme-violet { --bg:#080413;--card:#100820;--card2:#160c2e;--accent:#9333ea;--accent2:#c084fc;--text:#f3e8ff;--muted:#7c6fa0;--border:rgba(147,51,234,0.2); }
  body.theme-rose   { --bg:#0f0508;--card:#1c0b10;--card2:#241017;--accent:#be185d;--accent2:#f472b6;--text:#fce7f3;--muted:#9ca3af;--border:rgba(190,24,93,0.2); }

  /* HAMBURGER */
  #nav-hamburger { position:fixed;top:18px;right:18px;z-index:2000;width:42px;height:42px;border-radius:11px;background:var(--card);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:all .2s;box-shadow:0 4px 20px rgba(0,0,0,.4); }
  #nav-clock { position:fixed;top:18px;right:70px;z-index:2000;height:42px;padding:0 13px;border-radius:11px;background:var(--card);border:1px solid rgba(0,180,216,0.25);display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-size:13px;letter-spacing:1.5px;color:#38d9f5;box-shadow:0 4px 20px rgba(0,0,0,.4),0 0 12px rgba(0,180,216,0.1);pointer-events:auto;user-select:none;cursor:pointer;transition:background 0.2s,box-shadow 0.2s,opacity 0.2s; }
  #nav-clock:hover { background:rgba(0,180,216,0.1); box-shadow:0 4px 24px rgba(0,180,216,0.25); }
  #nav-hamburger:hover{background:var(--card2);border-color:var(--accent2);}
  #nav-hamburger span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;transition:all .3s;}
  #nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  #nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
  #nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* NAV OVERLAY + DRAWER */
  #nav-overlay{position:fixed;inset:0;z-index:1900;background:rgba(0,0,0,.65);backdrop-filter:blur(5px);opacity:0;pointer-events:none;transition:opacity .3s;}
  #nav-overlay.open{opacity:1;pointer-events:all;}
  #nav-drawer{position:fixed;top:0;right:-360px;bottom:0;width:300px;max-width:88vw;z-index:1950;background:var(--card);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;transition:right .32s cubic-bezier(.25,.46,.45,.94);}
  #nav-drawer.open{right:0;}
  #nav-drawer::-webkit-scrollbar{width:3px;}
  #nav-drawer::-webkit-scrollbar-thumb{background:rgba(124,58,237,.2);border-radius:3px;}
  .ndw-header{padding:24px 20px 16px;background:linear-gradient(135deg,rgba(0,180,216,.1),rgba(124,58,237,.08));border-bottom:1px solid rgba(0,180,216,0.15);display:flex;flex-direction:column;gap:4px;flex-shrink:0;}
  .ndw-logo{font-size:26px;} .ndw-title{font-size:15px;font-weight:800;letter-spacing:-0.3px;background:linear-gradient(135deg,#fff,#38d9f5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .ndw-sub{font-size:9px;color:var(--muted);font-family:'Space Mono',monospace;margin-top:2px;letter-spacing:1px;opacity:0.6;}
  .ndw-section{padding:14px 20px 6px;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:2.5px;color:var(--muted);text-transform:uppercase;}
  .ndw-item{display:flex;align-items:center;gap:12px;padding:11px 20px;cursor:pointer;transition:all .15s;border-left:3px solid transparent;}
  .ndw-item:hover{background:rgba(255,255,255,.04);}
  .ndw-item.active{background:rgba(124,58,237,.1);border-left-color:var(--accent2);}
  .ndw-item-icon{font-size:17px;width:22px;text-align:center;flex-shrink:0;}
  .ndw-item-text{font-size:13px;font-weight:600;color:var(--text);}
  .ndw-item-sub{font-size:10px;color:var(--muted);margin-top:1px;}
  .ndw-item.active .ndw-item-text{color:var(--accent2);}
  .ndw-view-row{display:flex;gap:0;border:1px solid var(--border);border-radius:9px;overflow:hidden;margin:6px 20px 14px;}
  .ndw-view-btn{flex:1;padding:9px 6px;font-size:11px;font-weight:600;background:transparent;border:none;color:var(--muted);cursor:pointer;transition:all .15s;text-align:center;}
  .ndw-view-btn.active{background:var(--accent);color:#fff;}
  .ndw-themes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:4px 20px 16px;}
  .ndw-swatch{aspect-ratio:1;border-radius:9px;cursor:pointer;border:2px solid transparent;transition:all .15s;position:relative;}
  .ndw-swatch:hover{transform:scale(1.1);}
  .ndw-swatch.active{border-color:#fff;box-shadow:0 0 0 2px var(--accent);}
  .ndw-swatch-lbl{font-size:9px;color:var(--muted);text-align:center;margin-top:3px;font-family:'Space Mono',monospace;}
  .ndw-bottom{margin-top:auto;border-top:1px solid var(--border);padding:14px 20px;display:flex;gap:10px;}
  .ndw-bottom-btn{flex:1;padding:9px;text-align:center;background:var(--card2);border:1px solid var(--border);border-radius:9px;cursor:pointer;font-size:12px;color:var(--muted);transition:all .15s;}
  .ndw-bottom-btn:hover{color:var(--accent2);border-color:var(--accent2);}
  .lang-btn.active { background:rgba(124,58,237,0.35) !important; color:var(--accent2) !important; border-color:rgba(124,58,237,0.7) !important; font-weight:900 !important; box-shadow:0 0 10px rgba(124,58,237,0.3); }

  /* PAGE SYSTEM */
  .app-page{transition:opacity .15s;}
  body.view-pages .app-page{display:none!important;}
  body.view-pages .app-page.page-active{display:block!important;}
  body.view-pages{padding-bottom:72px;}
  .page-label{display:none;padding:18px 0 12px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--accent2);border-bottom:1px solid var(--border);margin-bottom:24px;}
  body.view-pages .page-active .page-label{display:flex;align-items:center;gap:8px;}

  /* BOTTOM NAV */
  #bnav{display:flex;justify-content:space-around;position:fixed;bottom:0;left:0;right:0;z-index:1500;background:rgba(10,10,20,.92);backdrop-filter:blur(16px) saturate(1.4);border-top:1px solid var(--border);padding:6px 0 max(8px,env(safe-area-inset-bottom));}
  body.view-pages #bnav{display:flex;justify-content:space-around;}
  .bnav-item{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:4px 10px;border-radius:10px;transition:all .15s;min-width:48px;}
  .bnav-item:hover{background:rgba(124,58,237,.1);}
  .bnav-icon{font-size:19px;opacity:.45;transition:all .2s;}
  .bnav-lbl{font-size:9px;color:var(--muted);font-family:'Space Mono',monospace;letter-spacing:.5px;}
  .bnav-item.active .bnav-icon{opacity:1;filter:drop-shadow(0 0 6px var(--accent2));}
  .bnav-item.active .bnav-lbl{color:var(--accent2);}

  /* ── FABs: push above bottom nav in pages mode ── */
  body.view-pages #add-note-fab { bottom:88px; }
  body.view-pages #ai-fab       { bottom:88px; }
  body.view-pages #config-btn   { bottom:158px; }
  body.view-pages #note-picker  { bottom:154px; }

  @media (max-width:600px) {
    .goal-banner{flex-direction:column;text-align:center;}
    .stats-grid{grid-template-columns:repeat(2,1fr);}
    #add-note-fab{bottom:20px;right:20px;}
    #ai-fab{bottom:20px;left:14px;}
    #config-btn{bottom:90px;right:16px;}
    .cal-cell{min-height:52px;}
    .cal-event-dot{display:none;}
    #config-panel{width:100vw;}
    #ai-layout{flex-direction:column;height:auto;}
    #ai-sidebar{width:100%;height:120px;border-right:none;border-bottom:1px solid rgba(124,58,237,0.15);}
    #ai-chat-list{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;padding:6px 8px;gap:6px;overflow-y:hidden;}
    .ai-chat-messages{height:280px;}
    body.view-pages #add-note-fab{bottom:82px;right:16px;}
    body.view-pages #ai-fab{bottom:82px;left:14px;}
    body.view-pages #config-btn{bottom:152px;right:16px;}
  }

  /* ── TODAY PANEL ──────────────────────────────────── */
  .today-panel {
    background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(59,130,246,0.08));
    border: 1px solid rgba(124,58,237,0.3); border-radius: 20px;
    padding: 24px 28px; margin-bottom: 32px; position: relative; overflow: hidden;
  }
  .today-panel::before {
    content:''; position:absolute; top:-60px; right:-60px; width:200px; height:200px;
    background: radial-gradient(circle, rgba(124,58,237,0.12), transparent 70%);
    pointer-events:none;
  }
  .today-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 16px; }
  @media(max-width:600px){ .today-grid { grid-template-columns: 1fr 1fr; } }
  .today-card {
    background: rgba(0,0,0,0.2); border-radius: 14px; padding: 16px;
    border: 1px solid rgba(255,255,255,0.06); text-align: center;
  }
  .today-card .tc-icon { font-size: 26px; margin-bottom: 8px; }
  .today-card .tc-val { font-family:'Space Mono',monospace; font-size: 22px; font-weight: 700; margin-bottom: 4px; }
  .today-card .tc-lbl { font-size: 11px; color: var(--muted); }
  .today-now {
    background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25);
    border-radius: 12px; padding: 12px 16px; margin-top: 14px;
    display: flex; align-items: center; gap: 10px; font-size: 13px;
  }
  .today-now-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse-dot 1.5s infinite; flex-shrink: 0; }
  .daily-quote {
    background: var(--card); border-left: 3px solid var(--accent2);
    border-radius: 0 14px 14px 0; padding: 16px 20px; margin-bottom: 32px;
    position: relative; cursor: pointer; transition: border-color 0.3s;
  }
  .daily-quote:hover { border-left-color: var(--green); }
  .daily-quote .dq-text { font-size: 14px; font-style: italic; color: var(--text); line-height: 1.7; margin-bottom: 6px; }
  .daily-quote .dq-author { font-family:'Space Mono',monospace; font-size: 10px; color: var(--muted); letter-spacing: 1px; }
  .daily-quote .dq-refresh { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--muted); font-size: 16px; cursor: pointer; transition: transform 0.3s; }
  .daily-quote .dq-refresh:hover { transform: rotate(180deg); color: var(--accent2); }

  /* ── POMODORO TIMER ──────────────────────────────── */
  .pomodoro-section {
    background: var(--card); border: 1px solid rgba(239,68,68,0.2);
    border-radius: 20px; padding: 28px; margin-bottom: 32px;
  }
  .pomo-display { text-align: center; padding: 20px 0 10px; }
  .pomo-ring-wrap { position: relative; width: 180px; height: 180px; margin: 0 auto 16px; }
  .pomo-svg { width: 180px; height: 180px; transform: rotate(-90deg); }
  .pomo-bg  { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 10; }
  .pomo-arc { fill: none; stroke: var(--red); stroke-width: 10; stroke-linecap: round;
              stroke-dasharray: 502; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear, stroke 0.5s; }
  .pomo-arc.break-mode { stroke: var(--green); }
  .pomo-arc.long-break  { stroke: var(--blue); }
  .pomo-time {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
  }
  .pomo-digits { font-family:'Space Mono',monospace; font-size: 38px; font-weight: 700; color: var(--text); line-height:1; }
  .pomo-label  { font-family:'Space Mono',monospace; font-size: 10px; color: var(--muted); margin-top: 4px; letter-spacing: 2px; }
  .pomo-sessions { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
  .pomo-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.1); transition: background 0.3s; }
  .pomo-dot.done { background: var(--red); }
  .pomo-controls { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
  .pomo-btn {
    padding: 9px 20px; border-radius: 12px; font-family:'Space Mono',monospace;
    font-size: 11px; font-weight: 700; letter-spacing: 1px; cursor: pointer; transition: all 0.2s;
    border: 1px solid;
  }
  .pomo-btn.start  { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.4); color: #fca5a5; }
  .pomo-btn.start:hover  { background: rgba(239,68,68,0.28); }
  .pomo-btn.pause  { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.4); color: #fcd34d; }
  .pomo-btn.pause:hover  { background: rgba(245,158,11,0.28); }
  .pomo-btn.reset  { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: var(--muted); }
  .pomo-btn.reset:hover  { background: rgba(255,255,255,0.1); }
  .pomo-presets { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
  .pomo-preset-btn {
    padding: 4px 12px; border-radius: 20px; font-size: 11px; background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1); color: var(--muted); cursor: pointer; transition: all 0.15s;
  }
  .pomo-preset-btn.active  { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.3); color: #fca5a5; }
  .pomo-preset-btn:hover    { border-color: rgba(255,255,255,0.3); color: var(--text); }
  .pomo-stats-row { display: flex; justify-content: center; gap: 24px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.05); }
  .pomo-stat { text-align: center; }
  .pomo-stat-val { font-family:'Space Mono',monospace; font-size: 20px; font-weight: 700; color: var(--red); }
  .pomo-stat-lbl { font-size: 10px; color: var(--muted); margin-top: 2px; }

  /* ── MULTI-HABIT TRACKER ─────────────────────────── */
  .habits-section {
    background: var(--card); border: 1px solid rgba(16,185,129,0.2);
    border-radius: 20px; padding: 28px; margin-bottom: 32px;
  }
  .habits-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
  .add-habit-btn {
    background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.35);
    color: #6ee7b7; font-family:'Space Mono',monospace; font-size: 10px; letter-spacing: 1px;
    padding: 6px 14px; border-radius: 20px; cursor: pointer; transition: all 0.2s;
  }
  .add-habit-btn:hover { background: rgba(16,185,129,0.22); }
  .habit-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .habit-row:last-child { border-bottom: none; }
  .habit-icon-btn { font-size: 22px; flex-shrink: 0; cursor: default; }
  .habit-info { flex: 1; min-width: 0; }
  .habit-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .habit-streak-txt { font-family:'Space Mono',monospace; font-size: 10px; color: var(--muted); }
  .habit-dots { display: flex; gap: 4px; flex-wrap: wrap; }
  .habit-dot {
    width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-family:'Space Mono',monospace; color: var(--muted); flex-shrink: 0;
  }
  .habit-dot:hover { border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.08); }
  .habit-dot.done { background: rgba(16,185,129,0.2); border-color: rgba(16,185,129,0.5); color: #6ee7b7; }
  .habit-dot.today-h { border-color: rgba(124,58,237,0.5); }
  .habit-dot.today-h.done { border-color: #6ee7b7; box-shadow: 0 0 6px rgba(16,185,129,0.4); }
  .habit-del { color: rgba(255,255,255,0.2); cursor: pointer; font-size: 16px; flex-shrink: 0; transition: color 0.2s; }
  .habit-del:hover { color: var(--red); }
  .habit-add-form {
    display: none; background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.2);
    border-radius: 14px; padding: 16px; margin-top: 14px; gap: 10px; flex-wrap: wrap;
  }
  .habit-add-form.open { display: flex; }
  .habit-add-form input, .habit-add-form select {
    background: var(--card2); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text); font-family:'Sora',sans-serif; font-size: 13px;
    padding: 8px 12px; border-radius: 10px; outline: none; flex: 1; min-width: 120px;
  }
  .habit-add-form input:focus { border-color: rgba(16,185,129,0.4); }
  .habit-save-btn { background: var(--green); color: #0a0a0f; font-weight: 700; font-size: 12px; padding: 8px 16px; border-radius: 10px; border: none; cursor: pointer; }
  .habit-week-pct { font-family:'Space Mono',monospace; font-size: 11px; flex-shrink: 0; }

  /* ── PRIORITY BADGE ───────────────────────────────── */
  .prio-badge { display: inline-block; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 6px; margin-right: 4px; vertical-align: middle; font-family:'Space Mono',monospace; letter-spacing: 0.5px; }
  .prio-1 { background: rgba(239,68,68,0.2); color: #fca5a5; border: 1px solid rgba(239,68,68,0.35); }
  .prio-2 { background: rgba(245,158,11,0.2); color: #fcd34d; border: 1px solid rgba(245,158,11,0.35); }
  .prio-3 { background: rgba(59,130,246,0.2); color: #93c5fd; border: 1px solid rgba(59,130,246,0.35); }
  .prio-4 { background: rgba(255,255,255,0.06); color: var(--muted); border: 1px solid rgba(255,255,255,0.1); }
  
  /* ── QUICK CAPTURE ───────────────────────────────── */
  #quick-capture-btn {
    position: fixed; bottom: 170px; right: 30px; width: 48px; height: 48px;
    border-radius: 50%; background: linear-gradient(135deg, var(--green), var(--teal));
    border: none; color: white; font-size: 22px; cursor: pointer;
    box-shadow: 0 4px 16px rgba(16,185,129,0.4); z-index: 1600;
    display: flex; align-items: center; justify-content: center; transition: transform 0.2s;
  }
  #quick-capture-btn:hover { transform: scale(1.1); }
  body.view-pages #quick-capture-btn { bottom: 240px; }
  #quick-capture-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 3500;
    display: none; align-items: flex-end; justify-content: center;
    backdrop-filter: blur(4px); padding-bottom: 30px;
  }
  #quick-capture-overlay.open { display: flex; }
  #quick-capture-box {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 20px 20px 20px 20px; padding: 24px; width: 94%; max-width: 500px;
    animation: slideUp 0.3s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
  }
  @keyframes slideUp { from{transform:translateY(60px);opacity:0} to{transform:translateY(0);opacity:1} }
  #quick-capture-box h4 { font-size: 14px; font-weight: 700; color: var(--accent2); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
  #qc-input {
    width: 100%; background: var(--card2); border: 1px solid rgba(255,255,255,0.12);
    color: var(--text); font-family:'Sora',sans-serif; font-size: 16px;
    padding: 12px 16px; border-radius: 12px; outline: none; margin-bottom: 12px; box-sizing: border-box;
    transition: border-color 0.2s;
  }
  #qc-input:focus { border-color: rgba(16,185,129,0.5); }
  .qc-types { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
  .qc-type-btn {
    padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: var(--muted); cursor: pointer; transition: all 0.15s;
  }
  .qc-type-btn.active { background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.4); color: #6ee7b7; }
  .qc-row { display: flex; gap: 10px; }
  .qc-row input, .qc-row select {
    flex: 1; background: var(--card2); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text); font-family:'Sora',sans-serif; font-size: 13px;
    padding: 9px 12px; border-radius: 10px; outline: none;
  }
  .qc-row input:focus, .qc-row select:focus { border-color: rgba(16,185,129,0.4); }
  .qc-add-btn { background: var(--green); color: #0a0a0f; font-weight: 700; font-size: 13px; padding: 9px 20px; border-radius: 10px; border: none; cursor: pointer; white-space: nowrap; }
  .qc-close-btn { width: 100%; margin-top: 8px; padding: 9px; background: transparent; border: 1px solid rgba(255,255,255,0.08); color: var(--muted); border-radius: 10px; cursor: pointer; font-size: 12px; }




  /* ── SEARCH ─────────────────────────────────────── */
  #global-search-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 4000;
    background: rgba(10,10,15,0.96); backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(124,58,237,0.3);
    padding: 16px 20px; display: none; flex-direction: column; gap: 12px;
    animation: slideDown 0.2s ease;
  }
  @keyframes slideDown { from{transform:translateY(-100%);opacity:0} to{transform:translateY(0);opacity:1} }
  #global-search-bar.open { display: flex; }
  .search-input-wrap { display: flex; align-items: center; gap: 10px; }
  .search-input-wrap span { font-size: 18px; }
  #search-input {
    flex: 1; background: rgba(255,255,255,0.08); border: 1px solid rgba(124,58,237,0.4);
    color: var(--text); font-family:'Sora',sans-serif; font-size: 16px;
    padding: 10px 16px; border-radius: 12px; outline: none;
  }
  #search-close { background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; padding: 4px 8px; }
  #search-results { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
  .search-result {
    background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    padding: 12px 16px; cursor: pointer; transition: all 0.15s;
    display: flex; align-items: center; gap: 10px;
  }
  .search-result:hover { border-color: rgba(124,58,237,0.4); background: rgba(124,58,237,0.06); }
  .search-result-icon { font-size: 18px; flex-shrink: 0; }
  .search-result-text { flex: 1; font-size: 14px; font-weight: 500; }
  .search-result-meta { font-size: 11px; color: var(--muted); }
  .search-result-cat { font-family:'Space Mono',monospace; font-size: 9px; padding: 2px 8px; border-radius: 10px; background: rgba(124,58,237,0.15); color: var(--accent2); flex-shrink: 0; }
  .search-empty { text-align:center; color:var(--muted); font-size:13px; padding:20px; }
  #search-fab {
    position: fixed; bottom: 114px; right: 30px; width: 48px; height: 48px;
    border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
    color: var(--text); font-size: 20px; cursor: pointer; z-index: 1600;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3); transition: all 0.2s;
  }
  #search-fab:hover { background: rgba(255,255,255,0.15); transform: scale(1.08); }
  body.view-pages #search-fab { bottom: 184px; }

  /* ── TASK COMPLETION ANIMATION ────────────────────── */
  @keyframes checkPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
  }
  .exam-check.just-checked { animation: checkPop 0.35s cubic-bezier(0.175,0.885,0.32,1.275); }
  @keyframes taskDone {
    0%   { opacity:1; transform:translateX(0); }
    100% { opacity:0.4; transform:translateX(4px); }
  }
  .exam-item.animating-done { animation: taskDone 0.5s ease forwards; }
  
  /* Confetti burst on pomodoro complete */
  .confetti-particle {
    position: fixed; width: 8px; height: 8px; border-radius: 2px;
    pointer-events: none; z-index: 9999; animation: confettiFall 1.2s ease-out forwards;
  }
  @keyframes confettiFall {
    0%   { opacity:1; transform:translateY(0) rotate(0deg); }
    100% { opacity:0; transform:translateY(200px) rotate(720deg); }
  }
  @keyframes fadeOut { from{opacity:1;transform:translateX(-50%)} to{opacity:0;transform:translateX(-50%) translateY(10px)} }
  @keyframes urgentPulse { 0%,100%{box-shadow:0 2px 16px rgba(239,68,68,0.2)} 50%{box-shadow:0 2px 24px rgba(239,68,68,0.6)} }
  @keyframes softGlow { 0%,100%{box-shadow:0 4px 20px rgba(124,58,237,0.15)} 50%{box-shadow:0 4px 30px rgba(124,58,237,0.35)} }

  /* ── KEYBOARD SHORTCUTS PANEL ─────────────────────── */
  #shortcuts-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 4500;
    display: none; align-items: center; justify-content: center; backdrop-filter: blur(6px);
  }
  #shortcuts-overlay.open { display: flex; }
  #shortcuts-panel {
    background: var(--card); border: 1px solid var(--border); border-radius: 20px;
    padding: 28px; width: 92%; max-width: 420px; animation: popIn 0.25s cubic-bezier(0.175,0.885,0.32,1.275);
  }
  @keyframes popIn { from{transform:scale(0.8);opacity:0} to{transform:scale(1);opacity:1} }
  #shortcuts-panel h3 { font-family:'Space Mono',monospace; font-size:14px; margin-bottom:20px; color:var(--accent2); }
  .shortcut-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
  .shortcut-row:last-child { border-bottom:none; }
  .shortcut-desc { font-size:13px; color:var(--text); }
  .shortcut-key { font-family:'Space Mono',monospace; font-size:11px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); border-radius:6px; padding:3px 10px; color:var(--muted); }
  .shortcuts-close { width:100%; margin-top:16px; padding:10px; background:rgba(124,58,237,0.12); border:1px solid rgba(124,58,237,0.3); color:var(--accent2); border-radius:10px; cursor:pointer; font-family:'Space Mono',monospace; font-size:11px; }


  /* ═══ FAB STACK — CLEAN POSITIONS ═══════════════════ */
  /* Right column (bottom-up): notes → config → search → quick-capture */
  #add-note-fab          { bottom: 28px !important; right: 24px !important; }
  #config-btn            { bottom: 92px !important; right: 24px !important; }
  #search-fab            { bottom: 156px !important; right: 24px !important; }
  #quick-capture-btn     { bottom: 220px !important; right: 24px !important; }
  /* Left: Julians */
  #ai-fab                { bottom: 28px !important; left: 24px !important; right: auto !important; }
  
  /* Pages mode: push up above bottom nav (68px height) */
  body.view-pages #add-note-fab      { bottom: 96px !important; }
  body.view-pages #config-btn        { bottom: 160px !important; }
  body.view-pages #search-fab        { bottom: 224px !important; }
  body.view-pages #quick-capture-btn { bottom: 288px !important; }
  body.view-pages #ai-fab            { bottom: 96px !important; }
  
  /* FAB sizes — consistent */
  #add-note-fab, #config-btn, #search-fab, #quick-capture-btn {
    width: 48px !important; height: 48px !important;
  }
  #ai-fab { width: 52px !important; height: 52px !important; }
  
  /* FAB group label on hover (tooltip) */
  .fab-tooltip {
    position: absolute; right: 56px; top: 50%; transform: translateY(-50%);
    background: var(--card); border: 1px solid var(--border); border-radius: 8px;
    padding: 4px 10px; font-size: 11px; font-family:'Space Mono',monospace;
    white-space: nowrap; color: var(--text); pointer-events: none;
    opacity: 0; transition: opacity 0.15s; z-index: 1;
  }
  #add-note-fab:hover .fab-tooltip,
  #config-btn:hover .fab-tooltip,
  #search-fab:hover .fab-tooltip,
  #quick-capture-btn:hover .fab-tooltip { opacity: 1; }
  #ai-fab .fab-tooltip { right: auto; left: 56px; }
  #ai-fab:hover .fab-tooltip { opacity: 1; }


  /* ── DOCUMENT ATTACH ────────────────────────────── */
  .ai-attach-btn {
    width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center;
    justify-content: center; cursor: pointer; font-size: 18px; flex-shrink: 0;
    transition: all 0.15s; user-select: none;
  }
  .ai-attach-btn:hover { background: rgba(124,58,237,0.15); border-color: rgba(124,58,237,0.4); }
  .ai-attach-btn.has-file { background: rgba(124,58,237,0.2); border-color: rgba(124,58,237,0.5); }
  #ai-doc-preview { display: none; }
  #ai-doc-preview.active { display: flex !important; }
  .ai-doc-processing {
    display: flex; align-items: center; gap: 8px; padding: 6px 12px;
    background: rgba(124,58,237,0.08); border-radius: 8px; font-size: 12px;
    color: var(--accent2); margin: 4px 16px 0;
  }


  /* ═══ JOMAXPATH HERO TITLE ══════════════════════════ */
  .header { text-align: center; margin-bottom: 48px; padding-top: 8px; }
  .jomaxpath-hero {
    position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: 6px;
  }
  .jomaxpath-hero-title {
    font-family: 'Space Mono', monospace;
    font-size: clamp(3rem, 9vw, 6rem);
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1;
    color: #ffffff;
    text-shadow:
      0 0 30px rgba(124,58,237,0.9),
      0 0 60px rgba(124,58,237,0.5),
      0 0 100px rgba(124,58,237,0.3),
      0 2px 0 rgba(0,0,0,0.5);
    animation: heroGlow 4s ease-in-out infinite;
    display: block;
  }
  @keyframes heroGlow {
    0%,100% { text-shadow: 0 0 30px rgba(124,58,237,0.9), 0 0 60px rgba(124,58,237,0.5), 0 0 100px rgba(124,58,237,0.3); }
    50%      { text-shadow: 0 0 40px rgba(139,92,246,1), 0 0 80px rgba(99,102,241,0.7), 0 0 120px rgba(59,130,246,0.4); }
  }
  @keyframes heroShimmer {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
  }
  .jomaxpath-hero-sub {
    font-family: 'Space Mono', monospace; font-size: 11px;
    letter-spacing: 5px; text-transform: uppercase;
    color: var(--muted); margin-top: 6px; opacity: 0.7;
  }
  .jomaxpath-tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(124,58,237,0.12); border: 1px solid rgba(124,58,237,0.3);
    color: var(--accent2); font-family: 'Space Mono', monospace; font-size: 10px;
    letter-spacing: 3px; text-transform: uppercase;
    padding: 5px 14px; border-radius: 20px; margin-bottom: 20px;
  }
  .jomaxpath-user {
    font-size: 13px; color: var(--muted); margin-top: 10px;
    font-family: 'Space Mono', monospace; letter-spacing: 1px;
  }
  .jomaxpath-version {
    display: inline-block; font-size: 9px; font-family: 'Space Mono', monospace;
    background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25);
    color: var(--green); padding: 2px 8px; border-radius: 10px;
    letter-spacing: 2px; margin-left: 8px; vertical-align: middle; opacity: 0.8;
  }

  /* ═══ PAGE TITLES (cridaners) ══════════════════════ */
  .page-title-bar {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 28px; padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .page-title-icon {
    width: 46px; height: 46px; border-radius: 14px; display: flex;
    align-items: center; justify-content: center; font-size: 22px;
    flex-shrink: 0; position: relative;
  }
  .page-title-icon::after {
    content: ''; position: absolute; inset: -1px; border-radius: 15px;
    background: linear-gradient(135deg, var(--accent), var(--blue));
    z-index: -1; opacity: 0.5;
  }
  .page-title-text { flex: 1; }
  .page-title-text h2 {
    font-family: 'Space Mono', monospace;
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    font-weight: 700;
    background: linear-gradient(135deg, #fff 0%, var(--accent2) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; margin: 0 0 3px; letter-spacing: -0.5px;
  }
  .page-title-text p {
    font-size: 12px; color: var(--muted); margin: 0;
    font-family: 'Space Mono', monospace; letter-spacing: 1px;
  }

  /* ═══ SECTION TITLES (millorats) ═══════════════════ */
  .section-title {
    font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 3px;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: 20px; display: flex; align-items: center; gap: 10px;
    position: relative;
  }
  .section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }

  /* ═══ INFO TOOLTIP ══════════════════════════════════ */
  .info-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(124,58,237,0.15); border: 1px solid rgba(124,58,237,0.35);
    color: var(--accent2); font-size: 11px; font-weight: 700;
    cursor: pointer; flex-shrink: 0; transition: all 0.2s;
    font-family: serif; line-height: 1; user-select: none;
    font-style: italic; vertical-align: middle;
  }
  .info-btn:hover { background: rgba(124,58,237,0.3); transform: scale(1.15); }
  .info-tooltip-overlay {
    position: fixed; inset: 0; z-index: 5000; display: none;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,0.65); backdrop-filter: blur(8px);
    padding: 20px;
  }
  .info-tooltip-overlay.open { display: flex; }
  .info-tooltip-box {
    background: var(--card); border: 1px solid rgba(124,58,237,0.4);
    border-radius: 22px; padding: 28px 30px; max-width: 480px; width: 100%;
    position: relative; animation: popIn 0.25s cubic-bezier(0.175,0.885,0.32,1.275);
    max-height: 80vh; overflow-y: auto;
  }
  .info-tooltip-icon { font-size: 36px; margin-bottom: 12px; display: block; }
  .info-tooltip-title {
    font-family: 'Space Mono', monospace; font-size: 14px; font-weight: 700;
    color: var(--accent2); margin-bottom: 14px; letter-spacing: 1px;
  }
  .info-tooltip-body { font-size: 13px; color: var(--text); line-height: 1.75; }
  .info-tooltip-body ul { padding-left: 18px; margin: 8px 0; }
  .info-tooltip-body li { margin-bottom: 5px; }
  .info-tooltip-body strong { color: var(--accent2); }
  .info-tooltip-body .tip-chip {
    display: inline-block; background: rgba(124,58,237,0.15);
    border: 1px solid rgba(124,58,237,0.3); border-radius: 8px;
    padding: 2px 8px; font-size: 11px; margin: 2px 2px; color: var(--accent2);
    font-family: 'Space Mono', monospace;
  }
  .info-tooltip-close {
    position: absolute; top: 16px; right: 18px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: var(--muted); font-size: 18px; width: 32px; height: 32px;
    border-radius: 50%; cursor: pointer; display: flex; align-items: center;
    justify-content: center; transition: all 0.15s;
  }
  .info-tooltip-close:hover { background: rgba(239,68,68,0.15); color: #fca5a5; }


  /* ── CHAT DELETE CONFIRM MODAL ───────────────────── */
  #chat-delete-modal {
    position: fixed; inset: 0; z-index: 6000;
    background: rgba(0,0,0,0.75); backdrop-filter: blur(10px);
    display: none; align-items: center; justify-content: center; padding: 20px;
  }
  #chat-delete-modal.open { display: flex; }
  #chat-delete-box {
    background: var(--card); border: 1px solid rgba(239,68,68,0.4);
    border-radius: 20px; padding: 28px; max-width: 360px; width: 100%;
    animation: popIn 0.2s cubic-bezier(0.175,0.885,0.32,1.275);
    text-align: center;
  }
  #chat-delete-box .cd-icon { font-size: 40px; margin-bottom: 14px; }
  #chat-delete-box .cd-title { font-family:'Space Mono',monospace; font-size:14px; color:#fca5a5; margin-bottom: 10px; }
  #chat-delete-box .cd-msg { font-size: 13px; color: var(--muted); margin-bottom: 22px; line-height: 1.5; }
  .cd-btn-row { display: flex; gap: 10px; }
  .cd-btn-confirm { flex:1; background: rgba(239,68,68,0.2); border: 1px solid rgba(239,68,68,0.5); color: #fca5a5; font-family:'Space Mono',monospace; font-size:12px; font-weight:700; padding: 12px; border-radius: 12px; cursor: pointer; transition: all 0.15s; }
  .cd-btn-confirm:hover { background: rgba(239,68,68,0.35); }
  .cd-btn-cancel { flex:1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--muted); font-family:'Space Mono',monospace; font-size:12px; padding: 12px; border-radius: 12px; cursor: pointer; transition: all 0.15s; }
  .cd-btn-cancel:hover { background: rgba(255,255,255,0.1); color: var(--text); }

  /* Select mode visual indicator */
  #ai-sidebar.select-active #ai-sidebar-header {
    background: rgba(239,68,68,0.08);
    border-bottom: 1px solid rgba(239,68,68,0.2);
  }
  .ai-select-toolbar {
    display: none; align-items: center; justify-content: space-between;
    padding: 8px 12px; background: rgba(239,68,68,0.1);
    border-bottom: 1px solid rgba(239,68,68,0.2); flex-shrink: 0;
  }
  .select-mode-active .ai-select-toolbar { display: flex !important; }
  .ai-chat-item.selecting .ai-sel-check { display: flex !important; }
  .ai-chat-item.selected { background: rgba(124,58,237,0.18) !important; }
  .ai-chat-item.selected .ai-sel-check { background: var(--accent) !important; border-color: var(--accent) !important; }

/* ══ */

/* ── AUTH MODAL ── */
#auth-overlay {
  position:fixed; inset:0; z-index:99999;
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(12px);
  display:none; align-items:center; justify-content:center;
  opacity:0; transition:opacity 0.3s;
  pointer-events:none;
}
#auth-overlay.visible { opacity:1; pointer-events:all; }
#auth-box {
  background:linear-gradient(145deg,#14141f,#1a1a2e);
  border:1px solid rgba(0,180,216,0.25);
  border-radius:20px;
  padding:40px 36px;
  width:100%; max-width:380px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(0,180,216,0.08);
  position:relative;
  transform:translateY(20px); transition:transform 0.3s;
}
#auth-overlay.visible #auth-box { transform:translateY(0); }
#auth-logo { text-align:center; margin-bottom:28px; }
#auth-logo .bolt { font-size:40px; filter:drop-shadow(0 0 12px rgba(0,180,216,0.7)); }
#auth-logo h2 { font-family:'Space Mono',monospace; font-size:20px; font-weight:700; color:#fff; letter-spacing:2px; margin-top:10px; }
#auth-logo p  { font-size:12px; color:rgba(255,255,255,0.35); letter-spacing:1px; margin-top:4px; }
.auth-tabs { display:flex; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); padding:3px; margin-bottom:24px; gap:3px; }
.auth-tab  { flex:1; text-align:center; padding:8px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:1px; color:rgba(255,255,255,0.4); cursor:pointer; border-radius:8px; transition:all 0.2s; }
.auth-tab.active { background:rgba(0,180,216,0.15); color:#38d9f5; border:1px solid rgba(0,180,216,0.3); }
.auth-field { margin-bottom:14px; }
.auth-field label { display:block; font-family:'Space Mono',monospace; font-size:9px; letter-spacing:2px; color:rgba(255,255,255,0.3); margin-bottom:6px; }
.auth-field input {
  width:100%; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  border-radius:10px; padding:12px 14px; color:#fff; font-family:'Sora',sans-serif; font-size:14px;
  outline:none; transition:border-color 0.2s;
}
.auth-field input:focus { border-color:rgba(0,180,216,0.5); box-shadow:0 0 0 3px rgba(0,180,216,0.08); }
.auth-btn {
  width:100%; padding:13px; margin-top:6px;
  background:linear-gradient(135deg,rgba(0,180,216,0.9),rgba(124,58,237,0.9));
  border:none; border-radius:11px; color:#fff;
  font-family:'Space Mono',monospace; font-size:12px; font-weight:700; letter-spacing:2px;
  cursor:pointer; transition:opacity 0.2s, transform 0.1s;
}
.auth-btn:hover { opacity:0.9; transform:translateY(-1px); }
.auth-btn:active { transform:translateY(0); }
.auth-btn:disabled { opacity:0.5; cursor:not-allowed; }
#auth-msg { margin-top:12px; text-align:center; font-size:12px; min-height:18px; }
#auth-msg.error { color:#fca5a5; }
#auth-msg.ok    { color:#6ee7b7; }
.auth-skip { text-align:center; margin-top:16px; font-size:11px; color:rgba(255,255,255,0.2); cursor:pointer; transition:color 0.2s; }
.auth-skip:hover { color:rgba(255,255,255,0.5); }
.auth-divider { display:flex; align-items:center; gap:12px; margin:16px 0; }
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:rgba(255,255,255,0.07); }
.auth-divider span { font-size:10px; color:rgba(255,255,255,0.2); }

/* ── USER INDICATOR (top-left) ── */
/* auth-indicator ara viu dins el nav drawer */
#auth-indicator {
  display:none; align-items:center; gap:8px;
  padding:10px 16px;
  border-top:1px solid rgba(255,255,255,0.06);
  cursor:pointer;
  transition:background 0.2s;
  flex-shrink:0;
}
#auth-indicator:hover { background:rgba(0,180,216,0.06); }
#auth-indicator .auth-dot {
  width:7px; height:7px; border-radius:50%;
  background:#38d9f5;
  box-shadow:0 0 6px rgba(0,180,216,0.8);
  flex-shrink:0;
}
#auth-indicator .auth-dot.syncing { animation:syncPulse 1s ease-in-out infinite; background:#fcd34d; }
#auth-indicator .auth-dot.offline { background:rgba(255,255,255,0.2); box-shadow:none; }
#auth-user-email {
  flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:'Space Mono',monospace; font-size:10px;
  color:rgba(255,255,255,0.4); letter-spacing:0.5px;
}
#auth-signout-hint { font-size:9px; color:rgba(255,255,255,0.2); font-family:'Space Mono',monospace; flex-shrink:0; }
#notif-pill {
  display:flex; align-items:center; justify-content:center; gap:7px;
  background:rgba(0,180,216,0.08); border:1px solid rgba(0,180,216,0.2);
  border-radius:12px; padding:9px 14px; cursor:pointer;
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1px;
  color:rgba(0,180,216,0.6); transition:all 0.2s; margin:0 16px 8px;
}
#notif-pill:hover { background:rgba(0,180,216,0.15); color:#38d9f5; border-color:rgba(0,180,216,0.4); }
#notif-pill .ndot { width:6px; height:6px; border-radius:50%; background:rgba(0,180,216,0.3); flex-shrink:0; transition:all 0.3s; }
#notif-pill .ndot.on { background:#38d9f5; box-shadow:0 0 8px rgba(0,180,216,0.7); }

#drawer-login-btn:hover { background:rgba(0,180,216,0.06); }
@keyframes syncPulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ── SYNC TOAST ── */
#sync-toast {
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
  background:rgba(0,180,216,0.15); border:1px solid rgba(0,180,216,0.3);
  border-radius:20px; padding:8px 18px;
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:1px;
  color:#38d9f5; z-index:9000;
  opacity:0; pointer-events:none; transition:opacity 0.3s;
}
#sync-toast.show { opacity:1; }

/* ══ */

/* ═══ POMODORO FULLSCREEN ═══ */
#pomo-fullscreen {
  display:none;
  position:fixed;
  inset:0;
  z-index:9998;
  background:#000;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity 0.35s ease;
  cursor:pointer;
  gap:0;
  overflow:hidden;
}
#pomo-fullscreen::before {
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(239,68,68,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(124,58,237,0.06) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 20%, rgba(0,180,216,0.05) 0%, transparent 40%);
  pointer-events:none;
  transition:background 1s;
}
#pomo-fullscreen.break-bg::before {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(16,185,129,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(59,130,246,0.06) 0%, transparent 40%);
}
#pomo-fullscreen.long-break-bg::before {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(59,130,246,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(0,180,216,0.07) 0%, transparent 40%);
}

/* SVG ring */
#pomo-fs-svg-wrap {
  position:relative;
  width:min(55vw, 55vh, 500px);
  height:min(55vw, 55vh, 500px);
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
#pomo-fs-svg {
  width:100%; height:100%;
  transform:rotate(-90deg);
  overflow:visible;
}
.pomo-fs-bg-circle { fill:none; stroke:rgba(255,255,255,0.05); stroke-width:8; }
.pomo-fs-arc {
  fill:none;
  stroke:#ef4444;
  stroke-width:8;
  stroke-linecap:round;
  transition:stroke-dashoffset 1s linear, stroke 0.5s;
}
.pomo-fs-arc.break-mode  { stroke:#10b981; }
.pomo-fs-arc.long-break  { stroke:#3b82f6; }
#pomo-fs-center {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  pointer-events:none;
  width:80%;
  text-align:center;
}
#pomo-fs-digits {
  font-family:'Space Mono',monospace;
  font-size:clamp(44px, 8.5vw, 90px);
  font-weight:700;
  color:#fff;
  letter-spacing:-2px;
  line-height:1;
  text-shadow:0 0 60px rgba(239,68,68,0.5);
  transition:text-shadow 0.5s;
}
#pomo-fs-digits.break-glow { text-shadow:0 0 60px rgba(16,185,129,0.5); }
#pomo-fs-digits.long-glow  { text-shadow:0 0 60px rgba(59,130,246,0.5); }
#pomo-fs-phase {
  font-family:'Space Mono',monospace;
  font-size:clamp(12px,2vw,18px);
  letter-spacing:4px;
  text-transform:uppercase;
  color:rgba(239,68,68,0.8);
  transition:color 0.5s;
}
#pomo-fs-phase.break-col  { color:rgba(16,185,129,0.8); }
#pomo-fs-phase.long-col   { color:rgba(59,130,246,0.8); }

/* session dots */
#pomo-fs-dots {
  display:flex;
  gap:10px;
  margin-top:16px;
}
.pomo-fs-dot {
  width:10px; height:10px;
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  transition:background 0.3s, box-shadow 0.3s;
}
.pomo-fs-dot.done { background:#ef4444; box-shadow:0 0 8px rgba(239,68,68,0.6); }
.pomo-fs-dot.done.break-col { background:#10b981; box-shadow:0 0 8px rgba(16,185,129,0.6); }

/* controls */
#pomo-fs-controls {
  display:flex;
  gap:16px;
  margin-top:28px;
  align-items:center;
}
.pomo-fs-btn {
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  color:#fff;
  font-family:'Space Mono',monospace;
  font-size:13px;
  letter-spacing:1.5px;
  padding:12px 28px;
  cursor:pointer;
  transition:background 0.2s, transform 0.1s;
}
.pomo-fs-btn:hover { background:rgba(255,255,255,0.14); transform:translateY(-1px); }
.pomo-fs-btn:active { transform:translateY(0); }
.pomo-fs-btn.primary {
  background:linear-gradient(135deg,rgba(239,68,68,0.3),rgba(239,68,68,0.15));
  border-color:rgba(239,68,68,0.4);
}
.pomo-fs-btn.primary.break-col {
  background:linear-gradient(135deg,rgba(16,185,129,0.3),rgba(16,185,129,0.15));
  border-color:rgba(16,185,129,0.4);
}

/* ── Música ── */
#pomo-fs-music {
  margin-top:32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-height:60px;
}
#pomo-fs-music-label {
  font-family:'Space Mono',monospace;
  font-size:9px;
  letter-spacing:3px;
  color:rgba(255,255,255,0.18);
  text-transform:uppercase;
}
#pomo-fs-music-track {
  font-family:'Plus Jakarta Sans','Sora',sans-serif;
  font-size:clamp(13px,2vw,17px);
  font-weight:500;
  color:rgba(255,255,255,0.55);
  letter-spacing:0.3px;
  text-align:center;
  max-width:60vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#pomo-fs-music-artist {
  font-family:'Space Mono',monospace;
  font-size:11px;
  color:rgba(255,255,255,0.25);
  letter-spacing:1px;
}
.pomo-fs-music-bar {
  display:flex;
  gap:3px;
  align-items:flex-end;
  height:16px;
  margin-top:4px;
}
.pomo-fs-music-bar span {
  width:3px;
  background:rgba(0,180,216,0.6);
  border-radius:2px;
  animation:musicBar 0.8s ease-in-out infinite alternate;
}
.pomo-fs-music-bar span:nth-child(2) { animation-delay:0.15s; height:60%; }
.pomo-fs-music-bar span:nth-child(3) { animation-delay:0.3s;  height:100%; }
.pomo-fs-music-bar span:nth-child(4) { animation-delay:0.1s;  height:45%; }
.pomo-fs-music-bar span:nth-child(5) { animation-delay:0.25s; height:75%; }
@keyframes musicBar {
  from { height:20%; opacity:0.4; }
  to   { height:100%; opacity:1; }
}
.pomo-fs-music-bar.paused span { animation-play-state:paused; opacity:0.2; }

/* close hint */
#pomo-fs-close-hint {
  position:absolute;
  bottom:28px;
  right:36px;
  font-family:'Space Mono',monospace;
  font-size:9px;
  letter-spacing:2px;
  color:rgba(255,255,255,0.15);
  pointer-events:none;
}

@media(max-width:600px) {
  #pomo-fs-svg-wrap { width:80vw; height:80vw; }
}

/* ══ */

#clock-fullscreen {
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:#000;
  flex-direction:row;
  align-items:stretch;
  justify-content:center;
  opacity:0;
  transition:opacity 0.35s ease;
}
#clock-fullscreen::before {
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(124,58,237,0.10) 0%, transparent 60%),
    radial-gradient(ellipse at 10% 80%, rgba(59,130,246,0.06) 0%, transparent 40%),
    radial-gradient(ellipse at 90% 20%, rgba(16,185,129,0.05) 0%, transparent 40%);
  pointer-events:none;
}
/* ── Side panels ── */
.fs-side {
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:60px 40px;
  gap:28px;
  cursor:pointer;
}
.fs-side-label {
  font-family:'Space Mono',monospace;
  font-size:10px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:rgba(124,58,237,0.6);
  margin-bottom:4px;
}
.fs-side-card {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px;
  padding:18px 20px;
}
.fs-task-item {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,0.04);
  font-family:'Sora',sans-serif;
  font-size:13px;
  color:rgba(255,255,255,0.6);
  line-height:1.3;
}
.fs-task-item:last-child { border-bottom:none; padding-bottom:0; }
.fs-task-item:first-child { padding-top:0; }
.fs-task-badge {
  font-family:'Space Mono',monospace;
  font-size:9px;
  padding:2px 7px;
  border-radius:20px;
  flex-shrink:0;
  font-weight:700;
  letter-spacing:0.5px;
}
.fs-task-badge.urgent { background:rgba(239,68,68,0.2); color:#fca5a5; }
.fs-task-badge.soon   { background:rgba(245,158,11,0.2); color:#fcd34d; }
.fs-task-badge.ok     { background:rgba(16,185,129,0.2); color:#6ee7b7; }
.fs-task-badge.today  { background:rgba(124,58,237,0.25); color:#a78bfa; }
.fs-empty {
  font-family:'Space Mono',monospace;
  font-size:11px;
  color:rgba(255,255,255,0.18);
  letter-spacing:1px;
  padding:6px 0;
}
/* ── Streak widget ── */
.fs-streak-num {
  font-family:'Space Mono',monospace;
  font-size:52px;
  font-weight:700;
  color:#fcd34d;
  line-height:1;
  text-shadow:0 0 30px rgba(252,211,77,0.35);
}
.fs-streak-label {
  font-family:'Sora',sans-serif;
  font-size:12px;
  color:rgba(255,255,255,0.35);
  margin-top:4px;
  letter-spacing:1px;
}
.fs-streak-dots {
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  margin-top:14px;
}
.fs-streak-dot {
  width:8px; height:8px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
}
.fs-streak-dot.done { background:#fcd34d; box-shadow:0 0 6px rgba(252,211,77,0.5); }
.fs-streak-dot.today-dot { outline:1.5px solid rgba(252,211,77,0.5); outline-offset:2px; }
/* ── Centre ── */
#fs-center {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:min(60vw, 700px);
  cursor:pointer;
  gap:12px;
  padding:40px 20px;
}
#fs-clock-time {
  font-family:'Space Mono',monospace;
  font-size:clamp(72px, 15vw, 180px);
  font-weight:700;
  color:#fff;
  letter-spacing:-2px;
  line-height:1;
  text-shadow:0 0 80px rgba(124,58,237,0.5);
  display:inline;
}
#fs-clock-seconds {
  font-family:'Space Mono',monospace;
  font-size:clamp(36px, 7.5vw, 90px);
  font-weight:400;
  color:rgba(124,58,237,0.9);
  letter-spacing:-1px;
  line-height:1;
  transition:opacity 0.3s;
  display:inline;
}
#fs-clock-date {
  font-family:'Sora',sans-serif;
  font-size:clamp(12px, 1.8vw, 20px);
  font-weight:300;
  color:rgba(255,255,255,0.35);
  letter-spacing:3px;
  text-transform:uppercase;
}
/* divider lines */
.fs-divider {
  width:1px;
  background:linear-gradient(to bottom, transparent, rgba(124,58,237,0.2) 30%, rgba(124,58,237,0.2) 70%, transparent);
  align-self:stretch;
  flex-shrink:0;
}
#fs-clock-controls {
  position:absolute;
  bottom:32px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:16px;
  align-items:center;
}
#fs-toggle-seconds {
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px;
  color:rgba(255,255,255,0.45);
  font-family:'Space Mono',monospace;
  font-size:11px;
  padding:7px 16px;
  cursor:pointer;
  transition:background 0.2s,color 0.2s;
  letter-spacing:1px;
}
#fs-toggle-seconds:hover { background:rgba(255,255,255,0.12); color:#fff; }
#fs-close-hint {
  color:rgba(255,255,255,0.2);
  font-family:'Space Mono',monospace;
  font-size:10px;
  letter-spacing:2px;
}
@media(max-width:700px) {
  .fs-side, .fs-divider { display:none !important; }
  #fs-center { min-width:100vw; }
}