/* ══════════════════════════════════════════════════════════
   iStrum Shared Stylesheet
   Combines legacy styles with dashboard, analytics, and form styles.
══════════════════════════════════════════════════════════ */

:root {
  --bg:        #080808;
  --bg2:       #121212;
  --bg-card:   #181818;
  --glass:     rgba(255,255,255,0.03);
  --glass-h:   rgba(255,255,255,0.06);
  --border:    rgba(255,255,255,0.08);
  --border-a:  rgba(255,255,255,0.6);
  --txt:       #fbfbfb;
  --txt2:      #cccccc;
  --txt-m:     #888888;
  --accent:    #ffffff;
  --accent2:   #dddddd;
  --accent-rgb: 255,255,255;
  --glow:      rgba(255,255,255,0.15);
  --gradient:  linear-gradient(135deg,#ffffff,#888888,#444444);
  --green:     #10b981;
  --blue:      #3b82f6;
  --amber:     #f59e0b;
  --red:       #ef4444;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px;
  --t: all 0.2s cubic-bezier(0.4,0,0.2,1);
  --font: 'Inter',sans-serif;
  --font-d: 'Space Grotesk',sans-serif;
  --font-m: 'JetBrains Mono',monospace;

  /* Paper Canvas Themes (Dark Default - Black & White) */
  --p-bg:     #121212;
  --p-border: #333333;
  --p-txt:    #ffffff;
  --p-chord:  #ffffff;
  --p-chord-b:#888888;
  --p-sep:    #444444;
  --p-title:  #ffffff;
  --p-lyric:  #ffffff;
}

body.light-mode {
  --bg:#ffffff; --bg2:#f5f5f5; --bg-card:#eaeaea;
  --glass:rgba(0,0,0,0.03); --glass-h:rgba(0,0,0,0.06);
  --border:rgba(0,0,0,0.1); --border-a:rgba(0,0,0,0.6);
  --txt:#080808; --txt2:#333333; --txt-m:#666666;
  --accent:#000000; --accent2:#222222; --accent-rgb:0,0,0; --glow:rgba(0,0,0,0.15);
  --gradient: linear-gradient(135deg,#000000,#666666,#aaaaaa);

  /* Light Paper Canvas Theme */
  --p-bg:      #ffffff;
  --p-border:  #dddddd;
  --p-txt:     #000000;
  --p-chord:   #000000;
  --p-chord-b: #888888;
  --p-sep:     #cccccc;
  --p-title:   #000000;
  --p-lyric:   #000000;
}

body.theme-green {
  --bg:        #061a12;
  --bg2:       #0b291d;
  --bg-card:   #123c2c;
  --glass:     rgba(16,185,129,0.03);
  --glass-h:   rgba(16,185,129,0.08);
  --border:    rgba(16,185,129,0.15);
  --border-a:  rgba(16,185,129,0.6);
  --txt:       #e6f9f2;
  --txt2:      #a7f3d0;
  --txt-m:     #58b38a;
  --accent:    #10b981;
  --accent2:   #059669;
  --accent-rgb: 16,185,129;
  --glow:      rgba(16,185,129,0.3);
  --gradient:  linear-gradient(135deg,#10b981,#059669,#065f46);
  
  --p-bg:     #0b291d;
  --p-border: #123c2c;
  --p-txt:    #e6f9f2;
  --p-chord:  #10b981;
  --p-chord-b:#059669;
  --p-sep:    #065f46;
  --p-title:  #e6f9f2;
  --p-lyric:  #e6f9f2;
}

body.theme-green.light-mode {
  --bg: #eefdf8; --bg2: #d1fae5; --bg-card: #ffffff;
  --glass: rgba(16,185,129,0.05); --glass-h: rgba(16,185,129,0.1);
  --border: rgba(16,185,129,0.2); --border-a: rgba(16,185,129,0.7);
  --txt: #062f21; --txt2: #047857; --txt-m: #059669;
  --accent: #059669; --accent2: #047857; --accent-rgb: 5,150,105; --glow: rgba(16,185,129,0.2);
  --gradient: linear-gradient(135deg,#059669,#047857,#065f46);
  
  --p-bg:      #ffffff;
  --p-border:  #a7f3d0;
  --p-txt:     #062f21;
  --p-chord:   #047857;
  --p-chord-b: #059669;
  --p-sep:     #d1fae5;
  --p-title:   #062f21;
  --p-lyric:   #062f21;
}

body.theme-brown {
  --bg:        #18100a;
  --bg2:       #261a10;
  --bg-card:   #342416;
  --glass:     rgba(217,119,6,0.03);
  --glass-h:   rgba(217,119,6,0.08);
  --border:    rgba(217,119,6,0.15);
  --border-a:  rgba(217,119,6,0.6);
  --txt:       #fef3c7;
  --txt2:      #fde68a;
  --txt-m:     #d97706;
  --accent:    #d97706;
  --accent2:   #b45309;
  --accent-rgb: 217,119,6;
  --glow:      rgba(217,119,6,0.3);
  --gradient:  linear-gradient(135deg,#d97706,#b45309,#78350f);
  
  --p-bg:     #261a10;
  --p-border: #342416;
  --p-txt:    #fef3c7;
  --p-chord:  #d97706;
  --p-chord-b:#b45309;
  --p-sep:    #78350f;
  --p-title:  #fef3c7;
  --p-lyric:  #fef3c7;
}

body.theme-brown.light-mode {
  --bg: #fefaf0; --bg2: #fef3c7; --bg-card: #ffffff;
  --glass: rgba(217,119,6,0.05); --glass-h: rgba(217,119,6,0.1);
  --border: rgba(217,119,6,0.2); --border-a: rgba(217,119,6,0.7);
  --txt: #451a03; --txt2: #b45309; --txt-m: #d97706;
  --accent: #b45309; --accent2: #92400e; --accent-rgb: 180,83,9; --glow: rgba(217,119,6,0.2);
  --gradient: linear-gradient(135deg,#b45309,#92400e,#78350f);
  
  --p-bg:      #ffffff;
  --p-border:  #fde68a;
  --p-txt:     #451a03;
  --p-chord:   #b45309;
  --p-chord-b: #d97706;
  --p-sep:     #fef3c7;
  --p-title:   #451a03;
  --p-lyric:   #451a03;
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--txt);min-height:100vh;overflow-x:hidden;transition:var(--t)}
body::before{content:'';position:;inset:0;background:radial-gradient(ellipse at 20% 20%,rgba(var(--accent-rgb),.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(var(--accent-rgb),.06) 0%,transparent 50%);pointer-events:none;z-index:0}

/* ── Layout ────────────────────────────────────────────── */
#app{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:0 20px 250px}

/* ── Header ────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:200;padding:0 20px;margin:0 -20px;background:var(--bg2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.header-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:8px 0;flex-wrap:wrap;justify-content:space-between}

/* ── Logo ──────────────────────────────────────────────── */
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}
.logo-icon{width:34px;height:34px;background:#fff;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 2px 10px rgba(168,85,247,.25);flex-shrink:0}
.logo-icon img{width:26px;height:26px;object-fit:contain}
.logo-wm{font-family:var(--font-d);font-size:1.2rem;font-weight:700;letter-spacing:-.02em}
.logo-wm .i{color:#a855f7}
.logo-wm .s{color:var(--txt)}

/* ── Shared Controls ───────────────────────────────────── */
.ctrl-grp{display:flex;align-items:center;gap:4px;padding:3px 8px 3px 3px;background:var(--glass);border:1px solid var(--border);border-radius:var(--r-xl);transition:var(--t)}
.ctrl-grp:hover{background:var(--glass-h);border-color:var(--border-a)}
.ctrl-lbl{font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-m);padding-left:4px}
.divider{width:1px;height:22px;background:var(--border);flex-shrink:0}
.hdr-ctrls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1;justify-content:flex-end}

/* ── Buttons ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:5px 11px;border-radius:var(--r-md);border:none;cursor:pointer;font-family:var(--font);font-size:.77rem;font-weight:600;transition:var(--t);white-space:nowrap;user-select:none;text-decoration:none}
.btn:active{transform:scale(.95)}
.btn-primary{background:var(--gradient);color:#fff;box-shadow:0 2px 12px var(--glow)}
.btn-primary:hover{box-shadow:0 4px 20px var(--glow);transform:translateY(-1px)}
.btn-ghost{background:var(--glass);color:var(--txt2);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--glass-h);color:var(--txt);border-color:var(--border-a)}
.btn-ghost.active{background:rgba(168,85,247,.15);color:var(--accent);border-color:var(--accent)}
.btn-success{background:rgba(16,185,129,.12);color:var(--green);border:1px solid rgba(16,185,129,.3)}
.btn-success:hover{background:rgba(16,185,129,.22)}
.btn-lib{background:rgba(59,130,246,.12);color:#60a5fa;border:1px solid rgba(59,130,246,.3)}
.btn-lib:hover{background:rgba(59,130,246,.22)}
.btn-view{background:rgba(99,102,241,.12);color:#a5b4fc;border:1px solid rgba(99,102,241,.3)}
.btn-view:hover{background:rgba(99,102,241,.22)}
.btn-exp{background:var(--glass);color:var(--txt2);border:1px solid var(--border);font-size:.72rem}
.btn-exp:hover{background:var(--glass-h);color:var(--txt);border-color:var(--border-a)}
.btn-amber{background:rgba(245,158,11,.12);color:#fbbf24;border:1px solid rgba(245,158,11,.3)}
.btn-amber:hover{background:rgba(245,158,11,.22)}
.btn-danger{background:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.3)}
.btn-danger:hover{background:rgba(239,68,68,.22)}
.btn-tr{width:28px;height:28px;padding:0;border-radius:var(--r-sm);font-size:.95rem;font-weight:700;background:rgba(168,85,247,.1);color:var(--accent);border:1px solid var(--border-a)}
.btn-tr:hover{background:rgba(168,85,247,.25)}
.tr-disp{font-family:var(--font-m);font-size:.78rem;color:var(--accent);min-width:26px;text-align:center;font-weight:700}

/* ── Dropdown ──────────────────────────────────────────── */
.dropdown { position: relative; display: inline-block; user-select: none; }
.dropdown > summary { list-style: none; user-select: none; cursor: pointer; }
.dropdown > summary::-webkit-details-marker { display: none; }
.drop-content { position: absolute; top: calc(100% + 6px); right: 0; background: rgba(26,5,51,0.95); backdrop-filter: blur(10px); border: 1px solid var(--border-a); border-radius: var(--r-md); box-shadow: 0 8px 32px rgba(0,0,0,0.5); padding: 8px; display: flex; flex-direction: column; gap: 8px; z-index: 1000; min-width: 140px; animation: slideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
body.light-mode .drop-content { background: rgba(255,255,255,0.95); }
.drop-content .btn { justify-content: flex-start; padding: 8px 12px; }
.drop-content .ctrl-grp { width: 100%; justify-content: space-between; }
.drop-left { right: auto; left: 0; }
.dropdown[open] > summary { opacity: 0.8; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Hero & Search ─────────────────────────────────────── */
.hero{padding:50px 0 32px;text-align:center}
.hero.hidden{display:none}
.hero-title{font-family:var(--font-d);font-size:clamp(2.5rem,6vw,4rem);font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px;letter-spacing:-0.03em}
.hero-sub{font-size:1rem;color:var(--txt2);margin-bottom:32px}

/* Search Bar */
.search-bar-wrap { position: relative; max-width: 520px; margin: 0 auto 36px; display: flex; align-items: center; background: var(--glass); border: 1px solid var(--border); border-radius: 99px; padding: 6px 6px 6px 18px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); transition: var(--t); }
.search-bar-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 16px var(--glow); background: rgba(168,85,247,0.05); }
.search-inp { background: transparent; border: none; outline: none; color: var(--txt); font-family: var(--font); font-size: 0.95rem; width: 100%; padding-right: 10px; }
.search-inp::placeholder { color: var(--txt-m); }

.lyrics-wrap{position:relative;max-width:680px;margin:0 auto}
#lyricsInput{width:100%;min-height:200px;padding:18px;background:var(--glass);border:1px solid var(--border);border-radius:var(--r-lg);color:var(--txt);font-family:var(--font-m);font-size:.88rem;line-height:1.75;resize:vertical;outline:none;transition:var(--t)}
#lyricsInput::placeholder{color:var(--txt-m)}
#lyricsInput:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--glow);background:var(--glass-h)}
.input-acts{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}

/* ── Editor Container ──────────────────────────────────── */
#editorContainer{display:none;margin-top:8px}
#editorContainer.visible{display:block;animation:fadeUp .35s ease forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Editor top toolbars */
.ed-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px;flex-wrap:wrap}
.ed-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.song-lbl{font-size:.78rem;color:var(--txt-m)}
.song-inp{background:transparent;border:none;border-bottom:1px dashed var(--border);color:var(--txt);font-family:var(--font-d);font-size:.95rem;font-weight:600;outline:none;padding:2px 4px;width:200px;transition:var(--t)}
.song-inp:focus{border-bottom-color:var(--accent)}
#saveInd{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;font-weight:600;color:var(--green);opacity:0;transition:opacity .3s;pointer-events:none;padding:2px 8px;border-radius:99px;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25)}
#saveInd.on{opacity:1}
.save-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 1s ease forwards}
@keyframes pulse{0%{transform:scale(.5);opacity:0}30%{transform:scale(1.3);opacity:1}100%{transform:scale(1);opacity:1}}
.last-sv{font-size:.65rem;color:var(--txt-m);white-space:nowrap}
.fs-disp{font-size:.75rem;font-weight:700;color:var(--accent);min-width:34px;text-align:center;font-family:var(--font-m)}
.align-grp{display:flex;gap:2px}
.align-grp .btn{padding:4px 8px;font-size:.8rem;border-radius:var(--r-sm)}

/* ── Canvas Wrapper + A4 ───────────────────────────────── */
.canvas-wrap{overflow-x:auto;width:100%}
#editorCanvas{
  background:var(--p-bg);
  border:1px solid var(--p-border);
  border-radius:var(--r-lg);
  padding:40px 96px; /* 96px = 1 inch margins on left and right */
  box-shadow:0 4px 24px rgba(0,0,0,.25);
  width:794px;
  min-height:1123px;
  margin:0 auto;
  transition:background .3s,border-color .3s,color .3s;
  display: flex;
  flex-direction: column;
}
#editorCanvas.landscape{width:1123px;min-height:794px}
body.light-mode #editorCanvas{box-shadow:0 4px 24px rgba(0,0,0,.1)}

/* Canvas Title & Watermark */
#songTitleDisplay{font-family:var(--font-d);font-size:1.4rem;font-weight:700;color:var(--p-title);margin-bottom:18px;padding-bottom:10px;border-bottom:1.5px solid var(--p-sep)}

/* Chord & Lyric Blocks */
.chord-line{display:flex;flex-wrap:wrap;gap:0 10px;margin-bottom:6px;align-items:flex-end;justify-content:flex-start}
.chord-line.nowrap{flex-wrap:nowrap}
.chord-line.empty-line{height:12px;margin-bottom:4px}
.chord-line.al-center{justify-content:center}
.chord-line.al-right{justify-content:flex-end}
.chord-line.al-justify{justify-content:space-between}

.word-block{display:flex;flex-direction:column;align-items:flex-start;position:relative;flex-shrink:0}
.ci-wrap{position:relative;min-height:22px}
.chord-input{font-family:var(--font-m);font-size:.8rem;font-weight:700;color:var(--p-chord);background:transparent;border:none;border-bottom:1.5px solid transparent;outline:none;padding:0 2px;min-width:30px;transition:var(--t);letter-spacing:.03em;caret-color:var(--accent)}
.chord-input::placeholder{color:#45475a;font-weight:400;font-size:.65rem}
.chord-input:focus{border-bottom-color:var(--accent);background:rgba(203,166,247,.08);border-radius:3px 3px 0 0}
.chord-input.has-chord{border-bottom-color:var(--p-chord-b)}
body.light-mode .chord-input::placeholder{color:#ccc}
body.light-mode .chord-input:focus{background:rgba(168,85,247,.06)}

.lyric-word{font-family:var(--font);font-weight:400;color:var(--p-lyric);line-height:1.2;padding:0 2px;white-space:nowrap;cursor:pointer;transition:font-size .15s}
.lyric-word:hover{color:var(--accent)}

/* ── Sticky Chord Keyboard ───────────────────────────────────── */
.sticky-kbd { position: fixed; bottom: 0; left: 0; right: 0; background: #1a0533; border-top: 1px solid rgba(168,85,247,.5); z-index: 10000; padding: 10px; box-shadow: 0 -4px 20px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 8px; transform: translateY(100%); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); user-select: none; }
.sticky-kbd.show { transform: translateY(0); }
.kbd-row { display: flex; gap: 6px; justify-content: center; }
.kbd-btn { flex: 1; padding: 12px 6px; background: rgba(168,85,247,0.1); color: #c084fc; border: 1px solid rgba(168,85,247,0.3); border-radius: 6px; font-family: var(--font-m); font-size: 1.1rem; font-weight: 700; text-align: center; cursor: pointer; transition: all 0.1s; display: flex; align-items: center; justify-content: center;}
.kbd-btn:hover { background: rgba(168,85,247,0.25); }
.kbd-btn:active { background: #a855f7; color: #fff; transform: scale(0.96); }
.kbd-btn.action-btn { font-size: 0.85rem; font-weight: 600; background: rgba(255,255,255,0.05); color: #e2e8f0; border-color: rgba(255,255,255,0.1); }
.kbd-title { font-size: 0.7rem; color: var(--txt-m); text-transform: uppercase; letter-spacing: 0.05em; text-align: center; margin-bottom: 2px; }
.kbd-scroll-container { overflow-x: auto; width: 100%; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.kbd-scroll-wrapper { display: flex; flex-direction: column; gap: 6px; width: max-content; margin: 0 auto; padding: 0 10px; }
.kbd-scroll-row { display: flex; gap: 6px; flex-wrap: nowrap; justify-content: flex-start; }
.kbd-scroll-row .kbd-btn { flex: 0 0 auto; width: 48px; padding: 10px 2px; font-size: 0.95rem; }

/* ── Modals & Dialogs ──────────────────────────────────── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(10px);z-index:8000;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto}
.modal-overlay.on{display:flex;animation:fadeIn .2s ease}
.modal-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-xl);width:100%;margin:auto;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.5);animation:slideUp .3s cubic-bezier(.4,0,.2,1)}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;background:var(--bg-card);border-bottom:1px solid var(--border)}
.modal-title{font-family:var(--font-d);font-size:1rem;font-weight:700;color:var(--txt)}
.modal-close{background:none;border:none;color:var(--txt-m);font-size:1.4rem;cursor:pointer;line-height:1;transition:var(--t)}
.modal-close:hover{color:var(--txt)}
.modal-body{padding:20px 22px}
.modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--border)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}

/* Confirm & Forms */
.confirm-msg{font-size:.9rem;color:var(--txt2);line-height:1.6;margin-bottom:4px;padding:0 22px 12px}
#modalLyricsInput{width:100%;min-height:180px;padding:14px;background:var(--glass);border:1px solid var(--border);border-radius:var(--r-md);color:var(--txt);font-family:var(--font-m);font-size:.86rem;line-height:1.75;resize:vertical;outline:none;transition:var(--t)}
#modalLyricsInput::placeholder{color:var(--txt-m)}
#modalLyricsInput:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}

/* ── Song Grid on Home / Library ───────────────────────── */
.song-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;max-height:500px;overflow-y:auto;padding:4px}
.song-card{background:var(--glass);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;cursor:pointer;transition:var(--t);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:120px}
.song-card:hover{background:var(--glass-h);border-color:var(--border-a);transform:translateY(-2px);box-shadow:0 6px 20px rgba(168,85,247,0.15)}
.song-card.active-s{border-color:var(--accent);background:rgba(168,85,247,.08)}
.sc-title{font-family:var(--font-d);font-size:1.05rem;font-weight:700;color:var(--txt);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-meta{font-size:.72rem;color:var(--txt-m);margin-bottom:12px}
.sc-stats{display:flex;gap:6px;margin-bottom:4px;flex-wrap:wrap}
.sc-stat{font-size:.65rem;font-weight:600;background:rgba(168,85,247,.1);color:var(--accent);padding:2px 8px;border-radius:99px}
.sc-acts{display:flex;gap:6px;margin-top:10px}
.active-badge{position:absolute;top:12px;right:12px;background:var(--accent);color:#fff;font-size:.58rem;font-weight:700;padding:2px 8px;border-radius:99px;text-transform:uppercase;letter-spacing:.05em}
.lib-empty{text-align:center;padding:48px 20px;color:var(--txt-m);grid-column:1/-1}
.lib-empty-icon{font-size:3rem;margin-bottom:12px}
.lib-empty-txt{font-size:.88rem;line-height:1.6}

/* ── View Modal Sheet ──────────────────────────────────── */
#viewSheet{font-family:var(--font);display:flex;flex-direction:column;flex-grow:1;justify-content:space-between;min-height:100%}
.view-song-title{font-family:var(--font-d);font-size:1.4rem;font-weight:700;color:var(--p-title);margin-bottom:18px;padding-bottom:10px;border-bottom:1.5px solid var(--p-sep)}
.view-line{display:flex;flex-wrap:wrap;gap:0 10px;margin-bottom:5px;align-items:flex-end}
.view-line.al-center{justify-content:center}
.view-line.al-right{justify-content:flex-end}
.view-line.al-justify{justify-content:space-between}
.view-empty{height:10px;margin-bottom:4px}
.view-block{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0}
.view-chord{font-family:var(--font-m);font-weight:700;color:var(--p-chord);line-height:1.2;min-height:18px;padding:0 2px;white-space:pre}
.view-chord.empty{visibility:hidden}
.view-lyric{font-family:var(--font);font-weight:400;color:var(--p-lyric);line-height:1.2;padding:0 2px;white-space:nowrap}

/* Watermark */
.view-watermark{margin-top:36px;padding-top:14px;border-top:1px solid var(--p-sep);text-align:center}
.wm-name{font-family:var(--font-d);font-size:1rem;font-weight:700;color:var(--p-title);letter-spacing:.12em;text-transform:uppercase}
.wm-min{font-size:.72rem;font-weight:600;color:var(--p-chord-b);margin-top:2px;letter-spacing:.06em}
.wm-glory{font-size:.65rem;font-style:italic;color:var(--p-chord-b);margin-top:2px}

/* ── Progress & Toast ──────────────────────────────────── */
#progressOverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);z-index:99999;align-items:center;justify-content:center}
#progressOverlay.on{display:flex}
.prog-card{background:var(--bg-card);border:1px solid var(--border-a);border-radius:var(--r-xl);padding:28px 36px;text-align:center}
.prog-spin{width:42px;height:42px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
.prog-txt{font-size:.86rem;color:var(--txt2)}

#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg2);border:1px solid var(--border-a);border-radius:var(--r-xl);padding:9px 20px;font-size:.82rem;font-weight:500;color:var(--txt);box-shadow:0 4px 20px rgba(0,0,0,.4);opacity:0;pointer-events:none;z-index:99999;transition:all .3s cubic-bezier(.4,0,.2,1)}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* Scrollbars */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-a);border-radius:3px}

/* ── NEW: Admin Forms & Login ────────────────────────── */
.admin-login-wrap { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 180px); }
.admin-login-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-xl); width: 100%; max-width: 400px; padding: 32px; box-shadow: 0 12px 40px rgba(0,0,0,0.6); position: relative; }
.admin-login-card::after { content: ''; position: absolute; -inset: -2px; border-radius: calc(var(--r-xl) + 2px); background: var(--gradient); z-index: -1; opacity: 0.3; filter: blur(8px); }
.login-title { font-family: var(--font-d); font-size: 1.6rem; font-weight: 700; margin-bottom: 24px; text-align: center; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.form-label { font-size: 0.82rem; font-weight: 600; color: var(--txt2); text-transform: uppercase; letter-spacing: 0.05em; }
.form-control { background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 16px; color: var(--txt); font-family: var(--font); font-size: 0.95rem; outline: none; transition: var(--t); }
.form-control:focus { border-color: var(--accent); background: var(--glass-h); box-shadow: 0 0 10px rgba(168,85,247,0.2); }

/* ── NEW: Admin Dashboard Tabs & Analytics ────────────── */
.admin-nav { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.admin-tabs { display: flex; gap: 8px; }
.admin-tab { padding: 12px 20px; font-family: var(--font-d); font-weight: 600; font-size: 0.92rem; color: var(--txt-m); border-bottom: 2px solid transparent; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: var(--t); }
.admin-tab:hover { color: var(--txt); }
.admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.admin-section { display: none; }
.admin-section.active { display: block; animation: fadeIn 0.3s ease; }

/* Dashboard Cards */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-bottom: 28px; }
.stat-card { background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; display: flex; align-items: center; gap: 18px; transition: var(--t); }
.stat-card:hover { transform: translateY(-2px); background: var(--glass-h); border-color: var(--border-a); }
.stat-icon { width: 50px; height: 50px; border-radius: 12px; background: rgba(168,85,247,0.12); color: var(--accent); border: 1px solid var(--border-a); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.stat-info { display: flex; flex-direction: column; }
.stat-val { font-family: var(--font-d); font-size: 1.8rem; font-weight: 700; color: var(--txt); }
.stat-lbl { font-size: 0.78rem; color: var(--txt-m); text-transform: uppercase; letter-spacing: 0.05em; }

/* Elegant logs table */
.table-responsive { width: 100%; overflow-x: auto; background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 4px 20px rgba(0,0,0,0.15); margin-bottom: 20px; }
.fancy-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.88rem; }
.fancy-table th { background: var(--bg-card); color: var(--txt); font-family: var(--font-d); font-weight: 600; padding: 14px 18px; border-bottom: 1.5px solid var(--border); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
.fancy-table td { padding: 12px 18px; color: var(--txt2); border-bottom: 1px solid var(--border); transition: var(--t); }
.fancy-table tr:last-child td { border-bottom: none; }
.fancy-table tr:hover td { background: rgba(255,255,255,0.02); color: var(--txt); }

/* Badges */
.badge { display: inline-flex; align-items: center; justify-content: center; padding: 3px 8px; border-radius: 99px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.badge-png { background: rgba(16,185,129,0.12); color: var(--green); border: 1px solid rgba(16,185,129,0.3); }
.badge-pdf { background: rgba(239,68,68,0.12); color: var(--red); border: 1px solid rgba(239,68,68,0.3); }
.badge-docx { background: rgba(59,130,246,0.12); color: var(--blue); border: 1px solid rgba(59,130,246,0.3); }

/* ── Custom Download Prompts Overlay ──────────────────── */
#downloadPromptOverlay { z-index: 15000; }
#downloadPromptOverlay .modal-card { max-width: 440px; }

/* ── Utilities & Responsive ────────────────────────────── */
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }

@media(max-width:768px){
  #app{padding:0 12px 250px}
  header{padding:0 12px}
  .logo-wm{display:none}
  .ctrl-lbl{display:none}
  #editorCanvas{width:100% !important;max-width:100%;min-height:unset !important;padding:22px 18px}
  #viewSheet{padding:28px 22px}
  .stats-grid { grid-template-columns: 1fr; }
}

@media(max-width:480px){
  .hdr-ctrls{gap:4px}
  .btn{padding:6px 8px;font-size:0.75rem}
  .ed-meta{width:100%;justify-content:flex-start;gap:6px}
  .song-lbl{display:none}
  .song-inp{flex:1;max-width:none;font-size:0.95rem}
  .header-inner{padding:6px 0}
  .drop-left{right:0;left:auto;max-width:calc(100vw - 20px)}
  .ed-toolbar{gap:10px}
  .ed-toolbar > div:last-child{width:100%;justify-content:space-between}
  .ed-toolbar > div:last-child > .btn, .ed-toolbar > div:last-child > details{flex:1;text-align:center}
  .ed-toolbar > div:last-child > details > summary{width:100%;justify-content:center}
  .modal-card{margin:10px;max-width:calc(100vw - 20px)!important;width:auto}
  .admin-nav { flex-direction: column; align-items: flex-start; }
}

/* ── Landing Page and Account Request Card ─────────────── */
.request-card {
  background: var(--glass);
  border: 1px solid var(--border-a);
  border-radius: var(--r-xl);
  padding: 32px;
  max-width: 520px;
  margin: 48px auto;
  box-shadow: 0 8px 32px var(--glow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.request-title {
  font-family: var(--font-d);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 12px;
  text-align: center;
}
.request-desc {
  font-size: 0.82rem;
  color: var(--txt2);
  line-height: 1.6;
  margin-bottom: 20px;
  text-align: center;
}

/* Theme picker elements */
.theme-picker-list {
  display: flex;
  gap: 4px;
  background: var(--glass);
  border: 1px solid var(--border);
  padding: 2px;
  border-radius: 99px;
}
.theme-pick-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--txt-m);
  transition: var(--t);
}
.theme-pick-btn:hover {
  color: var(--txt);
  background: var(--glass-h);
}
.theme-pick-btn.active {
  color: var(--bg);
  background: var(--accent);
}

/* ══════════════════════════════════════════════════════════
   LANDING PAGE — 3 SECTIONS
   ══════════════════════════════════════════════════════════ */

#landingView {
  width: 100%;
  scroll-snap-type: none;
}

.landing-sec {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px 60px;
  position: relative;
  overflow: hidden;
}

/* Section 1 specific */
#landingSec1 {
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.04) 0%, transparent 70%),
              var(--bg);
}

/* Section 2 specific */
#landingSec2 {
  background: var(--bg2);
  border-top: 1px solid var(--border);
}

/* Section 3 - Dedication */
.dedication-sec {
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.05) 0%, transparent 60%),
              var(--bg);
  border-top: 1px solid var(--border);
}

.landing-sec-inner {
  max-width: 900px;
  width: 100%;
  text-align: center;
}

/* Section badge pill */
.landing-badge {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--border-a);
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--txt2);
  margin-bottom: 18px;
  font-family: var(--font-d);
  backdrop-filter: blur(10px);
  animation: fadeSlideDown 0.6s ease both;
}

/* Section titles */
.landing-h1 {
  font-size: clamp(2.8rem, 7vw, 5rem) !important;
  animation: fadeSlideDown 0.7s ease 0.1s both;
}

.landing-sec-title {
  font-family: var(--font-d);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--txt);
  margin-bottom: 16px;
  line-height: 1.2;
  animation: fadeSlideDown 0.7s ease 0.15s both;
}

.landing-intro {
  color: var(--txt2);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto;
  animation: fadeSlideDown 0.7s ease 0.2s both;
}

.landing-sec-desc {
  color: var(--txt2);
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 680px;
  margin: 0 auto 32px;
}

/* ── Bible Verse Floating Cards ── */
.bible-verse-float {
  position: absolute;
  max-width: 240px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  backdrop-filter: blur(10px);
  text-align: left;
}

.bv-left {
  left: 3%;
  top: 25%;
  animation: floatLeft 6s ease-in-out infinite;
}

.bv-right {
  right: 3%;
  top: 20%;
  animation: floatRight 7s ease-in-out infinite;
}

.bible-verse-center {
  margin-top: 50px;
  text-align: center;
  animation: fadeSlideDown 0.8s ease 0.35s both;
}

.bible-verse-center .bv-ref {
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--font-d);
  color: var(--txt);
  display: block;
  margin-bottom: 6px;
}

.bible-verse-center .bv-text {
  font-size: 1rem;
  color: var(--txt2);
  font-style: italic;
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto 4px;
}

.bible-verse-center .bv-kjv {
  font-size: 0.75rem;
  color: var(--txt-m);
}

.bv-ref {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  font-family: var(--font-d);
  color: var(--accent);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.bv-text {
  font-size: 0.82rem;
  color: var(--txt2);
  font-style: italic;
  line-height: 1.55;
  margin: 0 0 6px;
}

.bv-kjv {
  font-size: 0.68rem;
  color: var(--txt-m);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ── Scroll Hint ── */
.scroll-hint {
  display: inline-block;
  margin-top: 40px;
  color: var(--txt-m);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  animation: bounce 2s infinite;
  font-weight: 600;
  transition: color 0.2s;
}
.scroll-hint:hover { color: var(--txt); }

/* Landing hero center */
.landing-hero-center {
  text-align: center;
  z-index: 1;
  position: relative;
  animation: fadeSlideDown 0.6s ease both;
}

/* ── Features Grid ── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin: 36px 0;
}

.feature-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  text-align: center;
  transition: var(--t);
}

.feature-card:hover {
  background: var(--glass-h);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-4px);
}

.feat-icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

.feat-title {
  font-family: var(--font-d);
  font-weight: 700;
  color: var(--txt);
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.feat-desc {
  font-size: 0.8rem;
  color: var(--txt2);
  line-height: 1.5;
  margin: 0;
}

/* ── Instruments Section ── */
.instruments-wrap {
  margin-top: 48px;
  text-align: center;
}

.instruments-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--txt-m);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.instrument-cards {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.instrument-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px 24px;
  min-width: 140px;
  text-align: center;
  animation: floatInstr 4s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  transition: var(--t);
  cursor: default;
}

.instrument-card:hover {
  background: var(--glass-h);
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-8px) scale(1.04);
}

.instrument-card.featured {
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.05);
}

.instr-emoji {
  font-size: 3rem;
  margin-bottom: 10px;
  display: block;
  animation: swing 3s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.instr-name {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 1rem;
  color: var(--txt);
  margin-bottom: 4px;
}

.instr-sub {
  font-size: 0.72rem;
  color: var(--txt-m);
}

/* Instrument photo */
.instruments-img-wrap {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  max-width: 780px;
  margin: 0 auto;
  position: relative;
}

.instruments-img {
  width: 100%;
  display: block;
  border-radius: var(--r-xl);
  filter: brightness(0.92);
  transition: filter 0.4s;
}

.instruments-img-wrap:hover .instruments-img {
  filter: brightness(1.05);
}

/* ── Dedication Card ── */
.dedication-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-xl);
  padding: 36px 40px;
  margin: 24px auto 0;
  max-width: 580px;
  position: relative;
}

.dedication-card::before {
  content: '\201C';
  position: absolute;
  top: -10px;
  left: 24px;
  font-size: 6rem;
  color: rgba(255,255,255,0.06);
  font-family: Georgia, serif;
  line-height: 1;
}

.dedication-quote {
  font-size: 1.15rem;
  color: var(--txt);
  font-style: italic;
  line-height: 1.75;
  font-family: Georgia, serif;
}

.dedication-author {
  margin-top: 14px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--txt-m);
  font-family: var(--font-d);
  letter-spacing: 0.06em;
}

/* ── Developer Card ── */
.dev-card {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px 32px;
  margin: 28px auto 0;
  max-width: 560px;
  text-align: left;
  transition: var(--t);
}

.dev-card:hover {
  background: var(--glass-h);
  border-color: rgba(255,255,255,0.18);
}

.dev-avatar {
  font-size: 3rem;
  flex-shrink: 0;
}

.dev-info { display: flex; flex-direction: column; gap: 4px; }

.dev-name {
  font-family: var(--font-d);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--txt);
}

.dev-role {
  font-size: 0.8rem;
  color: var(--txt-m);
  font-weight: 600;
  margin-bottom: 4px;
}

.dev-church {
  font-size: 0.88rem;
  color: var(--txt2);
  font-weight: 700;
}

.dev-loc {
  font-size: 0.8rem;
  color: var(--txt-m);
}

.dev-email {
  font-size: 0.82rem;
  color: var(--accent2);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.dev-email:hover { color: var(--txt); text-decoration: underline; }

/* ══════════════════════════════════════════════════════════
   SITE FOOTER
   ══════════════════════════════════════════════════════════ */
.site-footer {
  background: #0a0a0a;
  border-top: 1px solid var(--border);
  padding: 48px 32px 0;
}

.footer-inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 36px;
}

.footer-brand .footer-tagline {
  font-size: 0.82rem;
  color: var(--txt-m);
  margin: 4px 0 0;
  line-height: 1.5;
}

.footer-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-m);
  margin-bottom: 10px;
  font-family: var(--font-d);
}

.footer-dev-name {
  font-family: var(--font-d);
  font-size: 1rem;
  font-weight: 800;
  color: var(--txt);
  margin-bottom: 4px;
}

.footer-church {
  font-size: 0.82rem;
  color: var(--txt2);
  font-weight: 600;
  margin-bottom: 4px;
}

.footer-loc {
  font-size: 0.78rem;
  color: var(--txt-m);
  margin-bottom: 8px;
}

.footer-email {
  font-size: 0.8rem;
  color: var(--accent2);
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  transition: color 0.2s;
}
.footer-email:hover { color: var(--txt); text-decoration: underline; }

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-link {
  font-size: 0.85rem;
  color: var(--txt2);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-link:hover { color: var(--txt); }

.footer-bottom {
  border-top: 1px solid var(--border);
  text-align: center;
  padding: 18px 0;
  font-size: 0.75rem;
  color: var(--txt-m);
  letter-spacing: 0.03em;
}

/* ══════════════════════════════════════════════════════════
   KEYFRAME ANIMATIONS
   ══════════════════════════════════════════════════════════ */

@keyframes floatLeft {
  0%, 100% { transform: translateY(0px) rotate(-1deg); }
  50%       { transform: translateY(-14px) rotate(1deg); }
}

@keyframes floatRight {
  0%, 100% { transform: translateY(0px) rotate(1deg); }
  50%       { transform: translateY(-18px) rotate(-0.5deg); }
}

@keyframes floatInstr {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

@keyframes swing {
  0%, 100% { transform: rotate(-4deg); }
  50%       { transform: rotate(4deg); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%       { transform: translateY(6px); opacity: 1; }
}

@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive adjustments ── */
@media (max-width: 768px) {
  .bible-verse-float { display: none; }
  .landing-sec { padding: 60px 20px 40px; }
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }
  .dev-card { flex-direction: column; text-align: center; }
  .dedication-card { padding: 24px 20px; }
}