:root{
    --bg: #FAF6F0;
    --card-bg: #FFFFFF;
    --wood-light: #D9AE7E;
    --wood-dark: #B8895E;
    --fret-line: #8B7355;
    --nut: #3E2E23;
    --dot: #E85D4E;
    --ink: #3E2E23;
    --sub-ink: #7A6A5D;
    --tag-beginner: #7FB069;
    --tag-high: #5B8C9E;
    --tag-jazz: #8B6BA8;
    --tag-bright: #F0A868;
    --shadow: 0 4px 14px rgba(62,46,35,0.10);
  }
  *{ box-sizing: border-box; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--ink);
    font-family: "M PLUS 1p", "Hiragino Sans", "Yu Gothic", "Segoe UI", sans-serif;
    padding-bottom: 60px;
  }
  header{
    padding: 28px 20px 18px;
    text-align:center;
  }
  header h1{
    margin:0;
    font-size: 1.6rem;
    letter-spacing: 0.04em;
  }
  header h1 span{ color: var(--dot); }
  header .tagline-main{
    margin: 8px 0 0;
    color: var(--sub-ink);
    font-size: 0.85rem;
    font-weight: 700;
  }
  header .tagline-sub{
    margin: 2px 0 0;
    color: var(--sub-ink);
    font-size: 0.8rem;
  }
  .lang-row{
    display:flex;
    justify-content:center;
    align-items:center;
    gap: 8px;
    margin-top: 14px;
  }
  .tabs{
    display:flex;
    justify-content:center;
    gap: 8px;
    margin: 10px 0 24px;
  }
  .tabs button{
    border:none;
    background: #F1E7DA;
    color: var(--sub-ink);
    padding: 9px 20px;
    border-radius: 999px;
    font-size: 0.9rem;
    cursor:pointer;
    transition: all .15s;
  }
  .tabs button.active{
    background: var(--nut);
    color: #fff;
  }
  main{
    max-width: 920px;
    margin: 0 auto;
    padding: 0 16px;
  }
  .panel{ display:none; }
  .panel.active{ display:block; }

  .search-bar{
    display:flex;
    flex-wrap:wrap;
    gap: 10px;
    justify-content:center;
    align-items:center;
    background: var(--card-bg);
    padding: 16px;
    border-radius: 16px;
    box-shadow: var(--shadow);
  }
  select, textarea, input[type=text]{
    font-size: 1rem;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #E0D4C4;
    background: #FBF8F3;
    color: var(--ink);
  }
  button.primary{
    background: var(--dot);
    color:#fff;
    border:none;
    padding: 9px 22px;
    border-radius: 10px;
    font-size: 1rem;
    cursor:pointer;
  }
  button.primary:hover{ filter: brightness(1.05); }

  .filter-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
    margin: 18px 0 6px;
  }
  .chip{
    border:1.5px solid #DCCFBE;
    background:#fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.8rem;
    cursor:pointer;
    color: var(--sub-ink);
    user-select:none;
  }
  .chip.on[data-tag="beginner"]{ background: var(--tag-beginner); border-color: var(--tag-beginner); color:#fff; }
  .chip.on[data-tag="high"]{ background: var(--tag-high); border-color: var(--tag-high); color:#fff; }
  .chip.on[data-tag="jazz"]{ background: var(--tag-jazz); border-color: var(--tag-jazz); color:#fff; }
  .chip.on[data-tag="bright"]{ background: var(--tag-bright); border-color: var(--tag-bright); color:#fff; }

  .tuning-row{
    display:flex;
    justify-content:center;
    align-items:center;
    gap: 8px;
    margin-top: 12px;
  }
  .tuning-label{
    font-size: 0.75rem;
    color: var(--sub-ink);
    font-weight: 500;
  }
  .tuning-label.active{
    color: var(--dot);
    font-weight: 700;
  }
  .play-hint{
    margin-top: 8px;
    font-size: 0.68rem;
    color: var(--sub-ink);
    opacity: 0.75;
  }
  .toggle-row{
    display:flex;
    justify-content:center;
    align-items:center;
    gap: 8px;
    margin: 14px 0 22px;
    font-size: 0.85rem;
    color: var(--sub-ink);
  }
  .switch{
    position: relative;
    width: 44px; height: 24px;
    background: var(--wood-dark);
    border-radius: 999px;
    cursor:pointer;
    transition: background .15s;
    box-shadow: inset 0 1px 3px rgba(62,46,35,0.25);
    flex-shrink: 0;
  }
  .switch.on{ background: var(--dot); }
  .switch.tuning-switch, .switch.tuning-switch.on{ background: var(--wood-dark); }
  .switch::after{
    content:"";
    position:absolute;
    width:18px; height:18px;
    background:#fff;
    border-radius:50%;
    top:3px; left:3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: left .15s;
  }
  .switch.on::after{ left: 23px; }

  .result-count{
    text-align:center;
    color: var(--sub-ink);
    font-size: 0.85rem;
    margin-bottom: 10px;
  }

  .card-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
  }
  .card{
    background: var(--card-bg);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 12px 10px 14px;
    text-align:center;
    cursor: pointer;
    transition: transform .1s;
    user-select: none;
  }
  .card:active{
    transform: scale(0.96);
  }
  .card .chordname{
    font-size: 1.05rem;
    font-weight:600;
    margin-bottom: 6px;
  }
  .card .shape-label{
    font-size: 0.68rem;
    color: var(--sub-ink);
    margin-top: -4px;
    margin-bottom: 4px;
  }
  .card .tags{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    justify-content:center;
    margin-top: 8px;
    min-height: 20px;
  }
  .tagpill{
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 999px;
    color:#fff;
  }
  .tagpill.beginner{ background: var(--tag-beginner); }
  .tagpill.high{ background: var(--tag-high); }
  .tagpill.jazz{ background: var(--tag-jazz); }
  .tagpill.bright{ background: var(--tag-bright); }
  .tagpill.barre{ background: var(--nut); }

  .empty{
    text-align:center;
    color: var(--sub-ink);
    padding: 40px 0;
  }

  /* Progression mode */
  .prog-input{
    display:flex;
    flex-direction:column;
    gap:10px;
    background: var(--card-bg);
    padding:16px;
    border-radius:16px;
    box-shadow: var(--shadow);
  }
  .prog-input input[type=text]{
    width: 100%;
    font-size: 1.05rem;
    padding: 12px 14px;
    font-family: inherit;
  }
  .prog-hint{
    font-size: 0.75rem;
    color: var(--sub-ink);
  }
  .prog-result{
    display:flex;
    flex-wrap:wrap;
    gap: 10px;
    justify-content:center;
    align-items:flex-start;
    margin-top: 22px;
  }
  .prog-step{
    display:flex;
    align-items:center;
    gap: 6px;
  }
  .move-cost{
    font-size: 0.7rem;
    color: var(--sub-ink);
    display:flex;
    flex-direction:column;
    align-items:center;
    min-width: 34px;
  }
  .move-cost .arrow{ font-size:1rem; color: var(--dot); }
  .prog-total{
    text-align:center;
    margin-top: 16px;
    color: var(--sub-ink);
    font-size: 0.85rem;
  }
  .error-msg{
    text-align:center;
    color: #B3413A;
    font-size: 0.85rem;
    margin-top:10px;
  }

  .capo-banner{
    background: #EFE3D2;
    border: 1.5px solid var(--wood-dark);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 14px 0;
    text-align:center;
    font-size: 0.85rem;
  }
  .capo-banner .capo-title{
    font-weight: 700;
    color: var(--nut);
    margin-bottom: 6px;
  }
  .capo-banner button{
    margin-top: 8px;
    border: 1.5px solid var(--nut);
    background: #fff;
    color: var(--nut);
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.8rem;
    cursor: pointer;
  }
  .capo-banner button.active{
    background: var(--nut);
    color: #fff;
  }

  .fav-star{
    position: absolute;
    top: 8px; right: 8px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 15px;
    cursor: pointer;
    color: #C9BBA8;
    z-index: 2;
  }
  .fav-star.on{ color: var(--dot); }
  .card{ position: relative; }

  .fav-toolbar{
    display:flex;
    justify-content:center;
    gap: 10px;
    margin-bottom: 18px;
  }
  button.secondary, .file-label{
    border: 1.5px solid var(--wood-dark);
    background: #fff;
    color: var(--ink);
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 0.82rem;
    cursor: pointer;
  }
  .file-label{ display:inline-flex; align-items:center; }

  footer{
    text-align:center;
    color: var(--sub-ink);
    font-size: 0.72rem;
    margin-top: 50px;
  }