/* ============================================================
   PIMPTHAPEN SITE SKIN v1.0 (v16.8.8)
   Machined graphite console treatment for the main page:
   the Lyric Studio (topbar + shell panels + controls) and the
   Song Transformation Engine — matching the Melody Creator
   studio and the studio-embed banner.
   Pure overlay. Loads after every inline style block.
   ============================================================ */

:root {
  --sk-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ============================================================
   LYRIC STUDIO
   ============================================================ */

/* topbar -> machined rack strip */
.topbar {
  background:
    var(--sk-noise),
    linear-gradient(180deg, #262836 0%, #171826 55%, #101019 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -6px 12px rgba(0, 0, 0, 0.5),
    0 6px 18px rgba(0, 0, 0, 0.55) !important;
}
.topbar-center {
  color: #cbb4ff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 10px rgba(148, 75, 255, 0.35);
}
.tag-btn {
  border-radius: 9px !important;
  border: 1px solid rgba(155, 119, 220, 0.3) !important;
  color: #cfc6ec !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 45%, rgba(0, 0, 0, 0.2)),
    #0d0f16 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -4px 8px rgba(0, 0, 0, 0.5),
    0 2px 5px rgba(0, 0, 0, 0.5) !important;
}
.tag-btn:hover { border-color: rgba(164, 99, 255, 0.7) !important; color: #fff !important; }

/* shell panels -> graphite console modules */
.shell .panel {
  border-radius: 16px !important;
  border: 1px solid rgba(171, 118, 255, 0.24) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background:
    var(--sk-noise),
    radial-gradient(120% 100% at 50% -20%, rgba(151, 78, 255, 0.13), transparent 55%),
    linear-gradient(160deg, #2c2f3b 0%, #1c1e28 30%, #12141c 62%, #1e2029 94%, #14161e 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -16px 28px rgba(0, 0, 0, 0.5),
    0 12px 30px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(132, 59, 255, 0.1) !important;
}
/* replace the old corner brackets with a polished top edge */
.shell .panel::before {
  content: "" !important;
  top: 1px !important; left: 5% !important; right: 5% !important; bottom: auto !important;
  width: auto !important; height: 1px !important;
  border: none !important; border-radius: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), rgba(174, 93, 255, 0.42), transparent) !important;
}
.shell .panel::after {
  content: "" !important;
  top: auto !important; left: 12px !important; right: auto !important; bottom: 10px !important;
  width: 5px !important; height: 5px !important;
  border: none !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%, #ffd7a8, #f59e0b 55%, #7c4a03) !important;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.8) !important;
}

/* engraved section titles with rule line */
.shell .section-label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: #e9d5ff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 10px rgba(148, 75, 255, 0.4) !important;
}
.shell .section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(174, 93, 255, 0.45), transparent);
}

/* sliders -> thin lit faders with metal thumbs */
.shell input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #7a3bff, #2b6bff) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 8px rgba(135, 70, 255, 0.18) !important;
  outline: none;
}
.shell input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #b98aff 30%, #7238df 70%, #28144d);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 6px #9f53ff, 0 2px 4px rgba(0, 0, 0, 0.7);
  cursor: pointer;
}
.shell input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #b98aff 30%, #7238df 70%, #28144d);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 6px #9f53ff;
  cursor: pointer;
}

/* inputs / selects / textareas -> dark inset machined */
.shell select, .shell input[type="text"], .shell input[type="number"], .shell textarea {
  border-radius: 10px !important;
  border: 1px solid rgba(155, 119, 220, 0.3) !important;
  background: #0a0c12 !important;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}
.shell select:focus, .shell input:focus, .shell textarea:focus {
  border-color: rgba(164, 99, 255, 0.8) !important;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7), 0 0 10px rgba(148, 75, 255, 0.3) !important;
  outline: none !important;
}

/* generate button -> lit honeycomb hardware key */
.gen-btn {
  border: 1px solid rgba(191, 143, 255, 0.85) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48'%3E%3Cpath d='M14 1l12 7v14l-12 7L2 22V8z' fill='none' stroke='rgba(255,255,255,0.09)'/%3E%3C/svg%3E"),
    linear-gradient(90deg, #6d28d9, #4338ca 60%, #1d4ed8) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -7px 14px rgba(10, 2, 40, 0.6),
    0 0 18px rgba(144, 68, 255, 0.55),
    0 4px 10px rgba(0, 0, 0, 0.55) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   SONG TRANSFORMATION ENGINE
   ============================================================ */

/* header -> opaque graphite bar with corner screws (green identity kept in the text) */
.transform-header.rack-top, .rack-top {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-bottom: none !important;
  background:
    radial-gradient(circle 6px at 16px 16px, #454857 0 2px, #23252f 2.5px 4px, #0c0d13 4.5px 5.5px, transparent 6px),
    radial-gradient(circle 6px at calc(100% - 16px) 16px, #454857 0 2px, #23252f 2.5px 4px, #0c0d13 4.5px 5.5px, transparent 6px),
    var(--sk-noise),
    radial-gradient(120% 130% at 50% -30%, rgba(46, 255, 138, 0.1), transparent 55%),
    linear-gradient(180deg, #262836 0%, #171826 48%, #0d0e15 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -7px 14px rgba(0, 0, 0, 0.55),
    0 10px 26px rgba(0, 0, 0, 0.65),
    0 0 26px rgba(46, 255, 138, 0.08) !important;
}
.rack-top::after {
  content: "";
  position: absolute;
  top: 1px; left: 6%; right: 6%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), rgba(46, 255, 138, 0.5), transparent);
}
.rack-top .transform-title {
  background: linear-gradient(180deg, #ffffff 15%, #b8ffd9 55%, #22c55e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 16px rgba(46, 255, 138, 0.4));
}
.rack-top .transform-sub { color: #d6e3da !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }

/* chassis -> graphite */
.transform-body.rack-chassis, .rack-chassis {
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-top: none !important;
  background:
    var(--sk-noise),
    radial-gradient(120% 90% at 50% -15%, rgba(46, 255, 138, 0.05), transparent 55%),
    linear-gradient(160deg, #2c2f3b 0%, #1c1e28 28%, #12141c 60%, #1e2029 94%, #14161e 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 5px rgba(0, 0, 0, 0.75),
    inset 0 0 50px rgba(0, 0, 0, 0.3),
    0 22px 50px rgba(0, 0, 0, 0.7) !important;
}

/* step modules -> graphite cards with green engraved labels */
.tf-step.rack-panel, .rack-panel {
  border-radius: 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background:
    var(--sk-noise),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.2)),
    linear-gradient(150deg, #262834 0%, #181a23 45%, #10121a 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -9px 16px rgba(0, 0, 0, 0.5),
    0 5px 14px rgba(0, 0, 0, 0.5) !important;
}
.tf-step-label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: #7dffb5 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 10px rgba(46, 255, 138, 0.4) !important;
}
.tf-step-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(46, 255, 138, 0.4), transparent);
}

/* upload dropzone -> machined inset tray */
.tf-upload {
  border: 1px dashed rgba(46, 255, 138, 0.4) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, #080a09, #0e100f) !important;
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.7), inset 0 -1px 0 rgba(255, 255, 255, 0.04) !important;
}
.tf-upload:hover {
  border-color: #2eff8a !important;
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.7), 0 0 14px rgba(46, 255, 138, 0.25) !important;
}

/* transform engine inputs + selects */
.transform-section select, .transform-section input[type="text"], .transform-section textarea {
  border-radius: 10px !important;
  border: 1px solid rgba(46, 255, 138, 0.28) !important;
  background: #080b09 !important;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7) !important;
}
.transform-section select:focus, .transform-section input:focus, .transform-section textarea:focus {
  border-color: rgba(46, 255, 138, 0.7) !important;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7), 0 0 10px rgba(46, 255, 138, 0.25) !important;
  outline: none !important;
}


/* ===== MY LYRICS MODE ===== */
.mylyrics-toggle {
  margin-bottom: 4px !important;
  border: 1px solid rgba(46, 255, 138, 0.35) !important;
  background: linear-gradient(160deg, #23312a, #172119) !important;
  box-shadow: inset 0 1px 0 rgba(46,255,138,0.12), 0 2px 6px rgba(0,0,0,0.5) !important;
}
.mylyrics-toggle .t-name { color: #6effa8 !important; }
.mylyrics-toggle .toggle-sw.on { background: #2eff8a !important; box-shadow: 0 0 10px rgba(46,255,138,0.6) !important; }
.mylyrics-note {
  display: none;
  font: 10px/1.45 var(--mono, monospace);
  color: #86e0aa;
  letter-spacing: 0.03em;
  padding: 8px 10px;
  margin: 0 0 14px;
  background: rgba(46,255,138,0.06);
  border-left: 2px solid rgba(46,255,138,0.5);
  border-radius: 4px;
}
body.mylyrics-on .mylyrics-note { display: block; }
body.mylyrics-on .panel[data-tut="vibe"] .slider-row,
body.mylyrics-on .panel[data-tut="vibe"] #dialect,
body.mylyrics-on .panel[data-tut="vibe"] #rawToggle,
body.mylyrics-on .panel[data-tut="vibe"] #truthToggle,
body.mylyrics-on .panel[data-tut="vibe"] #punchToggle,
body.mylyrics-on .panel[data-tut="vibe"] .section-label:not(:first-of-type) {
  opacity: 0.32;
  filter: grayscale(0.6);
  pointer-events: none;
  transition: opacity 0.25s;
}
.ownlyrics-box { display: none; margin-bottom: 16px; }
body.mylyrics-on .ownlyrics-box { display: block; }
.ownlyrics-box .concept-title { color: #6effa8 !important; }
.ownlyrics-input {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  padding: 14px 16px;
  font: 13px/1.7 var(--mono, monospace);
  color: #e8ffe8;
  background: linear-gradient(180deg, #0e1611, #0a110d) !important;
  border: 1px solid rgba(46,255,138,0.35) !important;
  border-radius: 8px;
  box-shadow: inset 0 3px 10px rgba(0,0,0,0.7);
  letter-spacing: 0.01em;
}
.ownlyrics-input:focus {
  border-color: rgba(46,255,138,0.7) !important;
  outline: none;
  box-shadow: inset 0 3px 10px rgba(0,0,0,0.7), 0 0 12px rgba(46,255,138,0.25);
}
.ownlyrics-input::placeholder { color: #4e7a5f; }
body.mylyrics-on .concept-box .concept-title::after {
  content: " → HOW TO HELP";
  color: #6effa8;
  font-size: 9px;
  letter-spacing: 0.1em;
}
body.mylyrics-on .concept-box .genre-pills { opacity: 0.32; pointer-events: none; }

/* ===== Full Music Prompt card (v17.3.11) ===== */
.ptp-prompt-card{margin:14px 0;background:rgba(0,0,0,.32);border:1px solid rgba(155,119,220,.32);border-radius:12px;padding:12px;}
.ptp-prompt-head{font-family:monospace;font-size:11px;font-weight:800;letter-spacing:2px;color:#ffd9bf;margin-bottom:8px;}
.ptp-prompt-body{white-space:pre-wrap;word-break:break-word;max-height:180px;overflow:auto;margin:0;padding:10px;border-radius:8px;background:rgba(0,0,0,.4);border:1px solid rgba(155,119,220,.2);color:#d7cff0;font-family:monospace;font-size:11px;line-height:1.5;}
.ptp-prompt-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.ptp-prompt-btn{flex:1;min-width:130px;font-family:monospace;font-size:10px;font-weight:800;letter-spacing:1px;padding:10px;border-radius:9px;cursor:pointer;color:#fff;background:linear-gradient(180deg,#8b5cf6,#5b21b6);border:1px solid #a78bfa;box-shadow:inset 0 1px 0 rgba(255,255,255,.2);}
.ptp-prompt-btn:hover{transform:translateY(-1px);}
/* Library prompt block reuses .lib-song-lyrics collapsible; ensure its <pre> scrolls */
#libraryContent .lib-song-lyrics.expanded pre{max-height:240px;overflow:auto;}