/* ════════════════════════════════════════════════════════════
   content — Components (cards, buttons, forms)
   ════════════════════════════════════════════════════════════ */

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 18px;border-radius:8px;
  font-family:var(--sf);font-size:13px;font-weight:600;
  letter-spacing:.01em;transition:all .15s;
  white-space:nowrap;
}
.btn svg{width:14px;height:14px;}
.btn-primary{background:var(--bl);color:#fff;box-shadow:0 4px 14px var(--bl-glow);}
.btn-primary:hover{background:var(--bl-d);transform:translateY(-1px);box-shadow:0 6px 20px var(--bl-glow);}
.btn-secondary{background:var(--bg-3);color:var(--tx-1);border:1px solid var(--line);}
.btn-secondary:hover{background:var(--bg-4);border-color:var(--line-h);}
.btn-ghost{color:var(--tx-2);}
.btn-ghost:hover{background:var(--bg-2);color:var(--tx-1);}
.btn-text{color:var(--bl-l);padding:6px 0;font-weight:500;}
.btn-text:hover{color:var(--bl);}
.btn-danger{background:var(--red);color:#fff;}
.btn-danger:hover{background:#DC2626;}
.btn-block{width:100%;}
.btn-sm{padding:6px 12px;font-size:11.5px;}
.btn-lg{padding:13px 24px;font-size:14px;}

/* ── CARD ── */
.card{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:24px;
  transition:border-color .15s;
}
.card:hover{border-color:var(--line-h);}
.card-pad-sm{padding:16px;}
.card-pad-lg{padding:32px;}
.card-title{font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px;}
.card-sub{font-size:12px;color:var(--tx-3);margin-bottom:18px;}
.card-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.card-row:last-child{border-bottom:none;}
.card-row-icon{
  width:38px;height:38px;border-radius:8px;
  background:var(--bg-3);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.card-row-icon svg, .card-row-icon img{width:20px;height:20px;}

/* ── FORM ── */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field-label{
  font-family:var(--fm);font-size:9px;letter-spacing:.16em;
  color:var(--tx-3);text-transform:uppercase;
}
.field-hint{font-size:11px;color:var(--tx-3);margin-top:4px;}
.field-input,.field-select,.field-textarea{
  padding:11px 14px;border-radius:8px;
  border:1px solid var(--line);
  background:var(--bg-2);
  font-size:13px;color:var(--tx-1);
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.field-input:focus,.field-select:focus,.field-textarea:focus{
  border-color:var(--bl);
  box-shadow:0 0 0 3px rgba(1,69,242,.15);
}
.field-input::placeholder,.field-textarea::placeholder{color:var(--tx-4);}
.field-textarea{resize:vertical;min-height:80px;font-family:var(--sf);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}

/* Drag-drop file zone */
.dropzone{
  border:2px dashed var(--line-h);
  border-radius:var(--r-lg);
  padding:42px 24px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-align:center;cursor:pointer;
  transition:all .2s;
  background:var(--bg-1);
}
.dropzone:hover, .dropzone.dragover{
  border-color:var(--bl);background:rgba(1,69,242,.04);
}
.dz-icon{
  width:54px;height:54px;border-radius:12px;
  background:rgba(1,69,242,.12);color:var(--bl-l);
  display:flex;align-items:center;justify-content:center;
}
.dz-icon svg{width:26px;height:26px;}
.dz-title{font-size:14px;font-weight:600;color:var(--tx-1);}
.dz-sub{font-size:12px;color:var(--tx-3);}

/* ── STATS ── */
.stat{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:18px 20px;
}
.stat-label{
  font-family:var(--fm);font-size:9px;letter-spacing:.18em;
  color:var(--tx-3);text-transform:uppercase;margin-bottom:8px;
}
.stat-value{font-family:var(--fa);font-size:28px;color:var(--tx-1);line-height:1;}
.stat-delta{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11px;font-weight:600;color:var(--green);
  margin-top:6px;
}
.stat-delta.down{color:var(--red);}
.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
}

/* ── RELEASE CARD ── */
.release{
  display:flex;align-items:center;gap:16px;
  padding:14px;border-radius:var(--r-md);
  background:var(--bg-2);border:1px solid var(--line);
  transition:all .15s;cursor:pointer;
}
.release:hover{background:var(--bg-3);transform:translateY(-1px);}
.release-art{
  width:64px;height:64px;border-radius:8px;
  flex-shrink:0;background:var(--bg-4);
  background-size:cover;background-position:center;
}
.release-info{flex:1;min-width:0;}
.release-title{font-size:15px;font-weight:700;color:var(--tx-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.release-meta{font-size:12px;color:var(--tx-3);margin-top:3px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.release-status{display:flex;align-items:center;gap:8px;flex-shrink:0;}

/* ── TIMELINE ── */
.timeline{display:flex;align-items:center;gap:8px;margin:14px 0 18px;}
.tl-step{flex:1;text-align:center;position:relative;}
.tl-bar{
  height:3px;background:var(--bg-3);border-radius:2px;
  margin-bottom:8px;position:relative;
}
.tl-step.done .tl-bar{background:var(--green);}
.tl-step.current .tl-bar{
  background:linear-gradient(90deg,var(--green) 50%,var(--bg-3) 50%);
}
.tl-label{font-size:11px;color:var(--tx-3);font-weight:600;}
.tl-step.done .tl-label, .tl-step.current .tl-label{color:var(--tx-1);}
.tl-date{font-size:10px;color:var(--tx-4);margin-top:2px;}

/* ── MODAL ── */
.modal-backdrop{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.6);backdrop-filter:blur(12px);
  display:none;align-items:center;justify-content:center;
  padding:20px;
}
.modal-backdrop.open{display:flex;}
.modal{
  background:var(--bg-1);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:28px;
  width:min(480px,100%);max-height:calc(100vh - 40px);overflow-y:auto;
  animation:modalIn .3s cubic-bezier(.32,1.4,.5,1);
  position:relative;
}
@keyframes modalIn{
  from{opacity:0;transform:translateY(20px) scale(.96);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.modal-close{
  position:absolute;top:16px;right:16px;
  width:30px;height:30px;border-radius:50%;
  background:var(--bg-3);color:var(--tx-2);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;
}
.modal-close:hover{background:var(--bg-4);color:var(--tx-1);}
.modal-title{font-size:20px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px;}
.modal-sub{font-size:13px;color:var(--tx-2);margin-bottom:20px;}

/* ── TABLE ── */
.tbl{width:100%;border-collapse:collapse;}
.tbl th{
  text-align:left;padding:11px 14px;
  font-family:var(--fm);font-size:9px;letter-spacing:.16em;
  color:var(--tx-3);text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.tbl td{padding:14px;border-bottom:1px solid var(--line);font-size:13px;}
.tbl tr:hover td{background:var(--bg-2);}

/* ── EMPTY STATE ── */
.empty{
  text-align:center;padding:60px 20px;
}
.empty-icon{
  width:72px;height:72px;border-radius:18px;
  background:var(--bg-2);color:var(--tx-3);
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.empty-icon svg{width:32px;height:32px;}
.empty-title{font-size:17px;font-weight:700;color:var(--tx-1);margin-bottom:4px;}
.empty-sub{font-size:13px;color:var(--tx-3);max-width:380px;margin:0 auto 20px;}

/* La Casa Emergent internal component language */
.app .btn {
  border-radius: 0;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.app .btn-primary {
  background: var(--lce-blue);
  color: #fff;
  border: 2px solid var(--lce-blue);
  box-shadow: 5px 5px 0 var(--lce-black);
}

.app .btn-primary:hover {
  background: var(--lce-black);
  border-color: var(--lce-black);
  box-shadow: 5px 5px 0 var(--lce-blue);
}

.app .btn-secondary,
.app .btn-ghost {
  background: #fff;
  color: var(--lce-black);
  border: 2px solid var(--lce-black);
}

.app .btn-ghost:hover,
.app .btn-secondary:hover {
  background: var(--lce-black);
  color: #fff;
}

.app .btn-danger {
  background: var(--lce-red);
  border: 2px solid var(--lce-red);
  box-shadow: 5px 5px 0 var(--lce-black);
}

.app .card {
  background: #fff;
  color: var(--lce-black);
  border: 2px solid var(--lce-black);
  border-radius: 0;
  box-shadow: 8px 8px 0 var(--lce-blue);
}

.app .card:hover {
  border-color: var(--lce-black);
}

.app .card-title {
  font-family: var(--fa);
  font-size: 22px;
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--lce-black);
}

.app .card-sub {
  color: rgba(5,5,5,.62);
  font-weight: 700;
}

.app .card-row {
  border-bottom: 2px solid rgba(5,5,5,.1);
}

.app .field-label,
.app .stat-label,
.app .label {
  color: var(--lce-blue);
  font-weight: 700;
}

.app .field-input,
.app .field-select,
.app .field-textarea {
  min-height: 52px;
  background: #fff;
  color: var(--lce-black);
  border: 2px solid var(--lce-black);
  border-radius: 0;
  font-weight: 750;
}

.app .field-input:focus,
.app .field-select:focus,
.app .field-textarea:focus {
  border-color: var(--lce-blue);
  box-shadow: 5px 5px 0 var(--lce-blue);
}

.app .field-input::placeholder,
.app .field-textarea::placeholder {
  color: rgba(5,5,5,.4);
}

.app .dropzone {
  background:
    linear-gradient(135deg, rgba(0,61,255,.08), transparent 46%),
    #fff;
  color: var(--lce-black);
  border: 2px dashed var(--lce-black);
  border-radius: 0;
}

.app .dropzone:hover,
.app .dropzone.dragover {
  background: var(--lce-soft-blue);
  border-color: var(--lce-blue);
  box-shadow: 6px 6px 0 var(--lce-blue);
}

.app .dz-icon {
  background: var(--lce-blue);
  color: #fff;
  border-radius: 0;
}

.app .dz-title {
  color: var(--lce-black);
  font-weight: 900;
  text-transform: uppercase;
}

.app .dz-sub,
.app .field-hint {
  color: rgba(5,5,5,.58);
  font-weight: 700;
}

.app .stat {
  background: #fff;
  border: 2px solid var(--lce-black);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--lce-blue);
}

.app .stat-value {
  color: var(--lce-black);
}

.app .release {
  background: #fff;
  color: var(--lce-black);
  border: 2px solid var(--lce-black);
  border-radius: 0;
}

.app .release:hover {
  background: var(--lce-soft-blue);
  box-shadow: 5px 5px 0 var(--lce-blue);
}

.app .release-title {
  color: var(--lce-black);
}

.app .release-meta,
.app .muted,
.app .small,
.app .empty-sub {
  color: rgba(5,5,5,.62);
}

.app .tag {
  border-radius: 0;
  background: var(--lce-soft-blue);
  color: var(--lce-blue);
  border: 1px solid var(--lce-blue);
}

.app .tag.green {
  background: var(--lce-acid);
  color: var(--lce-black);
  border-color: var(--lce-black);
}

.app .tag.yellow {
  background: var(--lce-yellow, #FFE94A);
  color: var(--lce-black);
  border-color: var(--lce-black);
}

.app .tag.red {
  background: var(--lce-red);
  color: #fff;
  border-color: var(--lce-red);
}

/* Shared action panels for non-empty internal controls */
.lce-action-backdrop {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(14px);
}

.lce-action-backdrop.open {
  display: flex;
}

.lce-action-panel {
  width: min(560px, 100%);
  max-height: calc(100vh - 44px);
  overflow: auto;
  position: relative;
  padding: 28px;
  background: #fff;
  color: var(--lce-black, #050505);
  border: 2px solid var(--lce-black, #050505);
  box-shadow: 10px 10px 0 var(--lce-blue, #003DFF);
}

.lce-action-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid var(--lce-black, #050505);
  background: #fff;
  color: var(--lce-black, #050505);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.lce-action-head span {
  display: block;
  margin-bottom: 10px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--lce-blue, #003DFF);
  text-transform: uppercase;
}

.lce-action-head h2 {
  margin: 0;
  max-width: calc(100% - 48px);
  font-family: var(--fa);
  font-size: clamp(30px, 6vw, 54px);
  line-height: .88;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.lce-action-head p {
  margin: 12px 0 22px;
  color: rgba(5, 5, 5, .66);
  font-weight: 750;
  line-height: 1.45;
}

.lce-action-form .field {
  margin-bottom: 14px;
}

.lce-action-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.lce-info-list {
  display: grid;
  gap: 10px;
  margin: 6px 0 18px;
}

.lce-info-list p,
.lce-action-list button {
  margin: 0;
  padding: 14px 16px;
  background: var(--lce-soft-blue, #E9EFFF);
  border: 2px solid var(--lce-black, #050505);
  color: var(--lce-black, #050505);
  font-weight: 800;
}

.lce-action-list {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.lce-action-list button {
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.lce-action-list button:hover {
  background: var(--lce-blue, #003DFF);
  color: #fff;
}

@media (max-width: 640px) {
  .lce-action-panel {
    padding: 22px;
    box-shadow: 6px 6px 0 var(--lce-blue, #003DFF);
  }

  .lce-action-actions {
    flex-direction: column-reverse;
  }
}