/* Compact project actions: one clear play control, quiet secondary tools. */
.library-card{overflow:visible;border-radius:20px;box-shadow:0 14px 36px #0004,inset 0 1px #ffffff0b}
.library-card:hover,.library-card:focus-within{z-index:2}
.library-card .card-accent{inset:1px 16px auto;height:2px;border-radius:999px;pointer-events:none}
.library-card-head{min-width:0;gap:10px}
.library-card-tags{min-width:0;gap:8px}
.library-card .library-card-body{min-width:0;padding-bottom:18px}
.library-card .library-cover{border-radius:14px;border-color:#ffffff26;box-shadow:0 12px 28px #0004}
.library-card h3{margin-bottom:8px;font-size:16px;line-height:1.7}
.library-card .card-state-row{margin-bottom:7px}
.library-card .card-description{min-height:0;line-height:1.8}
.library-card .library-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:18px}
.library-card .library-detail{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:45px;padding:7px 10px;border-color:#ffffff17;border-radius:11px;background:#090f1a80}
.library-card .library-detail small{font-size:9px;line-height:1.5}
.library-card .library-detail strong{max-width:100%;font-size:10px;line-height:1.6}
.library-card .card-footer{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;min-height:70px;padding-top:14px;border-color:#ffffff1b}
.library-card .card-main-action{min-height:0;flex:none}
.library-card .card-main-action:empty{display:none}
.library-card .card-secondary-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:7px;min-height:0;margin-inline-start:auto}
.library-card .card-icon-button{position:relative;isolation:isolate;display:inline-grid;place-items:center;flex:none;width:42px;height:42px;min-height:0;margin:0;padding:0;border:1px solid #ffffff24;border-radius:12px;background:#ffffff08;color:#bfc8d9;box-shadow:none;font-size:inherit;line-height:1;cursor:pointer;transition:transform .18s,border-color .18s,background .18s,color .18s,box-shadow .18s}
.library-card .card-icon-button svg{width:20px;height:20px;display:block;flex:none}
.library-card .card-icon-button:hover{transform:translateY(-2px);border-color:#a58bd174;background:#a88be519;color:#fff;box-shadow:none;filter:none}
.library-card .card-icon-button:focus-visible{outline:2px solid #bba3ff;outline-offset:3px}
.library-card .card-icon-button:disabled{opacity:.48;cursor:wait;transform:none}
.library-card .card-primary-action{width:46px;height:46px;border-radius:14px}
.library-card .card-listen{width:56px;height:56px;border-color:#b79aff;background:linear-gradient(145deg,#a875f5,#7545d8);color:#fff;box-shadow:0 8px 24px #7043cf66,0 0 0 4px #a982ef1c}
.library-card .card-listen svg{width:25px;height:25px;margin-inline-start:2px}
.library-card .card-listen:hover{background:linear-gradient(145deg,#bd93ff,#8756e5);border-color:#d6c3ff;box-shadow:0 10px 28px #7043cf88,0 0 0 5px #a982ef2a}
.library-card .card-review,.library-card .card-resume{border-color:#a98a5790;background:#9e7b341e;color:#ffe0a1}
.library-card .card-cancel{border-color:#784955;background:#b6546117;color:#e9a8b2}
.library-card .community-publish-button{order:0!important;flex:none;min-height:0;border-color:#ffffff24;background:#ffffff08;color:#c9b5ef;font-size:inherit;font-weight:inherit}
.library-card .community-publish-button:hover{border-color:#a58bd174;background:#a88be519;color:#fff}
.library-card .card-delete{width:34px;height:34px;min-height:0;margin:0!important;border:0;border-radius:9px;background:transparent;color:#8d99ac}
.library-card .card-delete svg{width:17px;height:17px}
.library-card .card-delete:hover{border:0!important;background:#f36b801e!important;color:#ffa6b4!important}
.library-card .card-icon-button[data-tooltip]::after{content:attr(data-tooltip);position:absolute;z-index:6;bottom:calc(100% + 9px);left:50%;width:max-content;max-width:155px;padding:6px 10px;border:1px solid #5d5374;border-radius:8px;background:#222135;color:#f8f6ff;box-shadow:0 8px 22px #0009;font:600 11px/1.5 Vazirmatn,sans-serif;white-space:normal;text-align:center;pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,5px);transition:opacity .15s,transform .15s,visibility .15s}
.library-card .card-icon-button[data-tooltip]:hover::after,.library-card .card-icon-button[data-tooltip]:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0)}
.library-card .card-delete::after{top:calc(100% + 8px);bottom:auto;left:0;transform:translateY(-5px)}
.library-card .card-delete:hover::after,.library-card .card-delete:focus-visible::after{transform:translateY(0)}
.library-card .library-cover-state{display:block;margin-top:10px;color:#adb9cc;font-size:10px;line-height:1.7}
@media(max-width:760px){.library-card{padding:17px}.library-card .library-card-body{padding-top:17px;padding-bottom:17px}.library-card .library-cover{margin-bottom:17px}.library-card .library-details{margin-top:16px}.library-card .card-footer{min-height:70px}.library-card .card-secondary-actions{flex-wrap:nowrap;gap:5px}.library-card .card-icon-button{width:44px;height:44px}.library-card .card-listen{width:56px;height:56px}.library-card .card-delete{width:40px;height:40px}.library-card .card-icon-button[data-tooltip]::after{display:none!important}}
@media(max-width:360px){.library-card{padding:14px}.library-card .card-secondary-actions{gap:4px}.library-card .card-icon-button:not(.card-listen){width:40px;height:42px}.library-card .library-detail{padding-inline:8px}}
@media(prefers-reduced-motion:reduce){.library-card .card-icon-button,.library-card .card-icon-button::after{transition:none}}

/* Loading covers use a flat shimmer surface; the normal artwork frame must not
   leak through as a bright outline while the image is still unavailable. */
.library-card .library-cover.is-loading{border:0!important;outline:0!important;box-shadow:none!important;background-color:#1a2130!important}

/* The loading image is an empty replaced element. Safari can still paint a
   native edge around it, so remove every visual frame while its source is
   being fetched. */
.library-card .library-cover.is-loading,
.library-card .library-cover.is-loading:focus,
.library-card .library-cover.is-loading:focus-visible{
  display:block!important;
  border:0!important;
  border-color:transparent!important;
  outline:0!important;
  box-shadow:none!important;
  -webkit-appearance:none!important;
  appearance:none!important;
  background-clip:padding-box!important;
}
.library-card:has(.library-cover.is-loading){overflow:hidden}

/* Draw the loading surface independently from the empty <img>. Browsers can
   paint a native one-pixel image edge even when CSS borders are disabled. */
.library-card .library-card-body:has(.library-cover.is-loading){position:relative}
.library-card .library-cover.is-loading{
  opacity:0!important;
  background:none!important;
  animation:none!important;
}
.library-card .library-card-body:has(.library-cover.is-loading)::before{
  content:"";
  position:absolute;
  z-index:1;
  top:15px;
  right:0;
  left:0;
  aspect-ratio:16/9;
  border:0;
  outline:0;
  border-radius:17px;
  background-color:#1a2130;
  background-image:linear-gradient(105deg,transparent 24%,#ffffff12 47%,transparent 70%);
  background-size:220% 100%;
  box-shadow:none;
  pointer-events:none;
  animation:cover-retry-sheen 1.45s ease-in-out infinite;
}

/* 2026-09 project library refresh: quieter cards and background-free actions. */
.library-modern{
  --library-card-surface:#111823;
  --library-card-surface-strong:#151e2b;
  --library-card-line:#2a3546;
  --library-card-line-soft:#ffffff12;
  --library-card-muted:#8e9aab;
  --library-card-text:#f4f6fa;
  --library-card-accent:#a98af1;
}

.library-summary{
  gap:10px;
  margin-bottom:12px;
}
.library-summary>button{
  min-height:76px;
  padding:14px 16px;
  border-color:#293445;
  border-radius:16px;
  background:#111823;
  box-shadow:inset 0 1px #ffffff08;
}
.library-summary>button:hover,
.library-summary>button.active{
  transform:translateY(-1px);
  border-color:#5f5476;
  background:#141c28;
  box-shadow:0 10px 28px #00000024,inset 0 1px #ffffff0a;
}
.library-summary .summary-icon{
  border:1px solid #ffffff12;
  background:transparent;
}

.library-controlbar{
  margin-bottom:18px;
  padding:8px;
  border-color:#293445;
  border-radius:16px;
  background:#101721e8;
  box-shadow:0 12px 34px #00000020,inset 0 1px #ffffff08;
}
.library-search,
.library-select{
  border-color:transparent;
  border-radius:11px;
  background:#0c131d;
}
.library-search:hover,
.library-select:hover{border-color:#303d50}

.library-grid{
  grid-template-columns:repeat(auto-fill,minmax(min(100%,350px),1fr));
  gap:18px;
}
.library-card{
  --card-glow:#8b6bd81a;
  --card-edge:#39475b;
  min-height:0;
  overflow:visible;
  padding:17px;
  border:1px solid var(--library-card-line);
  border-radius:22px;
  background:
    radial-gradient(120% 72% at 100% 0,var(--card-glow),transparent 55%),
    linear-gradient(155deg,var(--library-card-surface-strong),var(--library-card-surface) 68%);
  box-shadow:0 18px 45px #02060c33,inset 0 1px #ffffff0a;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.library-card[data-color="1"]{--card-glow:#29b9cf14}
.library-card[data-color="2"]{--card-glow:#dc6c9814}
.library-card[data-color="3"]{--card-glow:#e3ad4a12}
.library-card[data-color="4"]{--card-glow:#4bc79212}
.library-card[data-color="5"]{--card-glow:#7187e817}
.library-card:hover,
.library-card:focus-within{
  z-index:2;
  transform:translateY(-3px);
  border-color:#46566c;
  box-shadow:0 24px 60px #02060c55,inset 0 1px #ffffff10;
}
.library-card .card-accent{
  inset:0 24px auto;
  height:1px;
  border-radius:0 0 99px 99px;
  background:linear-gradient(90deg,transparent,var(--card-edge),transparent);
  opacity:.72;
}
.library-card-head{
  min-height:34px;
  gap:12px;
}
.library-card .library-type{
  gap:7px;
  padding:6px 9px;
  border:1px solid #ffffff14;
  border-radius:999px;
  background:transparent;
  color:#c8b8ed;
  font-size:9px;
  font-weight:700;
}
.library-card .library-type.text{background:transparent;color:#83cfdb}
.library-card-tags{gap:7px}
.library-card time{color:#7f8b9d;font-size:9px}
.library-card .library-branding-tag{
  padding:4px 7px;
  border-color:#ffffff16;
  background:transparent;
  color:#a99acb;
}
.library-card .library-card-body{
  padding:15px 0 17px;
}
.library-card .library-cover{
  margin:0 0 17px;
  border-color:#ffffff18;
  border-radius:17px;
  background:#0c121b;
  box-shadow:0 14px 34px #00000035;
}
.library-card h3{
  min-height:0;
  margin:0 0 9px;
  color:var(--library-card-text);
  font-size:16px;
  font-weight:800;
  line-height:1.75;
  letter-spacing:-.2px;
}
.library-card .card-state-row{margin-bottom:8px}
.library-card .card-status{
  gap:7px;
  padding:0;
  background:transparent;
  font-size:9px;
}
.library-card .card-status.review,
.library-card .card-status.pending,
.library-card .card-status.failed{background:transparent}
.library-card .card-status i{
  width:6px;
  height:6px;
  box-shadow:0 0 0 4px color-mix(in srgb,currentColor 10%,transparent);
}
.library-card .card-description{
  min-height:0;
  color:var(--library-card-muted);
  font-size:10.5px;
  line-height:1.95;
}
.library-card .library-details{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:17px;
}
.library-card .library-detail{
  min-height:48px;
  padding:8px 11px;
  border:1px solid var(--library-card-line-soft);
  border-radius:12px;
  background:#080e1666;
  box-shadow:inset 0 1px #ffffff06;
}
.library-card .library-detail small{color:#7f8b9d;font-size:8.5px}
.library-card .library-detail strong{color:#dfe4ec;font-size:10px;font-weight:650}
.library-card .card-progress{
  margin-top:16px;
  border-color:#ffffff12;
  border-radius:12px;
  background:#090f18a8;
}

.library-card .card-footer{
  min-height:61px;
  gap:10px;
  padding-top:12px;
  border-color:#ffffff13;
}
.library-card .card-secondary-actions{
  flex-wrap:nowrap;
  gap:3px;
}
.library-card .card-icon-button,
.library-card .community-publish-button{
  width:40px;
  height:40px;
  min-height:0;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#96a2b3;
  box-shadow:none;
  transition:transform .18s ease,color .18s ease,opacity .18s ease;
}
.library-card .card-icon-button svg{width:19px;height:19px}
.library-card .card-icon-button:hover,
.library-card .community-publish-button:hover{
  transform:translateY(-2px);
  border:0;
  background:transparent;
  color:#f2edff;
  box-shadow:none;
}
.library-card .card-icon-button:active{transform:translateY(0) scale(.94)}
.library-card .card-primary-action{
  width:48px;
  height:48px;
  border:1px solid #8e71d0;
  border-radius:50%;
  color:#cbb8f6;
}
.library-card .card-listen{
  width:54px;
  height:54px;
  border:1px solid #9b79e4;
  background:transparent;
  color:#c9b0ff;
  box-shadow:0 0 0 4px #9977df0d;
}
.library-card .card-listen svg{width:23px;height:23px}
.library-card .card-listen:hover{
  border-color:#c1a4ff;
  background:transparent;
  color:#fff;
  box-shadow:0 0 0 5px #a785ef12;
}
.library-card .card-review,
.library-card .card-resume{
  border-color:#a68955;
  background:transparent;
  color:#e5c783;
}
.library-card .card-cancel{border:0;background:transparent;color:#ca7f8c}
.library-card .card-cancel:hover{color:#ff9eae}
.library-card .community-publish-button{
  order:0!important;
  flex:none;
  border:0;
  background:transparent;
  color:#aa96d2;
  font-size:inherit;
  font-weight:inherit;
}
.library-card .community-publish-button span{background:transparent}
.library-card .card-delete{
  width:32px;
  height:32px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#748195;
}
.library-card .card-delete:hover{
  border:0!important;
  background:transparent!important;
  color:#ef8999!important;
}
.library-card .card-icon-button:focus-visible{
  outline:2px solid #a98af1;
  outline-offset:2px;
}

@media(max-width:760px){
  .library-summary>button{min-height:68px;padding:11px 7px}
  .library-controlbar{padding:8px}
  .library-card{padding:15px;border-radius:20px}
  .library-card:hover{transform:none}
  .library-card .library-card-body{padding-top:14px;padding-bottom:15px}
  .library-card .library-cover{margin-bottom:15px;border-radius:15px}
  .library-card h3{font-size:15px}
  .library-card .library-details{gap:7px;margin-top:15px}
  .library-card .library-detail{min-height:46px;padding:7px 9px}
  .library-card .card-footer{min-height:58px;padding-top:10px}
  .library-card .card-secondary-actions{gap:1px;overflow:visible}
  .library-card .card-icon-button{width:39px;height:42px}
  .library-card .card-listen{width:52px;height:52px}
  .library-card .card-delete{width:36px;height:36px}
}

@media(max-width:360px){
  .library-card{padding:13px}
  .library-card .card-secondary-actions{gap:0}
  .library-card .card-icon-button:not(.card-listen){width:36px;height:40px}
  .library-card .library-detail{padding-inline:8px}
}