:root{
    --w:255,255,255;
    --bg:#edf4f1;
    --bg-soft:rgba(var(--w),.64);
    --panel:rgba(var(--w),.58);
    --pad:rgba(var(--w),.72);
    --pad-hover:rgba(var(--w),.96);
    --border:rgba(42,73,67,.12);
    --border-strong:rgba(42,73,67,.24);
    --text:#203c37;
    --text-dim:#6d8780;
    --accent:#ef765e;
    --accent-2:#4d9e91;
    --accent-soft:rgba(239,118,94,.12);
    --remove:#d95752;
    --grad:linear-gradient(135deg,#ffb27d 0%,#ed7663 100%);
    --glass-shadow:0 20px 50px -32px rgba(42,73,67,.38);
    --font-ui:'Space Grotesk',system-ui,sans-serif;
    --font-mono:'JetBrains Mono',ui-monospace,monospace;
    --bs-body-bg:var(--bg);
    --bs-body-color: var(--text);
    --bs-border-color: var(--border);
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    background:
      radial-gradient(800px 560px at 92% -18%,rgba(255,190,145,.58),transparent 64%),
      radial-gradient(700px 540px at -12% 30%,rgba(148,218,203,.5),transparent 66%),
      linear-gradient(135deg,#eef7f3 0%,#eaf1f5 52%,#f8eee9 100%);
    color:var(--text);
    font-family:var(--font-ui);
    -webkit-font-smoothing:antialiased;
    min-height:100%;
  }
  ::selection{background:rgba(239,118,94,.22);}
  a{color:inherit; text-decoration:none;}
  .font-mono{font-family:var(--font-mono);}

  /* ---------- topbar ---------- */
  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 28px;
    border-bottom:1px solid rgba(var(--w),.72);
    position:sticky;
    top:0;
    z-index:40;
    background:rgba(var(--w),.42);
    backdrop-filter:blur(20px) saturate(130%);
    box-shadow:0 8px 28px -24px rgba(42,73,67,.4);
  }
  .brand{display:flex; align-items:center; border:0; padding:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer;}
  .brand-logo{width:136px; height:38px; flex:0 0 136px; background:url('/beatipy-orange.png') center / contain no-repeat;}
  .brand h1{
    font-size:21px; font-weight:700; letter-spacing:-.04em; margin:0;
    background:linear-gradient(135deg,#dc6958,#b94f61);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .topbar-tagline{color:var(--text-dim); font-size:12px; display:none; margin:0 auto 0 11px;}
  @media(min-width:901px){ .topbar-tagline{display:inline;} }
  .menu-btn{
    border:1px solid var(--border-strong);
    background:rgba(var(--w),.58);
    color:var(--text);
    border-radius:12px;
    padding:9px 13px;
    font:600 12px var(--font-ui);
    box-shadow:var(--glass-shadow);
  }
  .topbar-controls{display:flex; align-items:center; gap:12px; min-width:0; margin-left:auto;}
  .account-link{max-width:180px; overflow:hidden; color:var(--text-dim); font-size:12px; font-weight:600; text-overflow:ellipsis; white-space:nowrap;}
  .account-link:hover{color:var(--text);}
  .account-link.has-avatar{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; max-width:none; flex:0 0 36px; padding:0; border-radius:50%; overflow:hidden; background:var(--accent); color:#fff; font-size:15px; font-weight:700; border:2px solid rgba(var(--w),.25);}
  .account-link.has-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
  .topbar .master-volume{margin:0; gap:7px; min-width:0;}
  .topbar .master-volume label{font-size:10px; white-space:nowrap;}
  .topbar .master-volume input{width:min(125px,18vw);}
  .topbar .master-volume output{min-width:37px;}
  @media(max-width:575.98px){
    .topbar{display:flex; justify-content:space-between; padding:12px 14px; gap:8px;}
    .brand{justify-self:auto;}
    .brand-logo{width:112px; height:34px; flex-basis:112px; background-position:center; background-size:contain;}
    .topbar .master-volume{display:none;}
    .topbar-controls{margin-left:auto; gap:7px;}
    .account-link{max-width:95px; font-size:11px;}
    .account-link.has-avatar{max-width:none;}
    .topbar .master-volume label{display:none;}
    .topbar .master-volume input{width:78px;}
    .topbar .master-volume output{font-size:10px; min-width:34px;}
    .menu-btn{width:40px; height:38px; padding:0; display:grid; place-items:center; font-size:0;}
    .menu-icon{display:grid; gap:4px;}
    .menu-icon i{display:block; width:18px; height:2px; border-radius:2px; background:currentColor;}
  }
  @media(max-width:900px){
    .topbar{display:grid; grid-template-columns:1fr; grid-template-rows:auto auto; row-gap:8px;}
    .brand{grid-column:1; grid-row:1; justify-self:center;}
    .topbar-tagline{display:none;}
    .topbar-controls{grid-column:1; grid-row:2; justify-self:center; margin-left:0;}
  }
  @media(max-width:575.98px){
    .topbar{display:flex; justify-content:space-between;}
    .brand{grid-column:auto; grid-row:auto; justify-self:auto;}
    .topbar-controls{grid-column:auto; grid-row:auto; justify-self:auto; margin-left:auto;}
  }

  /* ---------- layout ---------- */
  .layout{display:flex; align-items:flex-start;}
  @media(max-width:991.98px){ .layout{flex-direction:column;} }

  /* ---------- sidebar ---------- */
  .sidebar{
    --bs-offcanvas-width: 270px;
    background:rgba(var(--w),.52);
    border-right:1px solid var(--border);
    backdrop-filter:blur(18px) saturate(130%);
  }
  @media(max-width:991.98px){
    .sidebar{
      border-right:none;
      border-left:1px solid var(--border);
      z-index:1050;
    }
  }
  @media(min-width:992px){
    .sidebar{
      flex:0 0 250px;
      width:250px;
      height:calc(100vh - 57px);
      position:sticky;
      top:57px;
      overflow-y:auto;
      border-right:1px solid rgba(var(--w),.76);
      box-shadow:8px 0 32px -28px rgba(42,73,67,.42);
    }
  }
  .sidebar .offcanvas-header{border-bottom:1px solid var(--border);}
  .side-nav{padding:20px 14px; display:flex; flex-direction:column; gap:4px;}
  .side-link{
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 12px;
    border-radius:12px;
    color:var(--text-dim);
    font-size:14px;
    font-weight:500;
    border:1px solid transparent;
    cursor:pointer;
    background:transparent;
    text-align:left;
    width:100%;
  }
  .side-link .ic{font-size:16px; width:20px; text-align:center;}
  .side-link .lbl{flex:1;}
  .side-link .cnt{
    background:var(--accent);
    color:#fff;
    font-size:12.5px;
    font-weight:800;
    border-radius:999px;
    min-width:22px;
    padding:2px 8px;
    text-align:center;
    line-height:1.4;
    text-shadow:0 1px 1px rgba(0,0,0,.35);
  }
  .side-link:hover{color:var(--text); background:rgba(var(--w),.64);}
  .side-link.active{
    color:#c85f52;
    background:var(--accent-soft);
    border-color:rgba(239,118,94,.28);
  }

  /* ---------- content ---------- */
  .content{flex:1; min-width:0; padding:34px 24px 64px;}
  @media(min-width:992px){ .content{padding:52px 48px 100px;} }

  .hero{max-width:680px; padding:12px 0 18px;}
  .hero h2{font-size:clamp(32px,4.5vw,54px); line-height:1.02; margin:0 0 18px; letter-spacing:-.06em; max-width:600px;}
  .hero p{color:var(--text-dim); font-size:15px; line-height:1.7; margin:0 0 30px; max-width:600px;}
  .step-card{
    background:rgba(var(--w),.48);
    border:1px solid var(--border);
    border-radius:16px;
    padding:16px 18px;
    display:flex;
    width:100%;
    gap:12px;
    align-items:center;
    margin-bottom:9px;
    box-shadow:var(--glass-shadow);
    transition:transform .2s ease, border-color .2s ease, background .2s ease;
    color:inherit;
    font:inherit;
    text-align:left;
    cursor:pointer;
  }
  .step-card:hover{transform:translateX(4px); border-color:rgba(239,118,94,.28); background:rgba(var(--w),.78);}
  .step-card .num{
    flex:0 0 auto;
    width:26px; height:26px;
    border-radius:8px;
    background:var(--grad);
    color:#fff;
    font-weight:700;
    font-size:12px;
    display:flex; align-items:center; justify-content:center;
  }
  .step-card .txt{font-size:13.5px; color:var(--text-dim); line-height:1.5;}
  .step-card .txt b{color:var(--text); font-weight:600;}
  .onboarding-highlight{
    outline:3px solid transparent;
    outline-offset:3px;
    animation:onboarding-spotlight 4s linear;
  }
  @keyframes onboarding-spotlight{
    0%,100%{outline-color:transparent; box-shadow:0 0 0 0 transparent;}
    5%,80%{outline-color:var(--accent); box-shadow:0 0 0 6px rgba(239,118,94,.16),0 0 28px 8px rgba(239,118,94,.38);}
  }
  @keyframes onboarding-spotlight-reduced{
    0%,80%{outline-color:var(--accent); box-shadow:0 0 0 6px rgba(239,118,94,.16),0 0 28px 8px rgba(239,118,94,.38);}
    100%{outline-color:transparent; box-shadow:0 0 0 0 transparent;}
  }

  .cat-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap;}
  .cat-head h2{font-size:29px; margin:0; letter-spacing:-.05em;}
  .lucky-bar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0 4px;}
  .lucky-bar .btn-lex{flex:0 0 auto; white-space:nowrap; padding:9px 14px;}
  .lucky-note{color:var(--text-dim); font-size:12px;}
  .genre-search{display:flex; align-items:center; gap:6px; flex:1 1 220px; max-width:340px; min-width:180px;}
  .genre-search .btn-lex{flex:0 0 auto; white-space:nowrap; padding:9px 14px;}
  .genre-search-input{
    flex:1 1 auto; min-width:110px; padding:9px 13px; border-radius:11px;
    border:1px solid var(--border-strong); background:rgba(var(--w),.58);
    color:var(--text); font:500 13px var(--font-ui); outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .genre-search-input::placeholder{color:var(--text-dim);}
  .genre-search-input:focus{border-color:var(--accent-2); box-shadow:0 0 0 3px rgba(77,158,145,.18);}
  @media(max-width:575.98px){
    .genre-search{flex:1 1 100%; max-width:none;}
  }
  .cat-head .hint{color:var(--text-dim); font-size:12px;}
  .cat-sub{color:var(--text-dim); font-size:13.5px; margin:8px 0 26px; max-width:560px;}

  .dim-card{
    background:rgba(var(--w),.52);
    border:1px solid var(--border);
    border-radius:18px;
    padding:20px;
    margin-bottom:16px;
    box-shadow:var(--glass-shadow);
    backdrop-filter:blur(14px) saturate(120%);
  }
  .dim-title{
    display:flex; align-items:center; gap:8px;
    font-size:11.5px; font-weight:600; letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--text-dim);
    margin:0 0 14px;
  }
  .dim-title .rule{flex:1; height:1px; background:var(--border);}

  .version-tag{position:fixed; left:10px; bottom:8px; z-index:5; padding:3px 9px; border:1px solid var(--border); border-radius:999px; background:rgba(var(--w),.7); color:var(--text-dim); font-size:11px; font-weight:600; pointer-events:none;}
  .pad-grid{display:flex; flex-wrap:wrap; gap:8px;}
  .pad{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 15px;
    background:rgba(var(--w),.56);
    border:1px solid var(--border);
    border-radius:11px;
    cursor:pointer;
    font-family:var(--font-ui);
    font-size:13.5px;
    color:var(--text);
    transition:background .16s ease, border-color .16s ease, transform .08s ease, box-shadow .16s ease;
  }
  .pad:hover{background:var(--pad-hover); border-color:rgba(77,158,145,.36); box-shadow:0 8px 20px -18px rgba(42,73,67,.65);}
  .pad:active{transform:scale(.96);}
  .pad.selected{
    background:var(--grad);
    border-color:transparent;
    color:#fff;
    font-weight:600;
    box-shadow:0 8px 20px -8px rgba(239,118,94,.58);
  }

  /* ---------- prompt panel ---------- */
  .prompt-panel{
    flex:0 0 360px;
    width:360px;
    padding:32px 22px 40px;
    border-left:1px solid rgba(var(--w),.78);
    background:rgba(var(--w),.3);
    backdrop-filter:blur(18px) saturate(125%);
  }
  .prompt-peek{display:none;}
  @media(min-width:992px){
    .layout{padding-right:376px;}
    .prompt-panel{
      position:fixed;
      z-index:35;
      top:80px;
      right:16px;
      bottom:16px;
      height:auto;
      overflow-y:auto;
      border:1px solid rgba(var(--w),.82);
      border-radius:16px;
      box-shadow:0 18px 42px -28px rgba(42,73,67,.55);
    }
  }
  @media(max-width:991.98px){
    .prompt-panel{width:100%; flex:none; border-left:none; border-top:1px solid rgba(var(--w),.78); padding:30px 20px 44px;}
    .prompt-peek{
      position:fixed;
      display:flex;
      flex-direction:column;
      gap:4px;
      left:12px;
      right:12px;
      bottom:calc(12px + env(safe-area-inset-bottom));
      z-index:34;
      padding:11px 14px;
      border:1px solid var(--border-strong);
      border-radius:12px;
      background:rgba(242,246,244,.96);
      box-shadow:0 10px 30px -16px rgba(32,60,55,.5);
      color:var(--text);
      text-align:left;
      cursor:pointer;
      backdrop-filter:blur(16px);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transform:translateY(12px) scale(.985);
      transform-origin:center bottom;
      transition:opacity .12s linear, transform .36s cubic-bezier(.2,.75,.25,1), visibility .36s;
    }
    .prompt-peek.is-visible{opacity:var(--peek-opacity,1); visibility:visible; pointer-events:auto; transform:translateY(0) scale(1);}
    .prompt-peek-title{font-size:11px; font-weight:700; color:var(--text-dim); text-transform:uppercase;}
    .prompt-peek-text{display:-webkit-box; overflow:hidden; color:#667873; font:11px/1.45 var(--font-mono); line-clamp:2; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
  }
  .prompt-heading{display:flex;align-items:center;justify-content:space-between;min-height:30px;margin-bottom:4px;}
  .panel-eyebrow{font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); margin:0;}
  .clear-prompt-btn{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--text-dim);font-size:16px;line-height:1;cursor:pointer;}
  .clear-prompt-btn:hover{border-color:rgba(173,72,66,.25);background:rgba(173,72,66,.08);color:#ad4842;}
  .clear-prompt-btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;}
  .clear-prompt-btn[hidden]{display:none;}
  .prompt-tools{display:flex;align-items:center;gap:2px;}
  .prompt-tools .clear-prompt-btn:disabled{opacity:.35;cursor:default;pointer-events:none;}
  .prompt-tools .hist-btn:hover{border-color:var(--border-strong);background:var(--pad-hover);color:var(--text);}
  .plan-original{color:var(--text-dim);font-size:13px;font-weight:500;text-decoration:line-through;margin-left:6px;}
  .plan-badge{display:inline-block;padding:2px 7px;border-radius:999px;background:var(--accent-2);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.04em;}
  .panel-lead{font-size:16px; font-weight:600; margin:0 0 18px;}
  .prompt-box{
    background:rgba(var(--w),.52);
    border:1px solid var(--border);
    border-radius:14px;
    padding:17px;
    font-family:var(--font-mono);
    font-size:13px;
    line-height:1.65;
    color:var(--text);
    min-height:110px;
    box-shadow:inset 0 1px 0 rgba(var(--w),.62),var(--glass-shadow);
    white-space:pre-wrap;
    word-break:break-word;
    user-select:none;
    -webkit-user-select:none;
  }
  .prompt-box-wrap{position:relative;}
  .copied-flash{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; border-radius:inherit; background:rgba(var(--w),.0); color:var(--accent); font-size:26px; font-weight:800; letter-spacing:.04em; pointer-events:none; opacity:0; transition:opacity .2s; backdrop-filter:blur(3px);}
  .copied-flash.show{opacity:1;}
  .prompt-box.placeholder{color:var(--text-dim);}
  .prompt-count{
    color:var(--text-dim);
    font:500 11px var(--font-mono);
    text-align:right;
    margin:7px 2px 0;
  }
  .tempo-control{margin-top:18px;}
  .tempo-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;}
  .tempo-label{color:var(--text-dim); font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;}
  .tempo-value{color:var(--text); font:600 12px var(--font-mono);}
  .tempo-row{display:flex; align-items:center; gap:10px;}
  .tempo-slider{flex:1; accent-color:var(--accent); cursor:pointer;}
  .tempo-stop{flex:0 0 auto; padding:6px 9px; font-size:11px;}
  .tempo-stop.active{background:var(--accent); border-color:#ffad8c; color:#fff; box-shadow:0 0 0 3px rgba(239,118,94,.2),0 0 18px 5px rgba(239,118,94,.62),inset 0 0 10px rgba(var(--w),.28);}
  .panel-actions{display:flex; gap:8px; margin-top:12px;}
  .btn-lex{
    flex:1;
    padding:10px 14px;
    border-radius:12px;
    border:1px solid var(--border-strong);
    background:rgba(var(--w),.58);
    color:var(--text);
    font-family:var(--font-ui);
    font-size:13px;
    font-weight:600;
  }
  .btn-lex:hover{background:var(--pad-hover); color:var(--text);}
  .btn-lex.primary{background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 9px 22px -12px rgba(239,118,94,.7);}
  .btn-lex.primary:hover{filter:brightness(1.04); color:#fff;}
  .btn-lex.ghost{background:rgba(var(--w),.3); color:var(--text-dim); border-color:var(--border);}
  .btn-lex:disabled{opacity:.45; cursor:not-allowed;}
  .mix-preview-controls{display:flex;align-items:center;gap:8px;margin:0 0 16px;}
  .mix-preview-controls .btn-lex{flex:0 0 42px;width:42px;height:42px;padding:0;display:grid;place-items:center;font-size:15px;}
  .mix-preview-status{margin:0;color:var(--text-dim);font-size:12px;}
  .mix-preview-guide{margin:0 0 16px;padding:0 0 10px;border-bottom:1px solid var(--border);}
  .mix-preview-guide summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:8px 11px;border:1px solid var(--border-strong);border-radius:8px;background:rgba(var(--w),.52);color:var(--text);font-size:13px;font-weight:700;cursor:pointer;list-style:none;}
  .mix-preview-guide summary::-webkit-details-marker{display:none;}
  .mix-preview-guide summary::after{content:'+';color:var(--accent-2);font-size:18px;line-height:1;}
  .mix-preview-guide[open] summary::after{content:'−';}
  .mix-preview-guide-action{margin-left:auto;color:var(--accent-2);font-size:11px;font-weight:600;}
  .mix-preview-guide-hide{display:none;}
  .mix-preview-guide[open] .mix-preview-guide-show{display:none;}
  .mix-preview-guide[open] .mix-preview-guide-hide{display:inline;}
  .mix-preview-guide-body{max-height:170px;margin-top:8px;overflow-y:auto;overscroll-behavior:contain;}
  .mix-preview-guide-body > p{margin:0;color:var(--text-dim);font-size:12px;line-height:1.5;}
  .mix-preview-guide ul{display:grid;gap:6px;margin:10px 0 0;padding:0;list-style:none;}
  .mix-preview-guide li{color:var(--text-dim);font-size:12px;line-height:1.5;}
  .mix-preview-guide strong{color:var(--text);}
  .loop-stack{margin-top:14px;padding:12px 12px 11px;border:1px solid var(--border-strong);border-radius:12px;background:rgba(var(--w),.3);}
  .loop-stack-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
  .loop-stack-label{color:var(--text-dim);font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;}
  .loop-stack-meta{color:var(--text);font:600 11px var(--font-mono);text-align:right;}
  .loop-stack-row{display:flex;gap:8px;}
  .loop-stack-row .btn-lex{flex:1;}
  #loopPlayBtn.active{background:var(--accent);border-color:#ffad8c;color:#fff;box-shadow:0 0 0 3px rgba(239,118,94,.2),0 0 18px 5px rgba(239,118,94,.55);}
  .loop-stack-note{margin:10px 0 0;color:var(--text-dim);font-size:11px;line-height:1.5;}
  .scale-open-button{display:block;width:100%;margin-top:8px;flex:none;}
  .scale-dialog-card{width:min(100%,560px);max-height:min(90vh,680px);overflow-y:auto;text-align:left;}
  .scale-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;}
  .scale-dialog-head h2{margin:0;}
  .scale-close{flex:0 0 auto;padding:6px 10px;}
  .scale-dialog-copy{margin:8px 0 18px!important;}
  .scale-mode-groups{display:grid;gap:10px;max-height:250px;margin:0 0 16px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;}
  .scale-mode-category{margin:0;}
  .scale-mode-category h3{margin:0 0 5px;color:var(--text-dim);font-size:11px;text-transform:uppercase;}
  .scale-mode-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;}
  .scale-mode-choice{display:grid;gap:3px;min-height:52px;padding:7px 9px;border:1px solid var(--border);border-radius:7px;background:rgba(var(--w),.5);color:var(--text);text-align:left;cursor:pointer;}
  .scale-mode-choice[aria-pressed="true"]{border-color:var(--accent-2);background:#e2f0e8;box-shadow:inset 0 0 0 1px var(--accent-2);}
  .scale-mode-name{font-size:11px;font-weight:700;}
  .scale-mode-description{color:var(--text-dim);font-size:10px;line-height:1.35;}
  .scale-keyboard{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));height:150px;margin:20px 0 12px;}
  .scale-key{font-family:var(--font-ui);font-size:12px;font-weight:700;cursor:pointer;}
  .scale-key.white{display:flex;align-items:flex-end;justify-content:center;grid-row:1;padding:0 0 10px;border:1px solid var(--border-strong);border-radius:0 0 6px 6px;background:#fff;color:var(--text);}
  .scale-key.white+.scale-key.white{border-left:0;}
  .scale-key.black{position:absolute;top:0;z-index:2;width:8%;height:62%;transform:translateX(-50%);padding:0 0 8px;border:1px solid #111;border-radius:0 0 5px 5px;background:#242a29;color:#fff;box-shadow:0 3px 5px rgba(0,0,0,.22);}
  .scale-key.white.in-scale{border-color:#74aa8d;background:#c9e8d5;color:#184b35;}
  .scale-key.black.in-scale{background:#547d76;}
  .scale-key.black:not(.in-scale){border-color:#69716f;background:#929896;color:#fff;box-shadow:0 2px 3px rgba(0,0,0,.12);}
  .scale-key.root{outline:3px solid var(--accent-2);outline-offset:-3px;}
  .scale-preview-status{min-height:20px;margin:12px 0 0!important;font-size:12px!important;}

  .chips-title{font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); margin:26px 0 10px;}
  .chips{display:flex; flex-wrap:wrap; gap:6px;}
  .chip{
    display:flex; align-items:center; gap:6px;
    background:rgba(var(--w),.58);
    border:1px solid var(--border);
    border-radius:999px;
    padding:5px 6px 5px 12px;
    font-size:12px;
    color:var(--text-dim);
  }
  .chip b{color:var(--text); font-weight:500;}
  .chip button{
    border:none; background:transparent; color:var(--text-dim); cursor:pointer;
    width:16px; height:16px; display:flex; align-items:center; justify-content:center;
    border-radius:50%; font-size:13px; line-height:1;
  }
  .chip button:hover{background:var(--remove); color:#fff;}
  .empty-chips{color:var(--text-dim); font-size:12.5px; margin-top:24px;}

  .toast{
    position:fixed; bottom:20px; left:50%;
    transform:translateX(-50%) translateY(12px);
    background:var(--grad); color:#fff;
    padding:9px 16px; border-radius:999px;
    font-size:13px; font-weight:600;
    opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    z-index:60;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  .genre-preview{
    position:fixed;
    right:16px;
    bottom:16px;
    width:300px;
    background:var(--panel);
    border:1px solid var(--border-strong);
    border-radius:16px;
    padding:12px;
    display:flex;
    gap:10px;
    align-items:flex-start;
    box-shadow:0 12px 30px -10px rgba(0,0,0,.6);
    opacity:0;
    transform:translateY(10px);
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    z-index:70;
  }
  .genre-preview.show{opacity:1; transform:translateY(0); pointer-events:auto;}
  .genre-preview-close{
    position:absolute; top:6px; right:6px;
    width:20px; height:20px; border:none; border-radius:50%;
    background:var(--pad); color:var(--text-dim);
    font-size:13px; line-height:1; cursor:pointer;
  }
  .genre-preview-close:hover{background:var(--remove); color:#fff;}
  .genre-preview-next{
    align-self:flex-end; margin-top:9px;
    border:1px solid var(--border-strong); border-radius:10px;
    background:var(--pad); color:var(--text);
    font:600 12px var(--font-ui); padding:8px 14px; cursor:pointer;
    letter-spacing:.02em;
  }
  .genre-preview-next:hover{border-color:var(--accent-2); color:var(--accent-2); background:var(--pad-hover);}
  .genre-preview-art{
    width:64px; height:64px; border-radius:10px; flex:0 0 auto;
    object-fit:cover; background:var(--pad);
  }
  .genre-preview-body{min-width:0; flex:1; display:flex; flex-direction:column; padding-right:24px;}
  .genre-preview-genre{
    margin:0 0 2px; font-size:10.5px; font-weight:700; letter-spacing:.05em;
    text-transform:uppercase; color:var(--accent);
  }
  .genre-preview-track{
    margin:0; font-size:13px; font-weight:600; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .genre-preview-artist{
    margin:1px 0 8px; font-size:11.5px; color:var(--text-dim);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .genre-preview-bar{height:3px; border-radius:2px; background:var(--border-strong); overflow:hidden;}
  .genre-preview-fill{height:100%; width:0%; background:var(--grad); transition:width .1s linear;}
  @media(max-width:575.98px){
    .genre-preview{ left:12px; right:12px; width:auto; bottom:12px; }
  }

  .limit-dialog{
    position:fixed;
    inset:0;
    display:grid;
    place-items:center;
    padding:20px;
    background:rgba(32,60,55,.24);
    backdrop-filter:blur(6px);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    z-index:70;
  }
  .limit-dialog.show{opacity:1; pointer-events:auto;}
  .limit-dialog-card{
    width:min(100%,380px);
    padding:24px;
    border:1px solid var(--border);
    border-radius:16px;
    background:rgba(var(--w),.9);
    box-shadow:0 24px 60px -24px rgba(42,73,67,.5);
    text-align:center;
  }
  .limit-dialog-card h2{font-size:20px; margin:0 0 9px;}
  .limit-dialog-card p{color:var(--text-dim); font-size:13.5px; line-height:1.55; margin:0 0 18px;}
  .dialog-actions{display:flex; gap:10px;}
  .paywall-card{width:min(100%,620px);max-height:min(90vh,760px);overflow-y:auto;text-align:left;}
  .paywall-card h2{margin:0 0 8px;}
  .paywall-card > p{margin-bottom:18px;}
  .plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0 14px;}
  .paywall-card [hidden],.account-section [hidden]{display:none!important;}
  .plan-choice{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:155px;padding:15px;border:1px solid var(--border-strong);border-radius:10px;background:rgba(var(--w),.72);color:var(--text);text-align:left;cursor:pointer;}
  .plan-choice:hover{border-color:var(--accent-2);background:var(--pad-hover);}
  .plan-choice strong{font-size:14px;}
  .plan-price{font-size:21px;font-weight:700;}
  .plan-note{color:var(--text-dim);font-size:11px;line-height:1.4;}
  .plan-cta{align-self:stretch;margin-top:auto;padding:8px 10px;border-radius:7px;background:var(--accent-2);color:#fff;text-align:center;font-size:12px;font-weight:700;}
  .manual-prompt-note{margin:14px 0 0!important;padding-top:12px;border-top:1px solid var(--border);font-size:12px!important;}
  .paywall-login{color:var(--accent-2);font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px;}
  @media(max-width:575.98px){.plan-grid{grid-template-columns:1fr;}.plan-choice{min-height:0;display:grid;grid-template-columns:1fr auto;align-items:center;}.plan-note{grid-column:1/-1;}}
  .tutorial-backdrop{
    position:fixed;
    inset:0;
    display:grid;
    place-items:end center;
    padding:20px;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    z-index:80;
  }
  .tutorial-backdrop.show{opacity:1;}
  .tutorial-card{
    width:min(100%,420px);
    padding:22px;
    border:1px solid rgba(42,73,67,.18);
    border-radius:14px;
    background:rgba(241,244,243,.98);
    box-shadow:0 24px 60px -24px rgba(32,60,55,.48);
    pointer-events:auto;
  }
  .tutorial-highlight{
    outline:3px solid var(--accent);
    outline-offset:3px;
    animation:tutorial-pulse 2.4s ease-in-out infinite;
  }
  @keyframes tutorial-pulse{
    0%,100%{outline-color:rgba(239,118,94,.55); box-shadow:0 0 0 5px rgba(239,118,94,.10),0 0 16px 4px rgba(239,118,94,.2);}
    50%{outline-color:var(--accent); box-shadow:0 0 0 6px rgba(239,118,94,.16),0 0 28px 8px rgba(239,118,94,.38);}
  }
  @media(prefers-reduced-motion:reduce){
    .tutorial-highlight{animation:none; outline-color:var(--accent); box-shadow:0 0 0 6px rgba(239,118,94,.16),0 0 28px 8px rgba(239,118,94,.38);}
  }
  .tutorial-meta{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; color:var(--text-dim); font:500 11px var(--font-mono);}
  .tutorial-meta p{margin:0; font-weight:600; text-transform:uppercase;}
  .tutorial-card h2{font-size:21px; margin:0 0 9px;}
  .tutorial-card > p{min-height:76px; margin:0 0 22px; color:#667873; font-size:14px; line-height:1.6;}
  .tutorial-actions{display:flex; align-items:center; justify-content:space-between; gap:12px;}
  .tutorial-nav{display:flex; gap:8px;}
  .tutorial-nav .btn-lex{min-width:86px;}
  @media(max-width:420px){
    .tutorial-actions{align-items:stretch; flex-direction:column-reverse;}
    .tutorial-nav .btn-lex{flex:1;}
  }
  @media(prefers-reduced-motion:reduce){ .tutorial-backdrop{transition:none;} }
  @media(max-width:991.98px) and (prefers-reduced-motion:reduce){ .prompt-peek{transition:none;} }

  footer.credit{
    text-align:center; color:var(--text-dim); font-size:11.5px;
    padding:20px; border-top:1px solid rgba(var(--w),.76);
  }
  .master-volume{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:10px;}
  .master-volume label{font:600 11px var(--font-mono);}
  .master-volume input{width:min(180px,45vw); accent-color:var(--accent); cursor:pointer;}
  .master-volume output{min-width:42px; font:500 11px var(--font-mono);}

  button:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px;}

  @media(prefers-reduced-motion:reduce){
    .onboarding-highlight{animation:onboarding-spotlight-reduced 4s linear;}
  }
  /* ---------- dark theme ---------- */
  html[data-theme="dark"]{
    color-scheme:dark;
    --w:34,46,50;
    --bg:#0f1a1d;
    --border:rgba(190,230,222,.14);
    --border-strong:rgba(190,230,222,.28);
    --text:#e3f1ed;
    --text-dim:#92aca6;
    --accent-soft:rgba(239,118,94,.2);
    --glass-shadow:0 20px 50px -32px rgba(0,0,0,.8);
  }
  html[data-theme="dark"] body{
    background:
      radial-gradient(800px 560px at 92% -18%,rgba(239,118,94,.18),transparent 64%),
      radial-gradient(700px 540px at -12% 30%,rgba(77,158,145,.2),transparent 66%),
      linear-gradient(135deg,#0c1518 0%,#101c20 52%,#171520 100%);
  }
  html[data-theme="dark"] .prompt-peek-text,
  html[data-theme="dark"] .tutorial-card > p{color:var(--text-dim);}
  html[data-theme="dark"] .tutorial-card{
    background:rgba(20,30,34,.97);
    border-color:rgba(190,230,222,.18);
    box-shadow:0 24px 60px -24px rgba(0,0,0,.7);
  }
  html[data-theme="dark"] .tutorial-card h2{color:var(--text);}
  html[data-theme="dark"] .tutorial-meta{color:var(--text-dim);}
  html[data-theme="dark"] .scale-mode-choice[aria-pressed="true"]{background:#1d3a35;}
  html[data-theme="dark"] .brand-logo{filter:brightness(1.15);}
  html[data-theme="dark"] .scale-key.white{background:#cfd9d6;color:#183;}
  html[data-theme="dark"] .scale-key.white.in-scale{background:#7fc4a0;color:#0b2a1d;}
  .theme-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:12px; cursor:pointer;
    border:1px solid var(--border-strong); background:rgba(var(--w),.58);
    color:var(--text); font-size:17px; line-height:1;
    box-shadow:var(--glass-shadow); transition:transform .15s ease;
  }
  .theme-toggle:hover{transform:scale(1.07);}
  .analyser-wrap{
    margin-top:18px; padding:10px; border-radius:14px;
    border:1px solid var(--border); background:rgba(var(--w),.5);
    box-shadow:var(--glass-shadow);
  }
  .analyser-head{display:flex; justify-content:space-between; align-items:center; margin:0 0 6px; font:500 10.5px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim);}
  .analyser-axis{position:relative; height:14px; margin-top:4px; font:500 9.5px var(--font-mono); color:var(--text-dim);}
  .analyser-axis span{position:absolute; transform:translateX(-50%);}
  .analyser-axis span:first-child{transform:none;}
  .analyser-axis span:last-child{transform:translateX(-100%);}
  #spectrum{display:block; width:100%; height:110px; border-radius:8px;}
  .spectrum-peek,.spectrum-sheet{display:none;}
  @media(max-width:991.98px){
    .prompt-peek{right:84px; height:72px; justify-content:center;}
    .spectrum-peek{
      position:fixed; display:grid; place-items:center; right:12px;
      bottom:calc(12px + env(safe-area-inset-bottom)); z-index:34;
      width:64px; height:72px;
      border:1px solid var(--border-strong); border-radius:12px;
      background:rgba(var(--w),.96); color:var(--accent-2);
      box-shadow:0 10px 30px -16px rgba(32,60,55,.5); cursor:pointer;
      opacity:0; visibility:hidden; pointer-events:none;
      transition:opacity .2s, visibility .2s;
    }
    .spectrum-peek.is-visible{opacity:1; visibility:visible; pointer-events:auto;}
    .spectrum-sheet{
      position:fixed; display:block; left:12px; right:12px;
      bottom:calc(96px + env(safe-area-inset-bottom)); z-index:35;
      padding:12px; border:1px solid var(--border-strong); border-radius:14px;
      background:rgba(var(--w),.97); box-shadow:0 18px 42px -20px rgba(0,0,0,.5);
      backdrop-filter:blur(16px);
      opacity:0; visibility:hidden; transform:translateY(12px);
      transition:opacity .2s, transform .25s, visibility .25s;
    }
    .spectrum-sheet.is-open{opacity:1; visibility:visible; transform:none;}
    .spectrum-sheet canvas{display:block; width:100%; height:140px; border-radius:8px;}
    .spectrum-sheet-close{border:0; background:transparent; color:var(--text-dim); font-size:20px; line-height:1; cursor:pointer; padding:0 4px;}
  }