:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;line-height:1.35}
body{max-width:95%;margin:10px auto;padding:0 10px;color:#111}
header{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.search{flex:1;min-width:150px}
input[type="search"]{width:100%;padding:10px;border-radius:8px;border:1px solid #ddd;font-size:16px}
select{padding:8px;border-radius:2px;border:1px solid #ddd}
.controls{display:flex;gap:8px;align-items:center}
.meta{color:#666;font-size:13px}
.grids{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:18px}
.card{border:1px solid #e6e6e6;border-radius:8px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.thumb{display:block;width:100%;height:140px;object-fit:cover;background:#f3f3f3}
.card-body{padding:10px;flex:1;display:flex;flex-direction:column;gap:6px}
.title{font-weight:600;font-size:15px}
.title .hl{background:linear-gradient(90deg,#fffb91,#ffd28a);padding:0 2px;border-radius:2px}
a.link-url{color:#0066cc;font-size:13px;word-break:break-all}
.pager{margin-top:18px;display:flex;gap:8px;align-items:center;justify-content:center}
button{padding:8px 10px;border-radius:2px;border:1px solid #ddd;background:#fafafa;cursor:pointer}
button:disabled{opacity:.5;cursor:not-allowed}
.per-page{font-size:13px;color:#444}
.status{margin-top:6px;color:#444;font-size:14px}
@media (max-width:480px){.thumb{height:110px}}
header {display: flex;flex-direction: column;gap: 12px;margin-bottom: 18px;align-items: stretch;}
.header-top { width: 100%; }
.selects {display: flex;gap: 8px;align-items: center;flex-wrap: wrap;}
.search-row {display: flex;gap: 8px;align-items: center;justify-content: flex-end;width: 100%;}
.search {flex: 0 1 260px;min-width: 0;box-sizing: border-box;}
input[type="search"] {width: 100%;padding: 10px;border-radius: 8px;border: 1px solid #ddd;font-size: 16px;}@media (max-width: 480px) {.selects { gap: 6px; }.search-row { justify-content: stretch; }.search { flex: 1 1 100%; }}
.visually-hidden {position: absolute !important;width: 1px !important;height: 1px !important;padding: 0 !important;margin: -1px !important;overflow: hidden !important;clip: rect(0, 0, 0, 0) !important;white-space: nowrap !important;border: 0 !important;}
@keyframes fadeIn {from { opacity: 0; transform: translateY(20px); }to { opacity: 1; transform: translateY(0); }}
:root{--bg: #f6f9fb;--cardc: #fff;--muted: #6b7280;--accent: #0ea5a4;--good: #16a34a;--gap: 10px;--radius: 10px;font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
.wrap{ max-width:980px; margin:28px auto; padding:18px; }
.panel{ background:var(--cardc); border-radius:12px; padding:18px; box-shadow:0 6px 18px rgba(11,35,56,0.06); }
.controls{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
select, button { font-size:0.95rem; padding:8px 10px; border-radius:8px; border:1px solid #e6eef5; background:white; }
.monthLabel{ font-weight:700; font-size:1.05rem; min-width:180px; text-align:center; }
.grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:10px; }
.weekday { text-align:center; font-weight:700; color:var(--muted); padding:6px 0; }
.cell{ background:linear-gradient(180deg,#ffffff,#fbfdff); border-radius:8px; min-height:78px; padding:8px; position:relative; box-shadow:0 2px 6px rgba(12,40,60,0.04); display:flex; flex-direction:column; justify-content:space-between; }
.cell.missing{ opacity:0.6; background:#f7f9fb; }
.date { font-weight:700; font-size:0.95rem; }
.meta { color:var(--muted); font-size:0.86rem; margin-top:6px; }
.linkLayer { position:absolute; inset:0; display:block; text-decoration:none; color:inherit; border-radius:8px; }
.badge { position:absolute; right:8px; top:8px; padding:4px 8px; border-radius:999px; background:var(--muted); color:#fff; font-size:0.78rem; }
.cell:hover { transform: translateY(-2px); transition: transform .12s; }
.legend{ display:flex; gap:12px; margin-top:12px; color:var(--muted); font-size:0.9rem; align-items:center; }
.dot{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.dot.link{ background:var(--accent); } .dot.none{ background:#9aa4b2; }
.yt-trending-table { width:100%; border-collapse:collapse; margin-bottom:1rem; }
.yt-trending-table th, .yt-trending-table td { padding:8px; border-bottom:1px solid #eee; vertical-align:top; text-align:left; }
.yt-trending-table .yt-thumb { float:left; margin-right:8px; border-radius:4px; }
.yt-trending-cards { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.yt-card { background:#fff; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,0.06); overflow:hidden; display:flex; flex-direction:column; }
.yt-card-thumb img { width:100%; height:auto; display:block; }
.yt-card-body { padding:10px; flex:1; display:flex; flex-direction:column; }
.yt-card-title { font-size:0.95rem; margin:0 0 6px; }
.yt-card-desc { margin:0 0 8px; color:#444; font-size:0.9rem; line-height:1.3; }
.yt-card-actions { margin-top:auto; display:flex; gap:8px; }
.btn-site, .btn-yt { display:inline-block; padding:6px 8px; border-radius:4px; text-decoration:none; font-size:0.85rem; }
.btn-site { background:#007bff; color:white; }
.btn-yt { background:#f1f1f1; color:#222; }
:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;line-height:1.35}
body{max-width:95%;margin:10px auto;padding:0 10px;color:#111}
header{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.search{flex:1;min-width:150px}
input[type="search"]{width:100%;padding:10px;border-radius:8px;border:1px solid #ddd;font-size:16px}
select{padding:8px;border-radius:2px;border:1px solid #ddd}
.controls{display:flex;gap:8px;align-items:center}
.meta{color:#666;font-size:13px}
.grids{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:18px}
.card{border:1px solid #e6e6e6;border-radius:8px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.thumb{display:block;width:100%;height:140px;object-fit:cover;background:#f3f3f3}
.card-body{padding:10px;flex:1;display:flex;flex-direction:column;gap:6px}
.title{font-weight:600;font-size:15px}
.title .hl{background:linear-gradient(90deg,#fffb91,#ffd28a);padding:0 2px;border-radius:2px}
a.link-url{color:#0066cc;font-size:13px;word-break:break-all}
.pager{margin-top:18px;display:flex;gap:8px;align-items:center;justify-content:center}
button{padding:8px 10px;border-radius:2px;border:1px solid #ddd;background:#fafafa;cursor:pointer}
button:disabled{opacity:.5;cursor:not-allowed}
.per-page{font-size:13px;color:#444}
.status{margin-top:6px;color:#444;font-size:14px}
@media (max-width:480px){.thumb{height:110px}}
header {display: flex;flex-direction: column;gap: 12px;margin-bottom: 18px;align-items: stretch;}
.header-top { width: 100%; }
.selects {display: flex;gap: 8px;align-items: center;flex-wrap: wrap;}
.search-row {display: flex;gap: 8px;align-items: center;justify-content: flex-end;width: 100%;}
.search {flex: 0 1 260px;min-width: 0;box-sizing: border-box;}
input[type="search"] {width: 100%;padding: 10px;border-radius: 8px;border: 1px solid #ddd;font-size: 16px;}
@media (max-width: 480px) {.selects { gap: 6px; }.search-row { justify-content: stretch; }.search { flex: 1 1 100%; }}
.visually-hidden {position: absolute !important;width: 1px !important;height: 1px !important;padding: 0 !important;margin: -1px !important;overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;white-space: nowrap !important;border: 0 !important;}
@keyframes fadeIn {from { opacity: 0; transform: translateY(20px); }to { opacity: 1; transform: translateY(0); }}
:root{--bg: #f6f9fb;--cardc: #fff;--muted: #6b7280;--accent: #0ea5a4;--good: #16a34a;--gap: 10px;--radius: 10px;font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
.wrap{ max-width:980px; margin:28px auto; padding:18px; }
.panel{ background:var(--cardc); border-radius:12px; padding:18px; box-shadow:0 6px 18px rgba(11,35,56,0.06); }
.controls{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
select, button { font-size:0.95rem; padding:8px 10px; border-radius:8px; border:1px solid #e6eef5; background:white; }
.monthLabel{ font-weight:700; font-size:1.05rem; min-width:180px; text-align:center; }
.grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:10px; }
.weekday { text-align:center; font-weight:700; color:var(--muted); padding:6px 0; }
.cell{ background:linear-gradient(180deg,#ffffff,#fbfdff); border-radius:8px; min-height:78px; padding:8px; position:relative; box-shadow:0 2px 6px rgba(12,40,60,0.04); display:flex; flex-direction:column; justify-content:space-between; }
.cell.missing{ opacity:0.6; background:#f7f9fb; }
.date { font-weight:700; font-size:0.95rem; }
.meta { color:var(--muted); font-size:0.86rem; margin-top:6px; }
.linkLayer { position:absolute; inset:0; display:block; text-decoration:none; color:inherit; border-radius:8px; }
.badge { position:absolute; right:8px; top:8px; padding:4px 8px; border-radius:999px; background:var(--muted); color:#fff; font-size:0.78rem; }
.cell:hover { transform: translateY(-2px); transition: transform .12s; }
.legend{ display:flex; gap:12px; margin-top:12px; color:var(--muted); font-size:0.9rem; align-items:center; }
.dot{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.dot.link{ background:var(--accent); } .dot.none{ background:#9aa4b2; }
.yt-countries {position: relative;cursor: pointer;display: inline-block;}
.yt-countries::after {content: attr(data-tooltip);position: absolute;top: 50%; right: 100%;transform: translateY(-50%);background: #e3e3e3;color: navy;padding: 6px 10px;border-radius: 6px;font-size: 12px;opacity: 0;pointer-events: none;transition: opacity 0.2s ease-in-out;z-index: 10;white-space: normal; display: inline-block;min-width: 123px; line-height: 1.4;}
.yt-countries::before {content: '';position: absolute;top: 50%;right: 100%; transform: translateY(-50%);border: 5px solid transparent;border-right-color: #e3e3e3;opacity: 0;transition: opacity 0.2s ease-in-out;z-index: 11;}
.yt-countries:hover::after,.yt-countries:hover::before {opacity: 1;}
.yt-date-ago {font-size: 11px;color: #666;}