/* Shared Notiran glass surfaces. Notation and musical controls retain their layout. */
body {
  --ni-glass:rgba(239,247,255,.90);
  --ni-glass-card:rgba(224,239,255,.88);
  --ni-solid:#edf5fe;
  --ni-ink:#183350;
  --ni-secondary:#385675;
  --ni-edge:#b9d4ed;
  --ni-highlight:rgba(255,255,255,.94);
  --ni-shadow:0 8px 26px rgba(21,62,104,.09);
  --ni-action:#185b98;
  --ni-action-ink:#fff;
  --muted:#496681;
  background:radial-gradient(ellipse at 88% 4%,#dceeff 0,transparent 34rem),radial-gradient(ellipse at 4% 36%,#e5edfc 0,transparent 35rem),var(--bg);
}
body.dark {
  --ni-glass:rgba(18,36,58,.94);
  --ni-glass-card:rgba(17,39,67,.94);
  --ni-solid:#162c47;
  --ni-ink:#f0f6ff;
  --ni-secondary:#c4d5e9;
  --ni-edge:#527293;
  --ni-highlight:rgba(187,216,249,.16);
  --ni-shadow:0 8px 26px rgba(0,9,23,.25);
  --ni-action:#a3d8ff;
  --ni-action-ink:#123450;
  --muted:#c4d5e9;
  --ui02-glass:rgba(18,36,58,.94);
  background:radial-gradient(ellipse at 88% 4%,#173651 0,transparent 34rem),radial-gradient(ellipse at 4% 36%,#172c46 0,transparent 35rem),var(--bg);
}
.app-header,.home-quick,.subscription-entry,.search-box,.settings-card,.catalog-sort,
.transport,.bottom-nav,.like-login-dialog {
  color:var(--ni-ink);
  background:var(--ni-glass);
  border-color:var(--ni-edge);
  box-shadow:inset 0 1px var(--ni-highlight),var(--ni-shadow);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
}
.app-header {border-bottom:1px solid var(--ni-edge)}
body.dark .home-quick,body.dark .subscription-entry,body.dark .search-box,
body.dark .bottom-nav,body.dark:not(.focus) #player .transport {background:var(--ni-glass);color:var(--ni-ink)}
.home-quick>span,.subscription-entry p,.header-end,.brand small,
.catalog-sort,.like-login-dialog p {color:var(--ni-secondary)}
.search-box input {color:var(--ni-ink)}
.search-box input::placeholder {color:var(--ni-secondary);opacity:1}
.catalog-sort select {color:var(--ni-ink)}
.catalog-sort select option {background:var(--ni-solid);color:var(--ni-ink)}
.subscription-entry h2,.settings-card h2 {color:var(--ni-ink)}
.subscription-entry .academy-entry-link {background:var(--ni-action);color:var(--ni-action-ink)}
.home-quick .text-btn {color:var(--ni-action)}
#library .access-hint {color:var(--ni-secondary)}
body.dark .internal-preview {background:#152d49;color:var(--ni-secondary)}
body.dark .internal-preview a {color:#b4dfff}
body.dark a:not(.campaign-action):not(.academy-entry-link):not(.primary) {color:var(--accent)}
body.dark .primary,body.dark .level-switch .selected {background:var(--ni-action);color:var(--ni-action-ink)}

/* One continuous sheet behind the frosted lower panel, using the existing public thumbnail. */
#library {
  --score-title:var(--ni-ink);--score-secondary:var(--ni-secondary);
  --score-gold:var(--ni-action);--score-shell:var(--ni-solid);
  --score-panel:var(--ni-glass-card);--score-rule:var(--ni-edge);
  --score-edge:var(--ni-edge);--score-shadow:var(--ni-shadow);
}
body.dark #library {
  --score-title:var(--ni-ink);--score-secondary:var(--ni-secondary);
  --score-gold:var(--ni-action);--score-shell:var(--ni-solid);
  --score-panel:var(--ni-glass-card);--score-rule:var(--ni-edge);
  --score-edge:var(--ni-edge);--score-shadow:var(--ni-shadow);
}
#library .work-card {
  background:var(--card) var(--score-preview) center bottom/100% auto repeat-y;
  border:1px solid var(--ni-edge);box-shadow:var(--ni-shadow);
}
#library .work-card:hover {border-color:var(--ni-action);box-shadow:0 10px 28px rgba(21,62,104,.15)}
#library .score-thumbnail {width:100%;margin:0;border:0;border-radius:0;background:#fff;overflow:hidden}
#library .score-thumbnail:after {background:linear-gradient(transparent 78%,rgba(190,218,246,.35));z-index:1}
#library .thumbnail-open {z-index:2}
#library .score-glass {
  position:relative;isolation:isolate;display:flex;flex-direction:column;flex:1;
  background:var(--ni-glass-card);color:var(--ni-ink);
  border-top:1px solid var(--ni-highlight);
  box-shadow:inset 0 1px 0 var(--ni-highlight);
  backdrop-filter:blur(14px) saturate(1.18);
  -webkit-backdrop-filter:blur(14px) saturate(1.18);
}
#library .score-glass:before {
  content:'';position:absolute;inset-inline-end:10px;top:18px;width:72px;height:80px;
  background:url('/assets/media/notiran-logo.svg') center/contain no-repeat;
  opacity:.08;pointer-events:none;z-index:-1;
}
#library .score-card-copy {background:none;border:0;margin-top:0;padding:13px 12px 11px}
#library .score-card-copy:before,#library .score-card-copy:after {content:none}
#library .card-open,#library .card-open:hover {color:var(--ni-ink);background:none}
#library .card-open h3,#library .card-open:hover h3 {color:var(--ni-ink)}
#library .card-en,#library .card-artist {color:var(--ni-secondary)}
#library .card-artist img {border-color:var(--ni-edge);box-shadow:none}
#library .card-footer {background:none;border-color:var(--ni-edge);padding-block:7px}
#library .card-footer .level-tag {color:var(--ni-secondary);white-space:normal}
#library .score-glass-logo {width:22px;height:25px;object-fit:contain;flex:none;opacity:.85}
#library .card-footer .score-access {background:rgba(255,255,255,.48);border-color:var(--ni-edge);color:var(--ni-secondary)}
#library .card-footer .score-access.free {background:#daf4e9;border-color:#91cdb3;color:#15543e}
body.dark #library .card-footer .score-access {background:#193553;border-color:#6787a8;color:#daebfc}
body.dark #library .card-footer .score-access.free {background:#193f3c;border-color:#588f81;color:#c4f1df}
#library .card-actions {background:none;padding-top:8px}
#library .card-actions button {background:var(--ni-solid);border-color:var(--ni-edge);color:var(--ni-ink)}
#library .card-actions [data-read-work] {background:var(--ni-action);border-color:var(--ni-action);color:var(--ni-action-ink)}
#library .card-open:focus-visible {outline-color:var(--ni-action)}

/* Clearly visible on white sheet thumbnails in both themes, including the mobile grid. */
.catalog-like,.catalog-like:hover {
  z-index:4;left:8px;bottom:8px;gap:5px;min-height:36px;padding:6px 10px;
  background:#183b60;color:#fff;border:1px solid #b4d8fa;border-radius:14px;
  box-shadow:0 3px 12px rgba(12,34,61,.28),inset 0 1px rgba(255,255,255,.15);
}
.catalog-like svg {width:17px;height:17px;stroke-width:2}
.catalog-like strong {font:700 12px/1.2 var(--notiran-font)}
.catalog-like span {font-size:11px;font-weight:550}
.catalog-like[aria-pressed=true],.catalog-like[aria-pressed=true]:hover {background:#492b40;color:#fff;border-color:#ef9db6}
.catalog-like[aria-pressed=true] svg {fill:#ff6785;stroke:#ff6785}
.catalog-like:focus-visible {outline:3px solid #337dc1;outline-offset:2px}
body.dark .like-login-dialog {background:var(--ni-solid);color:var(--ni-ink)}
body.dark .score-like {background:var(--ni-solid);color:var(--ni-ink);border-color:var(--ni-edge)}
body.dark .score-like[aria-pressed=true] {background:#492b40;color:#fff;border-color:#ef9db6}
body.dark .score-like[aria-pressed=true] svg {fill:#ff6785;stroke:#ff6785}

/* The same calm blue glass on existing account/subscription surfaces. */
.notiran-account .sub-card:not(.pro),.notiran-account .sub-info,
.notiran-account .trust-card,.notiran-account .auth-panel {
  background:rgba(243,249,255,.92);border-color:#bfd7ed;
  box-shadow:inset 0 1px #fff,0 8px 24px rgba(21,62,104,.07);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.notiran-account .sub-description {color:#496681}
.notiran-account .sub-cta.secondary {color:#205b91}
@media(max-width:600px) {
  .catalog-like {left:6px;bottom:6px;gap:4px;min-height:34px;padding:5px 8px}
  .catalog-like svg {width:16px;height:16px}
  .catalog-like strong,.catalog-like span {font-size:10px}
  #library .score-card-copy {padding:11px 9px 9px}
  #library .score-glass-logo {width:19px;height:21px}
  #library .score-glass:before {width:54px;height:60px;inset-inline-end:7px}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .app-header,.home-quick,.subscription-entry,.search-box,.settings-card,.catalog-sort,
  .transport,.bottom-nav,.like-login-dialog,#library .score-glass {background:var(--ni-solid)}
  .notiran-account .sub-card:not(.pro),.notiran-account .sub-info,
  .notiran-account .trust-card,.notiran-account .auth-panel {background:#f3f9ff}
}

/* CARD02: one real thumbnail spans two equal image regions; only the lower region is frosted. */
#library .work-card {background:var(--card);border-radius:17px}
#library .score-card-visual {
  display:grid;grid-template-rows:repeat(2,minmax(0,1fr));
  position:relative;isolation:isolate;flex:1;min-width:0;
}
#library .score-card-visual>.score-thumbnail {
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  margin:0;aspect-ratio:auto;border:0;border-radius:0;background:#fff;
}
#library .score-card-visual>.score-thumbnail>img {
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transform:none!important;transition:none;
}
#library .score-card-visual>.score-thumbnail:after {content:none}
#library .score-card-visual>.score-glass {
  grid-row:2;position:relative;z-index:1;isolation:auto;flex:none;
  border:1px solid rgba(231,245,255,.38);border-inline-width:0;
  border-radius:14px 14px 0 0;
  background:linear-gradient(112deg,rgba(12,58,95,.73),rgba(10,65,108,.79));
  color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.28),0 -3px 13px rgba(15,57,89,.06);
  backdrop-filter:blur(3px) saturate(1.10);
  -webkit-backdrop-filter:blur(3px) saturate(1.10);
}
body.dark #library .score-card-visual>.score-glass {
  background:linear-gradient(112deg,rgba(8,42,70,.78),rgba(5,54,91,.82));
  border-color:rgba(183,220,249,.30);
}
#library .score-card-visual .score-glass:before {opacity:.13;filter:brightness(1.7);top:10px}
#library .score-card-visual .card-open {flex:1;min-height:0;color:#fff}
#library .score-card-visual .score-card-copy {
  min-height:0;padding:10px 11px 7px;justify-content:flex-start;
}
#library .score-card-visual .card-open h3,
#library .score-card-visual .card-open:hover h3 {
  display:block;-webkit-line-clamp:unset;height:auto;
  font-size:16px;line-height:1.45;text-align:start;color:#fff;
  text-shadow:0 1px 2px rgba(0,32,60,.3);letter-spacing:0;
}
#library .score-card-visual .card-en {
  display:block;-webkit-line-clamp:unset;height:auto;
  font-size:11px;line-height:1.45;text-align:right;margin-top:2px;color:#eff7ff;
}
#library .score-card-visual .card-version {color:#eff7ff;font-size:10px;line-height:1.5}
#library .score-card-visual .card-artist {
  min-height:24px;height:auto;margin-top:6px;padding-top:0;
  justify-content:flex-start;font-size:11px;line-height:1.45;color:#eff7ff;
}
#library .score-card-visual .card-artist span {
  display:block;-webkit-line-clamp:unset;overflow:visible;text-align:start;
}
#library .score-card-visual .card-artist img {width:22px;height:22px;border-color:rgba(255,255,255,.5)}
#library .score-card-visual .card-footer {
  min-height:30px;padding:4px 9px;gap:5px;border-top:1px solid rgba(230,244,255,.28);
}
#library .score-card-visual .card-footer .level-tag {display:block;font-size:9px;line-height:1.5;color:#fff}
#library .score-card-visual .card-footer .score-access {
  background:rgba(3,39,72,.35);border-color:rgba(225,243,255,.55);color:#fff;
}
#library .score-card-visual .card-footer .score-access.free {background:#d9f1e8;border-color:#a7d9c3;color:#15533c}
#library .score-card-visual .score-glass-logo {width:21px;height:23px;opacity:1;filter:drop-shadow(0 1px 2px rgba(0,25,51,.2))}
#library .score-card-visual .catalog-like {bottom:50%;margin-bottom:8px}
#library .work-card>.card-actions {
  flex:none;grid-template-columns:repeat(2,minmax(0,1fr));padding:8px;
  gap:6px;background:var(--ni-glass);border-top:1px solid var(--ni-edge);
}
#library .work-card>.card-actions button {
  min-height:38px;padding:5px 4px;font-size:11px;line-height:1.45;white-space:normal;
}
#library .score-card-visual .card-open:focus-visible {outline-color:#d9efff}
@media(min-width:601px) and (max-width:900px) {
  #library .score-card-visual .card-open h3 {font-size:14px}
  #library .score-card-visual .card-artist {font-size:10px}
}
@media(max-width:600px) {
  #library .score-card-visual .score-card-copy {padding:9px 9px 6px}
  #library .score-card-visual .card-open h3 {font-size:14px}
  #library .score-card-visual .card-en {font-size:10px}
  #library .score-card-visual .card-artist {font-size:10px;min-height:22px;margin-top:5px}
  #library .score-card-visual .card-artist img {width:20px;height:20px}
  #library .score-card-visual .card-footer {padding:4px 6px}
  #library .score-card-visual .card-footer .level-tag {font-size:8px}
  #library .work-card>.card-actions {padding:7px 6px;gap:5px}
  #library .work-card>.card-actions button {min-height:42px;font-size:10px;padding:4px 3px}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  #library .score-card-visual>.score-glass {background:#246188}
  body.dark #library .score-card-visual>.score-glass {background:#174c72}
}