:root{
  --bg:#f5f5f5;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --primary:#2563eb;
  --secondary:#6d28d9;
  --ok:#16a34a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; color:var(--text); background:var(--bg);
}

.app-header{
  position:sticky; top:0; z-index:10; background:var(--card); border-bottom:1px solid var(--border);
}
.app-header h1{ margin:0; padding:10px 12px 6px; font-size:19px; }
.filters{
  display:grid; gap:10px; align-items:end; padding:6px 12px 8px;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}
.filter{ display:flex; flex-direction:column; gap:6px; }
.filter.checkbox{ flex-direction:row; align-items:center; gap:8px; }
.filter label{ font-size:12px; color:var(--muted); }
.filter input[type="search"],
.filter select{
  min-height:36px; padding:6px 10px; border:1px solid var(--border); background:#fff; border-radius:8px; width:100%; min-width:160px;
  /* Safari/WebKit reset to allow full custom styling */
  -webkit-appearance:none; appearance:none;
}
.filter select{ min-width:160px; }
.summary{ color:var(--muted); font-size:12px; justify-self:end; align-self:end; white-space:nowrap; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; height:36px; padding:0 12px; border:1px solid var(--border);
  background:#fff; color:var(--text); border-radius:8px; cursor:pointer;
  font-size:13px; line-height:1; transition:box-shadow .15s ease, background .15s ease;
}
.btn:hover{ background:#f9fafb; }
.btn:focus{ outline:none; border-color:#93c5fd; box-shadow:0 0 0 3px rgba(147,197,253,0.4); }
.btn:active{ transform:translateY(0.5px); }
.filter.actions{ justify-self:start; align-self:end; }

.app-main{ padding:12px; }
.no-results{ background:#eef2ff; color:#3730a3; border:1px solid #e0e7ff; padding:12px 16px; border-radius:8px; }

.list{ list-style:none; margin:12px 0 32px; padding:0; }
.list__item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:10px; cursor:pointer;
  transition:box-shadow .15s ease, transform .02s ease;
}
.list__item:focus{ outline:2px solid #93c5fd; outline-offset:2px; }
.list__item:hover{ box-shadow:0 1px 0 rgba(0,0,0,0.04), 0 6px 16px rgba(0,0,0,0.06); }
.list__item:active{ transform:scale(0.998); }

.item__main{ min-width:0; }
.item__title{ font-weight:600; font-size:14px; line-height:1.2; }
.item__author{ color:var(--muted); font-size:12px; margin-top:2px; }
.item__badges{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }

.badge{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); color:var(--text); background:#fff; padding:3px 8px; border-radius:999px; font-size:11px; }
.badge--primary{ border-color:#bfdbfe; color:#1d4ed8; background:#eff6ff; }
.badge--secondary{ border-color:#e9d5ff; color:#6d28d9; background:#f5f3ff; }
.badge--ok{ border-color:#bbf7d0; color:#166534; background:#ecfdf5; }
.badge--muted{ border-color:#e5e7eb; color:#6b7280; background:#f9fafb; }

.item__status{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; white-space:normal; }

/* Modal */
.modal{ position:fixed; inset:0; display:grid; grid-template-rows:1fr; place-items:center; pointer-events:none; z-index:1000; }
.modal[aria-hidden="true"]{ opacity:0; }
.modal[aria-hidden="false"]{ opacity:1; pointer-events:auto; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.4); }
.modal__dialog{
  position:relative;
  /* Ensure the 16:9 video fits within viewport height; shrink if needed */
  width:min(90vw, calc(90vh * (16 / 9)));
  max-width:1600px;
  max-height:90vh;
  background:#fff; color:#fff; border-radius:12px; overflow:visible;
  box-shadow:0 10px 30px rgba(0,0,0,0.4); margin:16px;
}
.modal__header{ display:none; }
.modal__content{ padding:0; background:#fff; }

.icon-button{ border:0; background:transparent; color:#fff; font-size:18px; cursor:pointer; padding:6px 8px; border-radius:8px; }
.icon-button:hover{ background:rgba(255,255,255,0.08); }

/* Close button floating slightly outside the dialog */
.modal__close{
  position:absolute; top:-14px; right:-14px; z-index:1;
  background:#111827; color:#fff; border:1px solid rgba(255,255,255,0.18);
  padding:6px 10px; border-radius:999px; font-size:14px; line-height:1; font-weight:600;
  box-shadow:0 6px 16px rgba(0,0,0,0.35);
}
.modal__close:focus{ outline:none; box-shadow:0 0 0 3px rgba(147,197,253,0.4), 0 6px 16px rgba(0,0,0,0.35); }

.video-frame{ position:relative; width:100%; padding-top:56.25%; background:#fff; }
.video-frame video{ position:absolute; inset:0; width:100%; height:100%; background-color:#fff; }
.no-video{ padding:16px; background:#111827; }

.app-footer{ padding:16px 12px; color:var(--muted); font-size:12px; text-align:center; }

.modal-open{ overflow:hidden; }

@media (max-width: 640px){
  .filters{ gap:8px; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); }
  .filter input[type="search"], .filter select{ min-width:unset; width:100%; }
}

/* Extra cross-browser polish for inputs (esp. Safari) */
.filter input[type="search"]::placeholder{ color:var(--muted); opacity:1; }
.filter input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; }

.filter input[type="search"]:focus,
.filter select:focus{
  outline:none;
  border-color:#93c5fd;
  box-shadow:0 0 0 3px rgba(147,197,253,0.4);
}

/* Custom arrow for select (works in Safari/iOS) */
.filter select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:16px 16px;
  padding-right:36px;
}

.filter input[type="search"][disabled],
.filter select[disabled]{
  background:#f9fafb; color:#9ca3af;
}