:root{
  --bg:#f3f3f3;
  --fg:#111;
  --muted:#6b6b6b;
  --accent:#111;
  font-family: "Cal Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}

*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:16px;
  display:flex;
  align-items:stretch;
  justify-content:center;
}

body.dark{
  background:#050505;
  color:#f5f5f5;
}
body.dark .mode-buttons button.active{
  background:#f5f5f5;
  color:#000000;
  border-color:#f5f5f5;
}
body.dark textarea,
body.dark select,
body.dark input,
body.dark .rate-presets button,
body.dark button{
  background:#050505;
  color:#f5f5f5;
  border-color:#333333;
}

.app{
  width:100%;
  max-width:940px;
  margin:0 auto;
  background:#ffffff;
  border-radius:14px;
  padding:16px 14px 14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.10);
  display:flex;
  flex-direction:column;
  gap:10px;
}

body.dark .app{
  background:#050505;
  box-shadow:0 14px 40px rgba(0,0,0,0.65);
}

header h1{
  margin:0 0 2px 0;
  font-size:18px;
  letter-spacing:0.2px;
}
.muted{color:var(--muted); font-size:13px}

.controls{
  display:flex;
  gap:16px;
  margin-top:8px;
  align-items:flex-start;
}

.left{
  flex:1;
  min-width:0;
}

label{display:block;font-weight:600;font-size:13px;margin-bottom:6px}
textarea{
  width:100%;
  font-family: "Cal Sans", monospace;
  font-size:14px;
  padding:10px;
  border:1px solid #e1e1e1;
  border-radius:8px;
  resize:vertical;
  min-height:84px;
}

.row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}
#rateNum{
  width:88px;
  padding:6px 8px;
  border-radius:6px;
  border:1px solid #e6e6e6;
  font-weight:600;
  background:#fff;
}

input[type="range"]{flex:1}
select,button{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid #e1e1e1;
  background:#fff;
  font-weight:600;
  cursor:pointer;
}
button:disabled{opacity:0.5;cursor:default}
.inline{display:flex;align-items:center;gap:6px}

.right{
  width:230px;
  padding:10px;
  border-radius:10px;
  border:1px solid #ededed;
  background:#fafafa;
}

body.dark .right{
  background:#050505;
  border-color:#222;
}

.visual{
  margin-top:8px;
  border:1px solid #e1e1e1;
  border-radius:10px;
  overflow:hidden;
  height:180px;
  background:#fdfdfd;
}

body.dark .visual{
  border-color:#222;
  background:#050505;
}

canvas{width:100%;height:100%;display:block}
footer{margin-top:8px;font-size:11px;opacity:0.8;text-align:right}

.rate-presets{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  align-items:center;
}
.rate-presets button{
  padding:4px 7px;
  border-radius:999px;
  border:1px solid #e6e6e6;
  background:#fafafa;
  cursor:pointer;
  font-weight:600;
  font-size:11px;
}

.row.actions{
  flex-wrap:wrap;
  justify-content:flex-start;
}

.row.actions > button,
.row.actions > input{
  flex:0 0 auto;
}

.mode-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:8px;
}
.mode-buttons button{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #e6e6e6;
  background:#fafafa;
  font-weight:600;
  cursor:pointer;
  font-size:13px;
}
.mode-buttons button.active{
  background:#111;
  color:#fff;
  border-color:#111;
}

button#darkToggle{min-width:64px}
#waveBtn{min-width:120px}

.wave-picker{display:inline-flex;align-items:center;gap:6px;position:relative}
#waveListBtn{padding:6px 8px;border-radius:6px;border:1px solid #e6e6e6;background:#fff;cursor:pointer;font-weight:600}
.wave-list{
  position:absolute;
  right:0;
  top:38px;
  background:var(--bg);
  color:var(--fg);
  border:1px solid #e6e6e6;
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
  padding:8px;
  width:200px;
  max-height:220px;
  overflow:auto;
  z-index:20;
}
.wave-list button{
  display:block;
  width:100%;
  text-align:left;
  padding:8px;
  border-radius:6px;
  border:0;
  background:transparent;
  cursor:pointer;
  font-weight:600;
  color:inherit;
}
.wave-list button:hover{background:#f2f2f2}
body.dark .wave-list{background:#050505;border-color:#333333}
body.dark .wave-list button:hover{background:#111111}

.bg-controls{display:inline-block;position:relative;margin-left:10px}
#bgToggle{padding:6px 10px;border-radius:6px;border:1px solid #e6e6e6;background:#fff;cursor:pointer;font-weight:600}
.bg-panel{
  position:absolute;
  right:0;
  top:42px;
  width:320px;
  background:var(--bg);
  color:var(--fg);
  border:1px solid #e6e6e6;
  border-radius:8px;
  padding:10px;
  box-shadow:0 8px 30px rgba(0,0,0,0.08);
  z-index:40;
}
.bg-panel .bg-section{margin-bottom:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bg-panel input[type="color"]{width:44px;height:34px;padding:0;border:0;background:transparent}
.bg-panel input[type="file"]{flex:1}
.preset-images button{padding:6px 8px;border-radius:6px;border:1px solid #e6e6e6;background:#fff;cursor:pointer;font-weight:600;margin-right:6px;margin-top:6px}
.bg-preview{height:60px;border-radius:6px;border:1px solid #e6e6e6;margin-top:6px;background-size:cover;background-position:center;overflow:hidden}

/* dark */
body.dark .bg-panel{background:#050505;border-color:#333333;color:#f5f5f5}
body.dark .preset-images button{background:#050505;border-color:#333333;color:#f5f5f5}

/* allow background application to page */
.app-bg-applied{transition: background 0.25s ease, background-image 0.25s ease,}

.corner-art{
  position:fixed;
  right:10px;
  bottom:10px;
  width:110px;
  height:auto;
  opacity:0.12;
  pointer-events:none;
  image-rendering:crisp-edges;
  border-radius:8px;
  filter:grayscale(20%);
  transition:opacity .18s ease, transform .18s ease;
}
body.dark .corner-art{
  opacity:0.10;
  filter:grayscale(0%) brightness(0.85);
}
.corner-art:hover{ opacity:0.22; transform:translateY(-2px) }
.corner-art.top{
  top:18px;
  bottom:auto;
  right:18px;
  left:auto;
  transform:none;
  width:140px;
}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}
.overlay-box{background:#fff;color:#111;padding:16px 18px;border-radius:8px;max-width:560px;width:90%;box-shadow:0 10px 30px rgba(0,0,0,0.25);font-weight:700}
body.dark .overlay-box{background:#050505;color:#f5f5f5}

.book-sheet{position:fixed;left:0;right:0;bottom:0;background:var(--bg);color:var(--fg);border-top:1px solid #e6e6e6;box-shadow:0 -8px 24px rgba(0,0,0,0.18);z-index:1000;border-top-left-radius:16px;border-top-right-radius:16px}
.book-inner{max-width:980px;margin:0 auto;padding:10px}
.book-header{display:flex;justify-content:space-between;align-items:center;font-weight:700}
.book-form{display:flex;gap:8px;align-items:flex-start;margin-top:8px}
.book-form input,.book-form textarea{flex:1;border:1px solid #e6e6e6;border-radius:6px;padding:8px;background:#fff}
.book-actions{display:flex;gap:8px}
.book-list{margin-top:10px;max-height:200px;overflow:auto}
.book-list .item{padding:8px;border:1px solid #e6e6e6;border-radius:6px;margin-bottom:8px}
body.dark .book-sheet{background:#050505;border-color:#333333;color:#f5f5f5}
body.dark .book-form input,
body.dark .book-form textarea{
  background:#050505;
  border-color:#333333;
  color:#f5f5f5;
}
body.dark .book-list .item{
  background:#050505;
  border-color:#333333;
}

@media (max-width: 720px){
  body{
    padding:8px;
  }
  .app{
    padding:10px;
    border-radius:12px;
    box-shadow:0 8px 20px rgba(0,0,0,0.22);
  }
  .controls{
    flex-direction:column;
  }
  .right{
    width:100%;
    padding:8px;
    order:-1;
  }
  .row.actions{
    gap:6px;
  }
  .row.actions > button,
  .row.actions > input{
    flex:1 1 calc(50% - 6px);
  }
  #waveBtn,
  #waveListBtn,
  #bgToggle{
    border-radius:999px;
  }
  .visual{
    height:160px;
  }
  .corner-art{
    display:none;
  }
  .book-inner{
    padding:8px 10px 10px;
  }
}