@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/tajawal-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/tajawal-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/tajawal-500-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/tajawal-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/tajawal-700-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/tajawal-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/tajawal-900-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/tajawal-900-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* chordlab */
:root{--bg:#f3ede2;--card:#fffdf8;--ink:#241f18;--ink-soft:#6b6255;--line:#e1d7c4;--brand:#49796b;--brand-dark:#365c50;--brand-soft:#dce9e4;--amber:#c07f3c;--amber-soft:#f2e1c9;--wood:#7a5233;--wood-dark:#503722;--wood-light:#c99a68;--danger:#a4432f;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#17140f;--card:#221d16;--ink:#ede6d8;--ink-soft:#a89d89;--line:#3a3125;--brand:#5f9c8a;--brand-dark:#7cb6a3;--brand-soft:#233b34;--amber:#d99a52;--amber-soft:#3a2c17;--wood:#5a3d24;--wood-dark:#3a2717;--wood-light:#8a6540;--danger:#d97a63;}}
:root[data-theme="dark"]{--bg:#17140f;--card:#221d16;--ink:#ede6d8;--ink-soft:#a89d89;--line:#3a3125;--brand:#5f9c8a;--brand-dark:#7cb6a3;--brand-soft:#233b34;--amber:#d99a52;--amber-soft:#3a2c17;--wood:#5a3d24;--wood-dark:#3a2717;--wood-light:#8a6540;--danger:#d97a63;}
.chordlab-wrap *{box-sizing:border-box;}
.chordlab-wrap{max-width:760px;margin:0 auto;background:var(--bg);color:var(--ink);font-family:'Tajawal',system-ui,sans-serif;padding:18px 14px 40px;border-radius:16px;}
.chordlab-wrap header{margin-bottom:16px;}
.chordlab-wrap header h1{font-size:26px;font-weight:900;margin:0 0 2px;letter-spacing:.5px;}
.chordlab-wrap header h1 .en{color:var(--brand-dark);}
.chordlab-wrap header .sub{font-size:14px;color:var(--ink-soft);font-weight:500;}
.mode-toggle{display:flex;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:5px;margin-bottom:14px;}
.mode-btn{flex:1;border:none;background:transparent;color:var(--ink-soft);font-family:inherit;font-size:14.5px;font-weight:700;padding:10px 6px;border-radius:9px;cursor:pointer;transition:background .15s ease, color .15s ease;}
.mode-btn.active{background:var(--brand);color:#fff;}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px;}
.panel.hidden{display:none;}
.panel label{display:block;font-size:13.5px;font-weight:700;color:var(--ink-soft);margin-bottom:8px;}
.input-row{display:flex;gap:8px;}
#chordInput{flex:1;font-family:inherit;font-size:17px;font-weight:700;text-align:center;direction:ltr;padding:11px 10px;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);min-width:0;}
#chordInput:focus{outline:2px solid var(--brand);outline-offset:1px;}
.chordlab-wrap button{font-family:inherit;-webkit-tap-highlight-color:transparent;}
#showChordBtn, #clearNotesBtn{background:var(--brand);color:#fff;border:none;border-radius:10px;padding:0 18px;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;}
#showChordBtn:active, #clearNotesBtn:active{background:var(--brand-dark);}
.link-btn{display:inline-block;margin-top:10px;background:none;border:none;color:var(--brand-dark);font-size:13.5px;font-weight:700;text-decoration:underline;cursor:pointer;padding:2px 0;}
.quick-picker{margin:10px 0;}
.root-row,.qual-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.pick-btn{background:var(--bg);border:1.5px solid var(--line);color:var(--ink);border-radius:10px;padding:7px 10px;font-size:13px;font-weight:700;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-width:34px;}
.pick-btn.active{background:var(--brand);color:#fff;border-color:var(--brand);}
.qual-btn{font-size:12px;padding:6px 9px;}
.rhythm-player{margin:14px 0;padding-top:10px;border-top:1px dashed var(--line);}
.rhythm-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;}
.prog-builder{margin:14px 0;padding-top:10px;border-top:1px dashed var(--line);}
.prog-list{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;}
.prog-item{display:flex;align-items:center;gap:4px;background:var(--bg);border:1.5px solid var(--line);border-radius:10px;padding:5px 8px;font-size:12.5px;}
.prog-item.active{border-color:var(--brand);background:var(--brand-soft);}
.prog-item .prog-symbol{font-weight:800;}
.prog-item .prog-bars{color:var(--ink-soft);font-size:11px;}
.prog-item button{background:none;border:none;color:var(--ink-soft);font-weight:800;cursor:pointer;padding:0 3px;font-size:13px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.prog-item button.prog-remove{color:#c0392b;}
#rhythmBpm{width:64px;padding:7px;border-radius:8px;border:1.5px solid var(--line);text-align:center;font-size:13px;background:var(--bg);color:var(--ink);}
.intro-text{font-size:13.5px;line-height:1.7;color:var(--ink-soft);margin:0 0 14px;}
.seo-cta{text-align:center;font-size:13px;margin:18px 0 6px;}
.seo-cta a{color:var(--brand-dark);font-weight:700;text-decoration:underline;}
.faq-section{margin-top:14px;padding-top:10px;border-top:1px dashed var(--line);}
.faq-section h2{font-size:15px;margin:0 0 8px;}
.faq-section h3{font-size:13.5px;margin:10px 0 4px;color:var(--ink);}
.faq-section p{font-size:13px;line-height:1.7;color:var(--ink-soft);margin:0;}
.scale-picker{margin:14px 0 4px;padding-top:10px;border-top:1px dashed var(--line);}
.degree-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.degree-btn{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--bg);border:1.5px solid var(--line);border-radius:10px;padding:6px 10px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.degree-btn .num{font-size:11px;color:var(--ink-soft);font-weight:700;}
.degree-btn .sym{font-size:13px;font-weight:800;color:var(--ink);}
.degree-btn.active{border-color:var(--brand);}
.play-btns{display:flex;gap:8px;margin:8px 0;}
.play-arp,.play-block{flex:1;background:var(--brand-soft);color:var(--brand-dark);border:1px solid var(--line);border-radius:10px;padding:8px 6px;font-size:12.5px;font-weight:700;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.play-arp:active,.play-block:active{background:var(--brand);color:#fff;}
.help-box{margin-top:10px;background:var(--amber-soft);border-radius:10px;padding:12px 14px;font-size:13.5px;line-height:2;}
.help-box.hidden{display:none;}
.help-box .sfx{direction:ltr;display:inline-block;font-weight:700;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:0 6px;margin-inline-start:4px;}
.hint{font-size:13.5px;color:var(--ink-soft);margin:0 0 10px;}
.result{min-height:20px;}
.result .empty{color:var(--ink-soft);font-size:14px;}
.result .symbol{direction:ltr;display:inline-block;font-size:30px;font-weight:900;color:var(--brand-dark);margin-bottom:6px;}
.result .notes{direction:ltr;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.5px;}
.result .err{color:var(--danger);font-size:14px;font-weight:700;}
.result .match-item{direction:ltr;display:inline-block;font-size:22px;font-weight:900;color:var(--brand-dark);background:var(--brand-soft);border-radius:8px;padding:3px 12px;margin:3px 6px 3px 0;}
.quick-play{direction:ltr;display:inline-block;margin:2px 0 10px;background:var(--amber);color:#fff;border:none;border-radius:10px;padding:9px 18px;font-size:14px;font-weight:800;cursor:pointer;}
.quick-play:active{opacity:.85;}
.diagram-lead{margin-bottom:12px;direction:ltr;}
.shapes-wrap{direction:ltr;display:flex;gap:12px;overflow-x:auto;padding:10px 2px 4px;margin-top:4px;}
.shape-card{flex:0 0 auto;width:120px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 8px 10px;text-align:center;}
.shape-pos{font-size:11px;color:var(--ink-soft);margin-bottom:6px;height:14px;}
.shape-markers{display:grid;grid-template-columns:repeat(6,1fr);height:13px;margin-bottom:2px;}
.shape-markers span{display:block;text-align:center;font-size:10px;font-weight:700;color:var(--ink-soft);line-height:13px;}
.shape-markers span.open{color:var(--brand-dark);}
.shape-nut{height:3px;background:var(--ink);border-radius:2px;margin-bottom:1px;}
.shape-nut.noopen{height:1px;background:var(--line);}
.shape-grid{position:relative;display:grid;grid-template-columns:repeat(6,1fr);height:96px;}
.shape-grid::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(to bottom, var(--wood-light) 0, var(--wood-light) 1px, transparent 1px, transparent calc(96px / var(--rows,4)));}
.shape-string{grid-row:1/-1;justify-self:center;width:1.5px;height:100%;background:var(--wood-light);}

.shape-dot, .shape-barre{position:relative;z-index:2;width:16px;height:16px;border-radius:50%;background:var(--brand);align-self:center;justify-self:center;}
.shape-dot{display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:800;}
.shape-barre{width:100%;height:16px;border-radius:8px;justify-self:stretch;}
.shape-dot.root{background:var(--amber);}
.shape-play{display:block;width:100%;margin-top:8px;background:var(--brand);color:#fff;border:none;border-radius:8px;padding:6px 4px;font-size:12px;font-weight:700;cursor:pointer;}
.shape-play:active{background:var(--brand-dark);}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-soft);margin:12px 2px 0;}
.legend span{display:inline-flex;align-items:center;gap:5px;}
.dot{width:11px;height:11px;border-radius:50%;display:inline-block;}
.dot.root{background:var(--brand);}
.dot.tone{background:var(--amber);}
.dot.sel{background:var(--brand);}
.fretboard-scroll{overflow-x:auto;border-radius:14px;background:var(--wood-dark);padding:12px 10px 16px;-webkit-overflow-scrolling:touch;touch-action:pan-x;}
.fretboard{direction:ltr;display:inline-grid;grid-template-columns: 30px 42px repeat(15, 38px);row-gap:0;min-width:max-content;}
.fb-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px 2px;}
.fb-toolbar .hint{margin:0;}
.orient-btn{flex:0 0 auto;background:var(--brand-soft);color:var(--brand-dark);border:1px solid var(--line);border-radius:20px;padding:7px 14px;font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.orient-btn:active{background:var(--brand);color:#fff;}
.chordlab-wrap.orient-v .fretboard-scroll{overflow-x:hidden;display:flex;justify-content:center;}
.chordlab-wrap.orient-v .fretboard{display:grid;}
.fret-num{height:38px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;color:var(--wood-light);font-weight:800;line-height:1;gap:1px;}
.fret-dot{width:4px;height:4px;border-radius:50%;background:var(--wood-light);display:inline-block;margin-top:2px;}
.cell-wrap.nut-top{border-top:3px solid var(--wood-light);}
.string-line-v{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);background:#d8c8ac;opacity:.55;z-index:0;}
.fret-head{grid-row:1;height:22px;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--wood-light);font-weight:800;}
.string-label{grid-column:1;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:var(--wood-light);}
.nut{border-inline-end:3px solid var(--wood-light);}
.cell-wrap{position:relative;height:38px;border-inline-end:1px solid rgba(201,154,104,.35);display:flex;align-items:center;justify-content:center;}
.string-line{position:absolute;right:0;left:0;top:50%;transform:translateY(-50%);background:#d8c8ac;opacity:.55;z-index:0;}
.cell{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;border:1.5px solid transparent;background:transparent;color:#f1e9da;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.55;transition:transform .1s ease, opacity .12s ease, background .12s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.cell:active{transform:scale(.9);}
.cell.on{opacity:1;color:#fff;background:var(--amber);border-color:rgba(0,0,0,.15);}
.cell.on.root{background:var(--brand);}
.cell.sel{opacity:1;color:#fff;background:var(--brand);box-shadow:0 0 0 2px rgba(255,255,255,.4) inset;}
.marker-row{height:14px;grid-column:1/-1;display:grid;grid-template-columns:subgrid;}
.marker{display:flex;align-items:center;justify-content:center;}
.marker i{width:5px;height:5px;border-radius:50%;background:var(--wood-light);display:inline-block;}
.marker i + i{margin-inline-start:3px;}
.chordlab-wrap footer{text-align:center;font-size:12px;color:var(--ink-soft);margin-top:18px;}

.shape-barre{display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:800;}
.pattern-view{display:flex;align-items:center;gap:10px;flex-wrap:wrap;direction:ltr;margin:0 0 4px;}
.pattern-view .pv-strokes{display:flex;gap:2px;flex-wrap:wrap;}
.pattern-view i{font-style:normal;font-weight:800;font-size:16px;min-width:15px;text-align:center;color:var(--ink);}
.pattern-view i.beat{color:var(--brand);margin-left:5px;}
.pattern-view i.beat:first-child{margin-left:0;}
.pattern-view .pv-meta{font-size:12px;color:var(--ink-soft);}
.chordlab-wrap button{text-transform:none;letter-spacing:normal;}
.quick-picker .pk-label{font-size:11px;color:var(--ink-soft);margin:8px 0 4px;}
.quick-picker .pk-label:first-child{margin-top:4px;}
.pk-row{display:flex;flex-wrap:wrap;gap:6px;}
.pk-ltr{direction:ltr;}
.pk-seg{flex-wrap:nowrap;}
.pk-seg .pick-btn{flex:1 1 0;min-width:0;padding:8px 0;text-align:center;}
.pk-acc{max-width:220px;}
.pk-acc .pick-btn{font-size:18px;line-height:1;}
.pk-ltr .pick-btn,.suggest-row .pick-btn{direction:ltr;unicode-bidi:isolate;}
.pick-btn .pk-sym{margin-inline-start:4px;opacity:.7;font-weight:600;direction:ltr;unicode-bidi:isolate;}
.suggest-row{display:flex;flex-wrap:wrap;gap:6px;direction:ltr;margin:8px 0 2px;}
.sugg-btn{background:var(--card,#fff);border-style:dashed;}

/* ===== v0.3 diagram + fretboard ===== */
.chordlab-wrap{--iv-r:#4f7a6b;--iv-t:#3f3933;--iv-3:#c98a3a;--iv-5:#4f7fae;--iv-7:#9b5c96;--iv-x:#7f8f35;}
.shape-card{width:136px;padding:8px 6px 8px;}
.shape-view{cursor:pointer;border-radius:8px;-webkit-tap-highlight-color:transparent;}
.shape-card.active{border-color:var(--brand);box-shadow:0 0 0 1.5px var(--brand) inset;}
.shape-pos{margin-bottom:2px;}
.cd{display:block;width:100%;height:auto;direction:ltr;overflow:visible;}
.cd text{font-family:inherit;text-anchor:middle;}
.cd-fret{stroke:#cdbb9a;stroke-width:1;}
.cd-str{stroke:#8b765b;}
.cd-nut{fill:#2b2722;}
.cd-fretno{font-size:10px;font-weight:800;fill:#6f6658;text-anchor:end !important;}
.cd-x{font-size:11px;font-weight:700;fill:#8c8476;}
.cd-open{fill:none;stroke:#6f6658;stroke-width:1.3;}
.cd-open.is-root{stroke:var(--iv-r);stroke-width:2;}
.cd-dot{fill:var(--iv-t);}
.cd-dot.iv-r{fill:var(--iv-r);}.cd-dot.iv-3{fill:var(--iv-3);}.cd-dot.iv-5{fill:var(--iv-5);}.cd-dot.iv-7{fill:var(--iv-7);}.cd-dot.iv-x{fill:var(--iv-x);}
.cd-barre{fill:var(--iv-t);}
.cd-barre.soft{fill:rgba(63,57,51,.16);}
.cd-rootring{fill:none;stroke:#9fd8c3;stroke-width:1.8;}
.cd-lbl{font-size:9px;font-weight:800;fill:#fff;}
.cd-lbl.sm{font-size:7.5px;}
.cd-bottom{font-size:8.5px;font-weight:700;fill:#8c8476;}
.cd-bottom.is-root{fill:var(--iv-r);font-weight:900;}
.shapes-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:12px 0 6px;}
.shapes-hint{font-size:11.5px;color:var(--ink-soft);margin:0;}
.chordlab-wrap .seg-toggle{display:inline-flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg);}
.chordlab-wrap .seg-toggle button{background:transparent !important;color:var(--ink) !important;border:0 !important;border-radius:0 !important;padding:6px 12px !important;font-size:12.5px;font-weight:700;cursor:pointer;line-height:1.3;box-shadow:none !important;min-width:0;}
.chordlab-wrap .seg-toggle button + button{border-inline-start:1.5px solid var(--line) !important;}
.chordlab-wrap .seg-toggle button.active{background:var(--brand) !important;color:#fff !important;}
.fb-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.fb-toolbar .hint{flex:1 1 160px;margin:0;}
.fretboard-scroll{direction:ltr;padding:10px 8px 12px;}
.chordlab-wrap .fretboard .cell-wrap{height:auto;min-height:34px;}
.chordlab-wrap .fret-num{height:auto;min-height:30px;}
.chordlab-wrap .fretboard .cell{width:26px !important;height:26px !important;min-width:0 !important;min-height:0 !important;padding:0 !important;margin:0 !important;border-radius:50% !important;line-height:1 !important;font-size:10.5px !important;letter-spacing:0 !important;box-shadow:none;flex:0 0 26px;opacity:.5;color:#e9dfcc;}
.chordlab-wrap .fretboard .cell:empty{opacity:0;}
.chordlab-wrap .fretboard .cell:empty:hover{opacity:.25;background:rgba(255,255,255,.15);}
.chordlab-wrap .fretboard .cell.on{opacity:1;color:#fff;border-color:rgba(0,0,0,.18);}
.chordlab-wrap .fretboard .cell.on.iv-t{background:var(--amber);}
.chordlab-wrap .fretboard .cell.on.iv-r{background:var(--iv-r);}
.chordlab-wrap .fretboard .cell.on.iv-3{background:var(--iv-3);}
.chordlab-wrap .fretboard .cell.on.iv-5{background:var(--iv-5);}
.chordlab-wrap .fretboard .cell.on.iv-7{background:var(--iv-7);}
.chordlab-wrap .fretboard .cell.on.iv-x{background:var(--iv-x);}
.chordlab-wrap .fretboard .cell.dim{opacity:.28;}
.chordlab-wrap .fretboard .cell.focus{opacity:1;box-shadow:0 0 0 2.5px #fff6e4 !important;transform:scale(1.1);z-index:3;}
.chordlab-wrap .fretboard .cell.sel{opacity:1;}
.chordlab-wrap .cell-wrap{border-inline-end-color:rgba(214,190,150,.45);}
.chordlab-wrap .marker i{width:6px;height:6px;opacity:.8;}
.legend i.lg{width:10px;height:10px;border-radius:50%;display:inline-block;}
.legend i.lg.iv-r{background:var(--iv-r);}.legend i.lg.iv-t{background:var(--amber);}.legend i.lg.iv-3{background:var(--iv-3);}.legend i.lg.iv-5{background:var(--iv-5);}.legend i.lg.iv-7{background:var(--iv-7);}.legend i.lg.iv-x{background:var(--iv-x);}
.chordlab-wrap .fretboard .cell-wrap.nut{border-inline-end:5px solid #eadfc8;}
.chordlab-wrap.orient-v .fretboard .cell-wrap{border-inline-end:0;border-bottom:1px solid rgba(214,190,150,.45);}
.chordlab-wrap.orient-v .fretboard .cell-wrap.nut-top{border-top:0;border-bottom:5px solid #eadfc8;}

/* ===== v0.4 tabs layout ===== */
.chordlab-wrap .cl-tabs{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:12px;position:sticky;top:0;z-index:30;box-shadow:0 2px 10px rgba(0,0,0,.05);}
.chordlab-wrap .cl-tabs button{flex:1 1 0;min-width:0;border:0 !important;background:transparent !important;color:var(--ink-soft) !important;font-family:inherit;font-size:13.5px;font-weight:800;padding:10px 2px !important;border-radius:9px !important;cursor:pointer;white-space:nowrap;box-shadow:none !important;line-height:1.2;letter-spacing:0;text-transform:none;}
.chordlab-wrap .cl-tabs button.active{background:var(--brand) !important;color:#fff !important;}
.chordlab-wrap .pk-summary{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;margin:10px 0 0;background:var(--bg) !important;border:1.5px dashed var(--line) !important;border-radius:10px !important;padding:9px 12px !important;color:var(--ink) !important;font-family:inherit;font-weight:800;font-size:14px;cursor:pointer;box-shadow:none !important;text-transform:none;letter-spacing:0;}
.chordlab-wrap .pk-summary #pkSummaryText{unicode-bidi:plaintext;}
.chordlab-wrap .pk-summary #pkCaret{color:var(--ink-soft);font-size:11px;}
.chordlab-wrap .quick-picker{margin-top:8px;}
.chordlab-wrap .quick-picker.collapsed{display:none;}
.chordlab-wrap .pk-line{display:flex;gap:10px;margin-bottom:6px;direction:ltr;}
.chordlab-wrap .pk-line #letterRow{flex:7 1 0;min-width:0;}
.chordlab-wrap .pk-line #accRow{flex:3 1 0;min-width:0;max-width:none;}
.chordlab-wrap #typeRow{margin-bottom:2px;}
.chordlab-wrap .result{margin-top:12px;}
.chordlab-wrap .result .symbol + br{display:none;}
.chordlab-wrap .chord-actions{display:flex;gap:8px;margin-top:10px;}
.chordlab-wrap .chord-actions .pick-btn{flex:1 1 0;min-width:0;font-size:13px;}
.chordlab-wrap #scalePanel .scale-picker,.chordlab-wrap #progPanel .rhythm-player{border-top:0;padding-top:0;margin-top:0;}
.chordlab-wrap #progPanel .prog-builder{margin-bottom:0;}
.chordlab-wrap .prog-now{margin:0 0 12px;font-size:13.5px;color:var(--ink-soft);}
.chordlab-wrap .prog-now b{direction:ltr;unicode-bidi:isolate;color:var(--brand-dark);font-size:18px;font-weight:900;margin-inline-start:4px;}
.chordlab-wrap .board-block{margin-top:2px;}
.chordlab-wrap{--cd-fret:#cdbb9a;--cd-str:#8b765b;--cd-nut:#2b2722;--cd-txt:#8c8476;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chordlab-wrap{--iv-t:#776c5d;--cd-fret:#5b4d3b;--cd-str:#a8957a;--cd-nut:#ede6d8;--cd-txt:#a89d89;}}
:root[data-theme="dark"] .chordlab-wrap{--iv-t:#776c5d;--cd-fret:#5b4d3b;--cd-str:#a8957a;--cd-nut:#ede6d8;--cd-txt:#a89d89;}
.cd-fret{stroke:var(--cd-fret);}
.cd-str{stroke:var(--cd-str);}
.cd-nut{fill:var(--cd-nut);}
.cd-x,.cd-fretno,.cd-bottom{fill:var(--cd-txt);}
.cd-open{stroke:var(--cd-txt);}
.cd-bottom.is-root{fill:var(--iv-r);}
.chordlab-wrap .pk-summary #pkSummaryText{unicode-bidi:normal;display:flex;align-items:baseline;gap:8px;}
.chordlab-wrap .pk-sym-big{font-size:16px;font-weight:900;color:var(--brand-dark);}
.chordlab-wrap .pk-sum-type{font-weight:700;color:var(--ink-soft);font-size:13px;}
.chordlab-wrap .pk-sum-edit{font-weight:700;color:var(--brand-dark);font-size:12.5px;}
.chordlab-wrap #scaleRootRow{direction:ltr;}

/* ===== v0.5 shared look with Tuner & Metronome ===== */
.chordlab-wrap.chordlab-wrap.chordlab-wrap{--bg:#f7f7f7;--card:#fff;--ink:#222;--ink-soft:#888;--line:#e8e8e8;--brand:#236373;--brand-dark:#1c505d;--brand-soft:#e8f0f2;--amber:#e0912f;--amber-soft:#fbf1e4;--wood-dark:#1f3a42;--wood-light:#a7c0c6;--iv-r:#236373;--iv-t:#3c4247;--iv-3:#e0912f;--iv-5:#4a86c5;--iv-7:#a0569b;--iv-x:#7c9a3a;--cd-fret:#d6d6d6;--cd-str:#9b9b9b;--cd-nut:#2f2f2f;--cd-txt:#999;--danger:#f44336;
background:transparent;max-width:600px;padding:1rem 0 2rem;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
.chordlab-wrap header{text-align:center;margin-bottom:12px;}
.chordlab-wrap header h1{font-size:2rem;font-weight:500;color:var(--ink);letter-spacing:0;}
.chordlab-wrap header .sub{color:var(--ink-soft);font-size:.95rem;}
.chordlab-wrap .intro-text{color:#666;font-size:.95rem;text-align:center;}
.chordlab-wrap .cl-card{background:#fff;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.08);padding:1.25rem 1rem 1.5rem;margin:0 0 1.5rem;}
/* tabs = tuner pills */
.chordlab-wrap .cl-tabs{background:#fff;border:0;border-radius:0;box-shadow:none;padding:6px 0;margin:-6px 0 14px;gap:.5rem;}
.chordlab-wrap .cl-tabs button{background:var(--bg) !important;color:#888 !important;border-radius:999px !important;padding:.7rem 0 !important;font-size:.9rem;font-weight:600;}
.chordlab-wrap .cl-tabs button.active{background:var(--brand) !important;color:#fff !important;}
/* panels flatten into the card */
.chordlab-wrap .panel{background:transparent;border:0;border-radius:0;padding:0;margin:0 0 14px;}
/* inputs & buttons */
.chordlab-wrap #chordInput{background:var(--bg);border:0;border-radius:999px;padding:12px 16px;font-size:1.1rem;}
.chordlab-wrap #chordInput:focus{outline:2px solid var(--brand);}
.chordlab-wrap #showChordBtn,.chordlab-wrap #clearNotesBtn{background:var(--brand);border-radius:999px;padding:0 1.4rem;font-weight:600;}
.chordlab-wrap #showChordBtn:hover,.chordlab-wrap #clearNotesBtn:hover{background:var(--brand-dark);}
.chordlab-wrap #clearNotesBtn{padding:.7rem 1.4rem;}
.chordlab-wrap .pick-btn{background:var(--bg) !important;border:0 !important;color:#666 !important;border-radius:8px !important;font-weight:600;box-shadow:none !important;}
.chordlab-wrap .pick-btn.active{background:var(--brand) !important;color:#fff !important;}
.chordlab-wrap .pick-btn .pk-sym{opacity:.75;}
.chordlab-wrap .pk-summary{background:var(--bg) !important;border:0 !important;border-radius:999px !important;padding:10px 16px !important;}
.chordlab-wrap .chord-actions .pick-btn,.chordlab-wrap #progPanel .rhythm-controls .pick-btn,.chordlab-wrap .play-arp,.chordlab-wrap .play-block{background:var(--bg) !important;color:var(--brand) !important;border:1px solid var(--brand) !important;border-radius:999px !important;font-weight:600;}
.chordlab-wrap .chord-actions .pick-btn:active,.chordlab-wrap #progPanel .rhythm-controls .pick-btn:active,.chordlab-wrap .play-arp:active,.chordlab-wrap .play-block:active{background:var(--brand) !important;color:#fff !important;}
.chordlab-wrap #playProgBtn,.chordlab-wrap #rhythmPlayBtn{background:var(--brand) !important;color:#fff !important;}
.chordlab-wrap .seg-toggle{border:0;background:var(--bg);border-radius:999px;padding:3px;gap:2px;}
.chordlab-wrap .seg-toggle button{border-radius:999px !important;color:#888 !important;padding:5px 12px !important;font-weight:600;}
.chordlab-wrap .seg-toggle button + button{border-inline-start:0 !important;}
.chordlab-wrap .seg-toggle button.active{background:var(--brand) !important;color:#fff !important;}
.chordlab-wrap .orient-btn{background:var(--bg);border:0;color:var(--brand);font-weight:600;border-radius:999px;}
.chordlab-wrap #rhythmBpm{background:var(--bg);border:0;border-radius:999px;}
/* result */
.chordlab-wrap .result .symbol{color:var(--brand);font-size:3rem;font-weight:700;line-height:1.1;display:block;text-align:center;}
.chordlab-wrap .result .notes{text-align:center;color:#666;}
.chordlab-wrap .result .notes + div{text-align:center;}
.chordlab-wrap .result .empty{text-align:center;color:#999;}
.chordlab-wrap .shape-card{background:var(--bg);border:0;border-radius:12px;}
.chordlab-wrap .shape-card.active{box-shadow:0 0 0 2px var(--brand) inset;}
.chordlab-wrap .degree-btn{background:var(--bg);border:0;border-radius:10px;}
.chordlab-wrap .degree-btn .sym{color:var(--ink);}
.chordlab-wrap .prog-item{background:var(--bg);border:0;border-radius:999px;}
.chordlab-wrap .prog-item.active{background:var(--brand-soft);box-shadow:0 0 0 1.5px var(--brand) inset;}
.chordlab-wrap #progPanel .prog-builder{border-top:1px solid var(--line);}
.chordlab-wrap .hint{color:#888;}
/* fretboard: deep teal neck to match the accent */
.chordlab-wrap .fretboard-scroll{background:var(--wood-dark);border-radius:12px;}
.chordlab-wrap .fretboard .string-line,.chordlab-wrap .fretboard .string-line-v{background:#c9d8db;}
.chordlab-wrap .fretboard .cell-wrap{border-inline-end-color:rgba(167,192,198,.35);}
.chordlab-wrap .fretboard .cell-wrap.nut{border-inline-end-color:#eef4f5;}
.chordlab-wrap.orient-v .fretboard .cell-wrap{border-bottom-color:rgba(167,192,198,.35);}
.chordlab-wrap.orient-v .fretboard .cell-wrap.nut-top{border-bottom-color:#eef4f5;}
.chordlab-wrap .fretboard .cell{color:#d9e5e8;}
.chordlab-wrap .fretboard .cell.on.iv-t{background:var(--amber);}
.chordlab-wrap .fretboard .cell.on.iv-r{background:#fff;color:var(--brand) !important;}
.chordlab-wrap .fretboard .cell.sel{background:#fff;color:var(--brand);}
.chordlab-wrap .fretboard .cell.focus{box-shadow:0 0 0 2.5px #fff !important;}
.chordlab-wrap .fretboard .cell.on.iv-r.focus{box-shadow:0 0 0 2.5px var(--amber) !important;}
.chordlab-wrap .legend i.lg.iv-r{background:#fff;box-shadow:0 0 0 1.5px var(--brand) inset;}
.chordlab-wrap .legend i.lg.iv-t{background:var(--amber);}
.chordlab-wrap .cd-rootring{stroke:#9fd3df;}
.chordlab-wrap .faq-section,.chordlab-wrap .seo-cta{text-align:start;}
.chordlab-wrap .seo-cta{text-align:center;}
.chordlab-wrap .seo-cta a{color:var(--brand);}
.chordlab-wrap .shape-card .play-btns{flex-direction:column;gap:6px;margin:6px 0 0;}
.chordlab-wrap .shape-card .play-arp,.chordlab-wrap .shape-card .play-block{padding:6px 4px;font-size:12px;white-space:nowrap;}
.chordlab-wrap .cl-tabs button{font-size:.85rem;}
.chordlab-wrap .fb-toolbar .hint{font-size:.8rem;}
.chordlab-wrap #scTypeRow,.chordlab-wrap #scMinorRow{margin-bottom:6px;}
.chordlab-wrap .sc-minor .pick-btn{flex:1 1 0;}
.chordlab-wrap .sc-head{text-align:center;margin:14px 0 10px;}
.chordlab-wrap .sc-name{font-size:1.4rem;font-weight:700;color:var(--brand);}
.chordlab-wrap .sc-notes{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:6px;}
.chordlab-wrap .sc-notes span{background:var(--bg);border-radius:999px;padding:3px 10px;font-weight:700;font-size:.9rem;color:#555;}
.chordlab-wrap .sc-notes span:first-child{background:var(--brand);color:#fff;}
.chordlab-wrap #degreeRow{direction:ltr;justify-content:center;}
.chordlab-wrap .pk-line #scLetterRow{flex:7 1 0;min-width:0;}
.chordlab-wrap .pk-line #scAccRow{flex:3 1 0;min-width:0;max-width:none;}
/* ===== v0.6 progressions ===== */
.chordlab-wrap .pg-famous-box{background:var(--bg);border-radius:14px;padding:0;margin:0 0 14px;}
.chordlab-wrap .pg-famous-box summary{cursor:pointer;list-style:none;padding:12px 16px;font-weight:700;color:var(--brand);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.chordlab-wrap .pg-famous-box summary::-webkit-details-marker{display:none;}
.chordlab-wrap .pg-famous-box summary small{font-weight:500;color:#999;font-size:.8rem;}
.chordlab-wrap .pg-famous-box[open] summary{border-bottom:1px solid var(--line);}
.chordlab-wrap #pgFamous{padding:8px 10px 12px;max-height:360px;overflow-y:auto;}
.chordlab-wrap .pg-fgroup h4{font-size:.85rem;color:#888;margin:10px 4px 6px;font-weight:700;}
.chordlab-wrap .pg-fitem{display:block;width:100%;text-align:start;background:#fff !important;border:0 !important;border-radius:10px !important;padding:9px 12px !important;margin:0 0 6px;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.06) !important;color:var(--ink) !important;font-family:inherit;}
.chordlab-wrap .pg-fitem:active{background:var(--brand-soft) !important;}
.chordlab-wrap .pg-fchords{display:block;font-weight:800;font-size:1rem;color:var(--brand);text-align:left;}
.chordlab-wrap .pg-fdesc{display:block;font-size:.78rem;color:#888;margin-top:2px;}
.chordlab-wrap .pg-top{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px;}
.chordlab-wrap .pg-field{display:flex;flex-direction:column;gap:4px;}
.chordlab-wrap .pg-lbl{font-size:.8rem;color:#888;font-weight:700;margin-bottom:6px;}
.chordlab-wrap .pg-field .pg-lbl{margin:0;}
.chordlab-wrap .pg-lbl small{font-weight:500;color:var(--brand);margin-inline-start:6px;}
.chordlab-wrap .pg-bpm{display:flex;align-items:center;gap:4px;background:var(--bg);border-radius:999px;padding:3px;}
.chordlab-wrap .pg-bpm input{width:52px;border:0;background:transparent;text-align:center;font-weight:800;font-size:1rem;color:var(--brand);padding:4px 0;-moz-appearance:textfield;}
.chordlab-wrap .pg-bpm input::-webkit-inner-spin-button{display:none;}
.chordlab-wrap .pg-bpm span{font-size:.7rem;color:#999;margin-inline-end:4px;}
.chordlab-wrap .pg-step{width:34px;height:34px;border-radius:50% !important;border:0 !important;background:#fff !important;color:var(--brand) !important;font-size:1.2rem;font-weight:700;cursor:pointer;padding:0 !important;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.08) !important;}
.chordlab-wrap .pg-timeline-wrap{background:var(--bg);border-radius:14px;padding:10px;margin-bottom:10px;}
.chordlab-wrap .pg-empty{text-align:center;color:#999;font-size:.85rem;margin:6px 0 10px;}
.chordlab-wrap .tl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
@media (min-width:520px){.chordlab-wrap .tl{grid-template-columns:repeat(4,minmax(0,1fr));}}
.chordlab-wrap .tl-bar{position:relative;background:#fff;border-radius:10px;padding:16px 4px 4px;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.chordlab-wrap .tl-num{position:absolute;top:2px;left:6px;font-size:10px;color:#aaa;font-weight:700;}
.chordlab-wrap .tl-grid{display:grid;grid-template-rows:44px;gap:0;position:relative;}
.chordlab-wrap .tl-beat{grid-row:1;border-inline-start:1px dashed #e2e2e2;}
.chordlab-wrap .tl-beat:first-child{border-inline-start:0;}
.chordlab-wrap .tl-beat.now{background:rgba(224,145,47,.22);border-radius:6px;}
.chordlab-wrap .tl-seg{grid-row:1;z-index:1;margin:2px;border-radius:8px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;cursor:pointer;overflow:hidden;white-space:nowrap;padding:0 4px;transition:background .1s;}
.chordlab-wrap .tl-seg span{overflow:hidden;text-overflow:ellipsis;}
.chordlab-wrap .tl-seg.cont{opacity:.75;font-weight:600;font-size:.8rem;}
.chordlab-wrap .tl-seg.rest{background:transparent;color:#aaa;border:1.5px dashed #ccc;}
.chordlab-wrap .tl-seg.err{background:#f44336;}
.chordlab-wrap .tl-seg.sel{box-shadow:0 0 0 3px var(--amber);}
.chordlab-wrap .tl-seg.playing{background:var(--amber);}
.chordlab-wrap .pg-info{text-align:center;font-size:.75rem;color:#aaa;margin-top:6px;}
.chordlab-wrap .pg-editor{background:var(--brand-soft);border-radius:12px;padding:10px;margin-bottom:10px;}
.chordlab-wrap .pg-ed-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.chordlab-wrap .pg-ed-row b{font-size:1.3rem;color:var(--brand);direction:ltr;}
.chordlab-wrap .pg-ed-dur{display:flex;align-items:center;gap:8px;font-weight:700;}
.chordlab-wrap .pg-ed-actions{margin-top:8px;justify-content:flex-start;}
.chordlab-wrap .pg-ed-actions .pick-btn{background:#fff !important;padding:7px 10px;}
.chordlab-wrap .pg-ed-actions .pg-del{color:#d0392b !important;}
.chordlab-wrap .pg-transport{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.chordlab-wrap .pg-play{flex:1 1 140px;background:var(--brand) !important;color:#fff !important;border:0 !important;border-radius:999px !important;padding:.8rem 1rem !important;font-size:1rem;font-weight:700;cursor:pointer;font-family:inherit;}
.chordlab-wrap .pg-play.on{background:#c0392b !important;}
.chordlab-wrap .pg-transport .pick-btn{border-radius:999px !important;padding:8px 12px;}
.chordlab-wrap .pg-section{border-top:1px solid var(--line);padding-top:12px;margin-top:12px;}
.chordlab-wrap .pg-row2{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
.chordlab-wrap .pg-sub{font-size:.8rem;color:#888;min-width:52px;}
.chordlab-wrap .pg-key{background:var(--bg);border:0;border-radius:999px;padding:7px 14px;font-family:inherit;font-weight:700;color:var(--brand);font-size:.9rem;}
.chordlab-wrap #pgPalette{margin-bottom:10px;}
.chordlab-wrap .pg-chip{display:inline-flex;flex-direction:column;align-items:center;min-width:48px;padding:5px 8px !important;line-height:1.15;font-size:.95rem;}
.chordlab-wrap .pg-chip small{font-size:.65rem;color:#aaa;font-weight:700;}
.chordlab-wrap .pg-chip:active{background:var(--brand) !important;color:#fff !important;}
.chordlab-wrap .pg-input-row input{flex:1;min-width:0;background:var(--bg);border:0;border-radius:999px;padding:10px 14px;font-family:inherit;font-weight:700;font-size:.95rem;color:var(--ink);}
.chordlab-wrap #pgAddBtn{background:var(--brand);color:#fff;border:0;border-radius:999px;padding:0 1.2rem;font-weight:700;cursor:pointer;font-family:inherit;}
.chordlab-wrap .pg-msg{color:#d0392b;font-size:.8rem;margin:6px 0 0;}
.chordlab-wrap #pgPatRow{margin-bottom:6px;}
.chordlab-wrap .tl-seg.short{font-size:.78rem;padding:0 1px;letter-spacing:-.02em;}
.chordlab-wrap .tl-seg.cont{border-top-left-radius:3px;border-bottom-left-radius:3px;}
.chordlab-wrap .pg-transport{flex-wrap:nowrap;}
.chordlab-wrap .pg-play{flex:1 1 auto;min-width:0;}
.chordlab-wrap .pg-transport .pick-btn{padding:8px 10px !important;font-size:.8rem;white-space:nowrap;flex:0 0 auto;}
/* ===== v0.7 timeline editing ===== */
.chordlab-wrap .tl-grid{grid-template-rows:14px 46px;}
.chordlab-wrap .tl-bn{grid-row:1;font-size:9px;color:#b5b5b5;font-weight:700;text-align:center;line-height:14px;}
.chordlab-wrap .tl-beat{grid-row:2;border-inline-start:2px solid #d3dcdf;}
.chordlab-wrap .tl-beat:nth-of-type(1){border-inline-start:0;}
.chordlab-wrap .tl-seg,.chordlab-wrap .tl-add{grid-row:2;}
.chordlab-wrap .tl-seg{position:relative;}
.chordlab-wrap .tl-seg span{position:relative;z-index:1;}
.chordlab-wrap .tl-tick{position:absolute;width:2px;height:10px;margin-left:-1px;background:rgba(255,255,255,.6);border-radius:1px;pointer-events:none;}
.chordlab-wrap .tl-tick.t{top:0;}
.chordlab-wrap .tl-tick.b{bottom:0;}
.chordlab-wrap .tl-num{color:var(--brand);font-size:11px;font-weight:800;}
.chordlab-wrap .tl-seg.sel{overflow:visible;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--amber);z-index:3;}
.chordlab-wrap .tl-h{position:absolute;top:-3px;bottom:-3px;width:16px;background:#fff;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:ew-resize;touch-action:none;z-index:4;display:flex;align-items:center;justify-content:center;}
.chordlab-wrap .tl-h::before{content:'';width:3px;height:16px;border-radius:2px;background:#9aa;}
.chordlab-wrap .tl-h::after{content:'';position:absolute;inset:-8px -10px;}
.chordlab-wrap .tl-hs{left:-9px;}
.chordlab-wrap .tl-he{right:-9px;}
.chordlab-wrap .tl-add{margin:2px;border:1.5px dashed #c3ced2;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--brand);font-size:1.5rem;font-weight:300;cursor:pointer;background:rgba(35,99,115,.04);line-height:1;}
.chordlab-wrap .tl-add:active{background:var(--brand-soft);}
.chordlab-wrap .tl-bar.tl-new{background:transparent;box-shadow:none;outline:1.5px dashed #d5dcde;outline-offset:-1px;}
.chordlab-wrap .pg-rhythm-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 2px 10px;}
.chordlab-wrap .pg-rname{font-weight:800;color:var(--brand);font-size:.95rem;}
.chordlab-wrap .pg-rname small{font-weight:600;color:#aaa;font-size:.75rem;}
.chordlab-wrap .pg-rstrokes{display:flex;gap:1px;flex:1 1 auto;}
.chordlab-wrap .pg-rstrokes i{font-style:normal;font-weight:800;font-size:15px;min-width:16px;text-align:center;color:#555;border-radius:4px;transition:transform .06s,background .06s;}
.chordlab-wrap .pg-rstrokes i.beat{margin-left:6px;}
.chordlab-wrap .pg-rstrokes i:first-child{margin-left:0;}
.chordlab-wrap .pg-rstrokes i.rest{color:#bbb;}
.chordlab-wrap .pg-rstrokes i.cur{background:var(--amber);color:#fff;transform:scale(1.2);}
.chordlab-wrap .pg-dots{display:flex;gap:6px;}
.chordlab-wrap .pg-dot{width:9px;height:9px;border-radius:50%;background:#d9d9d9;transition:transform .05s,background .05s;}
.chordlab-wrap .pg-dot.on{background:var(--brand);transform:scale(1.4);}
.chordlab-wrap .pg-dot[data-d="0"].on{background:var(--amber);}
.chordlab-wrap .pg-sheet{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.28);display:flex;align-items:flex-end;justify-content:center;}
.chordlab-wrap .pg-sheet[hidden]{display:none;}
.chordlab-wrap .pg-sheet-card{background:#fff;width:100%;max-width:600px;border-radius:18px 18px 0 0;padding:14px 16px 20px;box-shadow:0 -6px 24px rgba(0,0,0,.15);animation:pgUp .18s ease-out;}
@keyframes pgUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.chordlab-wrap .pg-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.chordlab-wrap .pg-sheet-head b{color:var(--brand);font-size:1rem;}
.chordlab-wrap #pgSheetClose{width:34px;height:34px;border-radius:50% !important;border:0 !important;background:var(--bg) !important;color:#666 !important;font-size:1rem;cursor:pointer;padding:0 !important;}
.chordlab-wrap .pg-sugg{margin-top:10px;gap:6px;}
.chordlab-wrap .pg-sg{font-size:1rem;padding:8px 12px !important;}
body.pg-dragging{user-select:none;-webkit-user-select:none;cursor:ew-resize;}
/* ===== v0.8 mute + copy drag ===== */
.chordlab-wrap .tl-seg{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;}
.chordlab-wrap .tl-seg.muted{background:#b9c6c9;color:#fff;}
.chordlab-wrap .tl-seg.muted span{text-decoration:line-through;text-decoration-thickness:2px;}
.chordlab-wrap .tl-seg.muted.playing{background:#d8bf9c;}
.chordlab-wrap .tl-beat.drop{position:relative;z-index:5;background:rgba(224,145,47,.45);box-shadow:inset 0 0 0 2px var(--amber);border-radius:6px;}
.chordlab-wrap .pg-ed-actions .pick-btn.active{background:var(--brand) !important;color:#fff !important;}
.pg-ghost{position:fixed;z-index:100001;pointer-events:none;transform:translate(-50%,-100%);background:#236373;color:#fff;border-radius:10px;padding:6px 14px;box-shadow:0 6px 18px rgba(0,0,0,.28);display:flex;flex-direction:column;align-items:center;line-height:1.2;opacity:.95;}
.pg-ghost b{font-size:1.1rem;direction:ltr;}
.pg-ghost small{font-size:.7rem;opacity:.85;}
body.pg-copying{user-select:none;-webkit-user-select:none;cursor:copy;}
/* ===== v0.9 notes tab -> progression ===== */
.chordlab-wrap .nr-match{margin-bottom:10px;}
.chordlab-wrap .nr-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.chordlab-wrap .nr-add{font-size:.8rem;padding:6px 12px !important;border-radius:999px !important;}
.chordlab-wrap .nr-add.done{background:var(--brand) !important;color:#fff !important;}
/* ===== v1.0 progression tools ===== */
.chordlab-wrap .pg-tools{display:flex;align-items:center;gap:6px;margin:0 0 10px;}
.chordlab-wrap .pg-tools-sp{flex:1 1 auto;}
.chordlab-wrap .pg-icon{width:40px;height:36px;border-radius:10px !important;border:0 !important;background:#fff !important;color:var(--ink) !important;display:inline-flex;align-items:center;justify-content:center;padding:0 !important;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.08) !important;}
.chordlab-wrap .pg-icon:disabled{color:#c4c9cb !important;cursor:default;box-shadow:none !important;background:rgba(255,255,255,.55) !important;}
.chordlab-wrap .pg-icon:not(:disabled):active{background:var(--brand-soft) !important;}
.chordlab-wrap .pg-tool{border:0 !important;background:#fff !important;color:var(--brand) !important;border-radius:999px !important;padding:7px 10px !important;font-size:.78rem;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.08) !important;}
.chordlab-wrap .pg-tool:active{background:var(--brand-soft) !important;}
.chordlab-wrap .tl-seg span{display:flex;flex-direction:column;align-items:center;line-height:1.1;}
.chordlab-wrap .tl-rn{font-size:10px;font-weight:700;opacity:.82;margin-top:1px;letter-spacing:0;}
.chordlab-wrap .tl-seg.short .tl-rn{font-size:9px;}
.chordlab-wrap .pg-keyline{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:.8rem;color:#777;}
.chordlab-wrap .pg-keyline label{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--brand);}
.chordlab-wrap .pg-keyline select,.chordlab-wrap .pg-capo select{border:0;background:#fff;border-radius:999px;padding:6px 10px;font-family:inherit;font-weight:700;color:var(--brand);font-size:.85rem;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.chordlab-wrap .pg-key-hint{font-size:.72rem;color:#aaa;}
.chordlab-wrap .pg-tap{border:0 !important;background:var(--brand) !important;color:#fff !important;border-radius:999px !important;padding:0 10px !important;height:34px;font-weight:800;font-size:.72rem;letter-spacing:.04em;cursor:pointer;margin-inline-start:4px;}
.chordlab-wrap .pg-tap.hit{animation:pgTap .18s ease-out;}
@keyframes pgTap{from{transform:scale(.88);background:var(--amber)}to{transform:none}}
.chordlab-wrap .pg-trow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.chordlab-wrap .pg-tr-lbl{font-size:.78rem;color:#777;font-weight:700;padding:0 6px;}
.chordlab-wrap .pg-capo{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#777;font-size:.85rem;}
.chordlab-wrap .pg-capo select{background:var(--bg);box-shadow:none;}
.chordlab-wrap .pg-capo-line{margin-top:10px;font-size:.88rem;color:var(--ink);display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
.chordlab-wrap .pg-capo-line b{color:var(--brand);}
.chordlab-wrap .pg-capo-sug{border:0 !important;background:var(--brand-soft) !important;color:var(--brand) !important;border-radius:999px !important;padding:7px 12px !important;font-family:inherit;font-weight:700;font-size:.8rem;cursor:pointer;}
.chordlab-wrap .pg-voicings{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;}
.chordlab-wrap .pg-v-lbl{font-size:.75rem;color:#888;font-weight:700;margin-right:2px;}
.chordlab-wrap .pg-v{border:0 !important;background:#fff !important;border-radius:10px !important;padding:2px 3px !important;cursor:pointer;line-height:0;box-shadow:0 1px 3px rgba(0,0,0,.08) !important;}
.chordlab-wrap .pg-v.active{box-shadow:0 0 0 2px var(--amber) !important;}
.chordlab-wrap #pgCountBtn.active{background:var(--brand) !important;color:#fff !important;}
.chordlab-wrap .pg-rhythm-bar{position:relative;}
.chordlab-wrap .pg-count{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:2rem;font-weight:900;color:var(--amber);pointer-events:none;}
.chordlab-wrap .pg-count.pop{animation:pgPop .35s ease-out;}
@keyframes pgPop{from{transform:translate(-50%,-50%) scale(1.6);opacity:.3}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.chordlab-wrap .pg-saved-item{display:flex;gap:6px;align-items:stretch;margin-bottom:6px;}
.chordlab-wrap .pg-saved-item .pg-fitem{margin:0;flex:1 1 auto;}
.chordlab-wrap .pg-saved-del{border:0 !important;background:#fff !important;border-radius:10px !important;padding:0 10px !important;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.06) !important;}
.chordlab-wrap #pgSavedBox{margin-top:-6px;}
.chordlab-wrap #pgSaved{padding:8px 10px 12px;max-height:300px;overflow-y:auto;}
.chordlab-wrap .match-item,.chordlab-wrap .symbol{unicode-bidi:isolate;}
.pg-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#1f3a42;color:#fff;padding:10px 18px;border-radius:999px;font-weight:700;font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:100002;}
.pg-toast.on{opacity:1;transform:translate(-50%,0);}
#pgPrint{display:none;}
@media print{
body.pg-printing *{visibility:hidden !important;}
body.pg-printing #pgPrint,body.pg-printing #pgPrint *{visibility:visible !important;}
body.pg-printing #pgPrint{display:block !important;position:absolute;left:0;top:0;width:100%;padding:0 8mm;background:#fff;color:#000;}
}
.pg-print h1{font-size:22pt;margin:0 0 4pt;color:#236373;}
.pg-print .pp-meta{margin:0 0 12pt;font-size:11pt;color:#444;}
.pg-print .pp-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-left:2px solid #333;margin-bottom:16pt;}
.pg-print .pp-bar{display:flex;position:relative;border-right:2px solid #333;border-top:1px solid #bbb;border-bottom:1px solid #bbb;min-height:34pt;padding:12pt 4pt 4pt;}
.pg-print .pp-bar i{position:absolute;top:2pt;left:4pt;font-size:7pt;color:#999;font-style:normal;}
.pg-print .pp-bar span{font-weight:800;font-size:14pt;}
.pg-print .pp-bar em{color:#999;font-style:normal;}
.pg-print .pp-cards{display:flex;flex-wrap:wrap;gap:10pt;}
.pg-print .pp-card{width:110pt;text-align:center;break-inside:avoid;}
.pg-print .pp-card b{display:block;font-size:13pt;margin-bottom:2pt;}
.pg-print .pp-card .play-btns,.pg-print .pp-card button{display:none !important;}
.pg-print .pp-foot{margin-top:14pt;font-size:9pt;color:#999;}
.chordlab-wrap .tl-seg span{background:inherit;padding:0 4px;border-radius:4px;}
.pg-print .pp-bar span small{display:block;font-size:8pt;font-weight:600;color:#777;}
/* ===== v1.1 sound picker ===== */
.chordlab-wrap .cl-sound{display:flex;justify-content:flex-end;margin:-4px 0 12px;}
.chordlab-wrap .cl-sound label{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:#777;font-weight:700;}
.chordlab-wrap .cl-sound select{border:0;background:var(--bg);border-radius:999px;padding:7px 12px;font-family:inherit;font-weight:700;color:var(--brand);font-size:.85rem;cursor:pointer;}
/* ===== v1.2 terms, glossary, note names ===== */
.chordlab-wrap .en-term{font-size:.78em;color:#9a9a9a;font-weight:600;unicode-bidi:isolate;direction:ltr;}
.chordlab-wrap .pick-btn small.en-term,.chordlab-wrap .pick-btn .en-term{display:block;font-size:.62rem;line-height:1.1;margin-top:1px;color:inherit;opacity:.65;}
.chordlab-wrap .cl-sound{justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;}
.chordlab-wrap .cl-nm{display:inline-flex;background:var(--bg);border-radius:999px;padding:3px;}
.chordlab-wrap .cl-nm button{border:0 !important;background:transparent !important;border-radius:999px !important;padding:6px 12px !important;font-family:inherit;font-weight:700;font-size:.8rem;color:#888 !important;cursor:pointer;}
.chordlab-wrap .cl-nm button.active{background:var(--brand) !important;color:#fff !important;}
.chordlab-wrap .cl-i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;border-radius:50% !important;border:1.5px solid currentColor !important;background:transparent !important;color:var(--brand) !important;font:italic 700 11px/1 Georgia,serif;padding:0 !important;margin-inline-start:6px;cursor:pointer;vertical-align:middle;opacity:.75;}
.chordlab-wrap .cl-i:hover,.chordlab-wrap .cl-i:focus-visible{opacity:1;}
.chordlab-wrap #typeRow > .cl-i,.chordlab-wrap #scMinorRow > .cl-i{align-self:center;}
.cl-pop{position:fixed;z-index:100003;background:#1f3a42;color:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:.88rem;line-height:1.6;direction:rtl;text-align:right;animation:clPop .14s ease-out;}
.cl-pop b{display:block;color:#ffd08a;margin-bottom:4px;font-size:.92rem;}
.cl-pop p{margin:0;}
@keyframes clPop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.chordlab-wrap .nr-name{font-size:.8rem;color:#999;margin-top:2px;}
.chordlab-wrap.cl-sol .cell{font-size:.68em;letter-spacing:-.02em;}
.chordlab-wrap .en-sep{color:#bbb;}
.chordlab-wrap .sc-name .en-term{font-size:.55em;}
.chordlab-wrap .cl-sound{flex-wrap:nowrap;}
.chordlab-wrap .cl-sound select{max-width:52vw;}
/* ===== v1.3 scale chord slot ===== */
.chordlab-wrap .sc-chord-slot{display:none;margin-top:12px;background:var(--bg);border-radius:14px;padding:12px 10px 10px;}
.chordlab-wrap .sc-chord-slot.on{display:block;animation:clPop .16s ease-out;}
.chordlab-wrap .sc-chord-slot .result{margin:0;}
.chordlab-wrap .degree-btn.active{background:var(--brand) !important;color:#fff !important;}
.chordlab-wrap .degree-btn.active .num{color:rgba(255,255,255,.75) !important;}
/* ===== v1.4 page accordions ===== */
.chordlab-wrap details.cl-acc{background:#fff;border:0;border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.07);margin-top:12px;padding:0;}
.chordlab-wrap details.cl-acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;}
.chordlab-wrap details.cl-acc>summary h2{margin:0;font-size:15px;color:var(--brand);}
.chordlab-wrap details>summary::-webkit-details-marker{display:none;}
.chordlab-wrap details.cl-acc>summary::after,.chordlab-wrap details.cl-q>summary::after{content:'';flex:0 0 auto;width:8px;height:8px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(45deg);transition:transform .2s;margin-top:-4px;}
.chordlab-wrap details[open].cl-acc>summary::after,.chordlab-wrap details[open].cl-q>summary::after{transform:rotate(-135deg);margin-top:4px;}
.chordlab-wrap details.cl-acc>.cl-acc-body{padding:0 16px 12px;}
.chordlab-wrap details.cl-acc>.cl-acc-body>h3:first-child,.chordlab-wrap details.cl-acc>.cl-acc-body>p:first-child{margin-top:0;}
.chordlab-wrap details.cl-q{border-top:1px solid var(--line);}
.chordlab-wrap details.cl-q>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;font-weight:700;font-size:13.5px;color:var(--ink);}
.chordlab-wrap details.cl-q>summary::after{width:6px;height:6px;opacity:.7;}
.chordlab-wrap details.cl-q>p{padding:0 0 12px;}
.chordlab-wrap details.cl-acc>.cl-acc-body>p:first-child+details.cl-q{margin-top:8px;}