/* Quiet Garden — classroom noise meter & quiet forest */
html,body{background:var(--bg);font-family:'Nunito',sans-serif;color:var(--text);line-height:1.7}
.nav-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:60px}
.nav-links{display:flex;gap:24px;list-style:none}
.nav-links a{text-decoration:none;color:var(--muted);font-weight:700;font-size:14px;transition:color 0.2s}
.nav-links a:hover{color:var(--teal)}
.qg-wrap{max-width:860px;margin:0 auto;padding:32px 20px 72px}
.qg-head{text-align:center;margin-bottom:24px}
.qg-head .qg-tag{display:inline-block;background:linear-gradient(135deg,#F0FFF4,#DCFCE7);color:var(--teal);font-size:12px;font-weight:800;border-radius:20px;padding:4px 14px;margin-bottom:14px}
h1.qg-title{font-family:'Fredoka',cursive;font-size:clamp(26px,5vw,38px);font-weight:700;color:var(--text);margin-bottom:8px}
.qg-sub{color:var(--muted);font-weight:700;font-size:15px;max-width:560px;margin:0 auto}
.panel{background:var(--card);border-radius:20px;padding:24px 26px;box-shadow:0 4px 16px rgba(0,0,0,0.07);margin-bottom:20px}
.meter{width:100%;height:34px;background:linear-gradient(to right,#4CAF50,#FFC107,#F44336);border-radius:17px;position:relative;overflow:hidden;box-shadow:inset 0 2px 6px rgba(0,0,0,0.12)}
.meter .level{position:absolute;top:0;right:0;height:100%;width:0%;background-color:rgba(255,255,255,0.32);transition:width 0.25s}
.decibel{font-size:1.6em;font-weight:900;margin:12px 0 4px;color:var(--teal);font-family:'Fredoka',cursive}
.decibel.noisy{color:#F44336}
.status{font-size:1.05em;font-weight:800;margin:8px 0 4px;min-height:28px;color:var(--text)}
.timer{font-size:1.25em;font-weight:900;color:var(--teal);margin:10px 0 2px}
.progress-row{display:flex;align-items:center;gap:12px;margin:12px 0 4px;font-size:13px;font-weight:800;color:var(--muted)}
.progress-bar{flex:1;height:16px;background-color:#e0e0e0;border-radius:8px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--teal),#66BB6A);width:0%;transition:width 0.4s}
.forest{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;min-height:190px;gap:8px;margin:20px 0 8px;padding:16px 8px;background:linear-gradient(180deg,#F7FFF9,#EAF7EE);border-radius:16px}
.tree{transition:all 0.4s}
.tree.sapling{width:40px;height:60px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 60"><path d="M20 5 L15 25 L25 25 Z" fill="%23338855"/><path d="M20 25 L15 45 L25 45 Z" fill="%23338855"/><rect x="18" y="45" width="4" height="15" fill="%238B4513"/></svg>');background-size:contain;background-repeat:no-repeat;background-position:center}
.tree.big-tree{width:80px;height:120px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 120"><path d="M40 5 L20 40 L60 40 Z" fill="%232e8b57"/><path d="M40 30 L20 70 L60 70 Z" fill="%232e8b57"/><path d="M40 60 L20 95 L60 95 Z" fill="%232e8b57"/><rect x="36" y="95" width="8" height="25" fill="%238B4513"/></svg>');background-size:contain;background-repeat:no-repeat;background-position:center}
.tree.celebrate{animation:qgCelebrate 0.5s ease 3}
@keyframes qgCelebrate{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
.forest-empty{color:var(--muted);font-weight:700;font-size:14px;align-self:center}
.settings{background:linear-gradient(135deg,#F0FFF4,#E6F7EE);border-radius:16px;padding:16px 20px}
.settings h3{font-family:'Fredoka',cursive;font-size:17px;color:var(--teal);margin:0 0 12px}
.setting-item{margin:10px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;font-weight:800;color:var(--text)}
.setting-item label{font-weight:800;color:var(--teal)}
.setting-item input,.setting-item select{padding:6px 10px;border-radius:8px;border:1.5px solid #cfe8d8;font-family:'Nunito',sans-serif;font-weight:700;font-size:14px;background:#fff}
.qg-btn{background:linear-gradient(135deg,var(--teal),#2E9E63);color:#fff;border:none;padding:10px 22px;border-radius:12px;font-size:14px;font-weight:900;cursor:pointer;margin:6px 6px 0 0;font-family:'Nunito',sans-serif;transition:opacity 0.15s,transform 0.15s}
.qg-btn:hover{opacity:0.9;transform:translateY(-1px)}
.qg-btn.ghost{background:#fff;color:var(--teal);border:2px solid var(--teal)}
.demo-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
.demo-btn{background:#fff;color:var(--purple);border:2px dashed var(--purple);padding:8px 18px;border-radius:12px;font-size:13px;font-weight:900;cursor:pointer;font-family:'Nunito',sans-serif}
.demo-btn:hover{background:#F5F3FF}
.privacy-note{font-size:12px;color:var(--muted);font-weight:700;margin-top:12px;text-align:center}
/* themes */
body.blue-theme{background:#eef6ff}
body.blue-theme .panel{background:#fff}
body.blue-theme .settings{background:linear-gradient(135deg,#E3F2FD,#D6E9FA)}
body.blue-theme .settings h3,body.blue-theme .setting-item label{color:#1a73e8}
body.blue-theme .timer,body.blue-theme .decibel{color:#1a73e8}
body.blue-theme .qg-btn{background:linear-gradient(135deg,#4285F4,#3367D6)}
body.blue-theme .nav-links a:hover{color:#1a73e8}
body.pink-theme{background:#fff4f8}
body.pink-theme .settings{background:linear-gradient(135deg,#FCE4EC,#F8D7E3)}
body.pink-theme .settings h3,body.pink-theme .setting-item label{color:#e91e63}
body.pink-theme .timer,body.pink-theme .decibel{color:#e91e63}
body.pink-theme .qg-btn{background:linear-gradient(135deg,#FF4081,#F50057)}
body.pink-theme .nav-links a:hover{color:#e91e63}
@media(max-width:600px){
  .nav-links{display:none}
  .qg-wrap{padding:20px 14px 56px}
  .panel{padding:18px 16px}
  .setting-item{flex-direction:column;align-items:flex-start;gap:6px}
  .setting-item input,.setting-item select{width:100%;box-sizing:border-box}
}