:root {
  --bg: #0D1117; --surface: #161B22; --surface2: #1c232d; --focus: #1E3A6E; --line: #1f2630;
  --accent: #E3262B; --accent2: #7a1013; --text: #F0F3F6; --dim: #8B949E;
  --film: #E3262B; --serie: #16A34A; --ep: #2563EB;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--text); font-family: "Segoe UI", Roboto, Arial, sans-serif; overflow: hidden;
  -webkit-tap-highlight-color: transparent; user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: var(--text); }
[hidden] { display: none !important; }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* ---------- Chargement / activation ---------- */
#loading, #activation { align-items: center; justify-content: center; gap: 28px;
  background: linear-gradient(#0D1117cc, #0D1117ee), url(img/bg.jpg) center/cover; }
.act-logo { width: min(380px, 70vw); }
.spinner { width: 46px; height: 46px; border: 4px solid #ffffff22; border-top-color: var(--accent); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.act-card { width: min(420px, 92vw); display: flex; flex-direction: column; align-items: stretch; gap: 14px; text-align: center;
  background: #161B22e6; padding: 30px 28px; border-radius: 18px; border: 1px solid #ffffff14; }
.act-card .act-logo { align-self: center; width: 260px; }
.act-sub { color: var(--dim); }
.act-input { background: var(--bg); border: 2px solid #ffffff22; border-radius: 12px; padding: 14px; font-size: 22px; text-align: center; letter-spacing: 3px; outline: none; user-select: text; }
.act-input:focus { border-color: var(--accent); }
.btn { padding: 13px 18px; border-radius: 12px; font-weight: 700; font-size: 16px; }
.btn-red { background: var(--accent); }
.btn-red:hover { filter: brightness(1.1); }
.btn-ghost { background: #ffffff10; border: 1px solid #ffffff22; }
.btn:disabled { opacity: .5; cursor: default; }
.act-msg { min-height: 20px; color: #ffb4b4; font-size: 14px; white-space: pre-line; }
.act-msg.ok { color: #9ee6b0; }
.act-id { color: var(--dim); font-size: 12px; }

/* ---------- Barre du haut ---------- */
.top { display: flex; align-items: center; gap: 16px; padding: 10px 20px; border-bottom: 1px solid var(--line); flex: none; }
.logo { height: 38px; }
.tabs { display: flex; gap: 6px; }
.tab { padding: 8px 16px; border-radius: 18px; color: var(--dim); font-weight: 600; font-size: 14px; white-space: nowrap; }
.tab:hover { color: var(--text); background: #ffffff0d; }
.tab.on { background: var(--accent); color: #fff; }
.new { background: linear-gradient(90deg, var(--accent), var(--accent2)); padding: 8px 14px; border-radius: 18px; font-weight: 700; font-size: 13px; position: relative; white-space: nowrap; }
.new i { position: absolute; top: -8px; right: -8px; background: #fff; color: var(--accent); border-radius: 10px; font-style: normal; font-size: 11px; padding: 1px 6px; font-weight: 800; }
.search { margin-left: auto; }
.search input { background: var(--surface); border: 1px solid transparent; border-radius: 18px; padding: 8px 16px; width: 260px; outline: none; user-select: text; }
.search input:focus { border-color: var(--accent); }
.icon-btn { font-size: 20px; width: 40px; height: 40px; border-radius: 50%; }
.icon-btn:hover { background: #ffffff12; }

/* ---------- Corps ---------- */
.main { flex: 1; display: flex; min-height: 0; }
.cats { width: 230px; flex: none; border-right: 1px solid var(--line); padding: 10px 8px; overflow-y: auto; }
.cat { width: 100%; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: #c9d1d9; margin-bottom: 2px; display: flex; justify-content: space-between; gap: 8px; text-align: left; }
.cat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat small { color: var(--dim); flex: none; }
.cat:hover { background: #ffffff0a; }
.cat.on { background: var(--focus); color: #fff; box-shadow: inset 3px 0 var(--accent); }
.list { width: 340px; flex: none; border-right: 1px solid var(--line); padding: 8px; overflow-y: auto; }
.ch { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; margin-bottom: 2px; text-align: left; }
.ch:hover { background: #ffffff0a; }
.ch.on { background: var(--surface); outline: 2px solid var(--accent); }
.ch .num { color: var(--dim); font-size: 12px; width: 26px; text-align: right; flex: none; }
.ch img, .ch .lg { width: 48px; height: 32px; border-radius: 5px; background: #21262d; object-fit: contain; flex: none; }
.ch .lg { display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: var(--dim); }
.ch .txt { min-width: 0; flex: 1; }
.ch .n { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch .e { font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch .star { color: #F5CD6E; font-size: 13px; }
.empty { color: var(--dim); padding: 30px 16px; text-align: center; line-height: 1.5; }

.pane { flex: 1; min-width: 0; padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.vid { position: relative; background: #000; border-radius: 10px; overflow: hidden; aspect-ratio: 16/9; width: 100%; max-height: 68vh; flex: none; }
.vid video { width: 100%; height: 100%; display: block; background: #000; }
.vid:fullscreen { border-radius: 0; max-height: none; }
.live-tag { position: absolute; top: 12px; left: 12px; background: var(--accent); font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 4px; }
.vid-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: #ddd; font-size: 15px; pointer-events: none; white-space: pre-line; }
.zap { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); background: #000c; border: 1px solid #ffffff22; padding: 10px 18px; border-radius: 10px; font-weight: 700; font-size: 16px; }
.ctr { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; display: flex; align-items: center; gap: 8px;
  background: linear-gradient(transparent, #000c); opacity: 0; transition: opacity .2s; }
.vid:hover .ctr, .vid.show .ctr { opacity: 1; }
/* Téléphone / tablette (pas de souris) : boutons toujours visibles, plus grands */
@media (hover: none) { .ctr { opacity: 1; } .ctr button { width: 44px; height: 44px; font-size: 20px; } .ctr input[type=range] { display: none; } }
.ctr button { font-size: 17px; width: 36px; height: 36px; border-radius: 8px; }
.ctr button:hover { background: #ffffff22; }
.ctr input[type=range] { width: 90px; accent-color: var(--accent); }
.grow { flex: 1; }
.epg-title { font-weight: 700; font-size: 18px; }
.epg-sub { color: var(--dim); font-size: 13px; margin-top: 4px; }
.epg-next { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.epg-next div { background: var(--surface); border-radius: 8px; padding: 8px 12px; font-size: 12.5px; color: #c9d1d9; }
.epg-next b { color: var(--accent); margin-right: 6px; }
.epg-now { margin-top: 8px; color: #c9d1d9; font-size: 13px; line-height: 1.5; max-height: 4.5em; overflow: hidden; }
.bar { height: 4px; background: #ffffff20; border-radius: 2px; margin-top: 8px; max-width: 420px; }
.bar div { height: 100%; background: var(--accent); border-radius: 2px; }

/* ---------- Grilles (films, séries, nouveautés) ---------- */
.grid-wrap { flex: 1; min-width: 0; overflow-y: auto; padding: 14px 16px 30px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.poster { min-width: 0; }
.grid h3 { grid-column: 1 / -1; font-size: 16px; margin-top: 6px; }
.grid h3 small { color: var(--dim); font-weight: 400; }
.poster { text-align: left; border-radius: 10px; padding: 0; position: relative; }
.poster .im { position: relative; aspect-ratio: 2/3; border-radius: 10px; overflow: hidden; background: var(--surface2); }
.poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; }
.poster .noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 10px; text-align: center; font-weight: 700; color: var(--dim); }
.poster .t { font-size: 13px; font-weight: 600; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster .m { font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster:hover .im, .poster:focus-visible .im { outline: 3px solid var(--accent); }
.poster .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #00000080; }
.poster .prog div { height: 100%; background: var(--accent); }
.tag { position: absolute; top: 7px; left: 7px; font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 5px; background: var(--film); color: #fff; }
.tag.serie { background: var(--serie); } .tag.episode { background: var(--ep); }
.fav-star { position: absolute; top: 6px; right: 6px; font-size: 16px; text-shadow: 0 1px 4px #000; }
.chips { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.chip { padding: 7px 16px; border-radius: 18px; background: var(--surface); color: var(--dim); font-weight: 600; font-size: 14px; }
.chip.on { background: var(--accent); color: #fff; }

/* ---------- Fenêtre ---------- */
.modal { position: fixed; inset: 0; background: #000b; display: flex; align-items: center; justify-content: center; z-index: 20; padding: 20px; }
.modal-box { position: relative; background: var(--bg); border: 1px solid #ffffff1a; border-radius: 14px; width: min(980px, 100%); max-height: 92vh; overflow-y: auto; padding: 24px; }
.modal-box.wide { width: min(1200px, 100%); }
.modal-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: #ffffff12; font-size: 16px; z-index: 2; }
.detail { display: flex; gap: 24px; }
.detail .cover { width: 220px; flex: none; aspect-ratio: 2/3; border-radius: 10px; object-fit: cover; background: var(--surface2); }
.detail h2 { font-size: 24px; margin-bottom: 8px; padding-right: 40px; }
.detail .meta { color: var(--dim); font-size: 13.5px; margin-bottom: 12px; }
.detail .plot { line-height: 1.55; color: #c9d1d9; margin-bottom: 14px; }
.detail .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.detail .who { font-size: 13px; color: var(--dim); margin-top: 6px; }
.seasons { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.eps { display: flex; flex-direction: column; gap: 6px; }
.ep { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 8px; background: var(--surface); text-align: left; }
.ep:hover { outline: 2px solid var(--accent); }
.ep img { width: 110px; height: 62px; object-fit: cover; border-radius: 6px; background: var(--surface2); flex: none; }
.ep .n { font-weight: 600; font-size: 14px; }
.ep .p { height: 3px; background: #ffffff20; border-radius: 2px; margin-top: 6px; width: 160px; }
.ep .p div { height: 100%; background: var(--accent); }
.set-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.set-row small { display: block; color: var(--dim); }
.set-row input { background: var(--surface); border: 1px solid #ffffff22; border-radius: 8px; padding: 8px 10px; width: 120px; user-select: text; }
.modal h2 { margin-bottom: 12px; }

/* ---------- Lecteur films / épisodes ---------- */
.player { position: fixed; inset: 0; background: #000; z-index: 30; }
.player video { width: 100%; height: 100%; display: block; }
.player-top, .player-bar { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 12px; padding: 14px 18px; transition: opacity .25s; }
.player-top { top: 0; background: linear-gradient(#000c, transparent); font-weight: 700; }
.player-top span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-bar { bottom: 0; background: linear-gradient(transparent, #000d); font-size: 14px; }
.player-bar button, .player-top button { padding: 8px 12px; border-radius: 8px; font-size: 16px; }
.player-bar button:hover, .player-top button:hover { background: #ffffff22; }
.player-bar input { flex: 1; accent-color: var(--accent); }
.player.idle .player-top, .player.idle .player-bar { opacity: 0; }
.player.idle { cursor: none; }

.toast { position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%); background: #000e; border: 1px solid #ffffff22; padding: 12px 20px; border-radius: 10px; z-index: 50; max-width: 90vw; text-align: center; }

/* ---------- Barre du bas (téléphone) ---------- */
.bottom { display: none; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #ffffff22; border-radius: 4px; }

@media (max-width: 1100px) {
  .tab span, .new span { display: none; }
  .search input { width: 180px; }
  .list { width: 290px; }
  .cats { width: 190px; }
}

/* Téléphone (iPhone) : lecteur en haut, catégories en pilules, chaînes en dessous */
@media (max-width: 760px) {
  .top { padding: calc(env(safe-area-inset-top) + 6px) 12px 6px; gap: 10px; }
  .logo { height: 28px; }
  .tabs, #setBtn { display: none; }
  .search { margin-left: auto; }
  .search input { width: 130px; padding: 6px 12px; }
  .new { padding: 6px 10px; }
  .main { flex-direction: column; overflow-y: auto; }
  .main.live .pane { order: 1; padding: 0; flex: none; overflow: visible; }
  .main.live .vid { border-radius: 0; max-height: none; }
  .main.live .epg { padding: 8px 12px 0; }
  .epg-sub, .epg-now { display: none; }
  .epg-next { flex-wrap: nowrap; overflow-x: auto; }
  .epg-next div { flex: none; }
  .cats { order: 2; width: 100%; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; border: 0; padding: 10px 10px 4px; flex: none; }
  .cat { width: auto; flex: none; border-radius: 16px; background: var(--surface); padding: 6px 12px; font-size: 13px; }
  .cat.on { background: var(--accent); box-shadow: none; }
  .cat small { display: none; }
  .list { order: 3; width: 100%; border: 0; overflow: visible; flex: none; padding-bottom: 80px; }
  .grid-wrap { order: 3; overflow: visible; padding-bottom: 90px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .poster, .ch, .ch .txt { min-width: 0; }
  html, body, .screen, .main, .grid-wrap, .list { overflow-x: hidden; overscroll-behavior-x: none; }
  .main { touch-action: pan-y; }
  .cats { touch-action: pan-x; }
  .bottom { display: flex; position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); justify-content: space-around;
    padding: 6px 0 calc(env(safe-area-inset-bottom) + 6px); z-index: 10; border-top: 1px solid var(--line); }
  .bottom button { font-size: 11px; color: var(--dim); display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 56px; }
  .bottom b { font-size: 19px; font-weight: 400; }
  .bottom .on { color: var(--accent); font-weight: 700; }
  .detail { flex-direction: column; }
  .detail .cover { width: 150px; }
  .modal { padding: 0; }
  .modal-box { max-height: 100vh; height: 100%; border-radius: 0; padding: calc(env(safe-area-inset-top) + 16px) 16px 30px; }
}

/* iPhone : bannière « Installer sur l'écran d'accueil » */
#a2hs { position: fixed; inset: 0; z-index: 60; }
.a2hs-dim { position: absolute; inset: 0; background: #0009; }
.a2hs-sheet { position: absolute; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom) + 24px); max-width: 460px; margin: 0 auto; background: #1a1f2b; border: 1px solid #2c3445; border-radius: 22px; padding: 18px; color: #fff; }
.a2hs-x { position: absolute; right: 10px; top: 8px; width: 40px; height: 40px; color: #99a; font-size: 18px; background: none; }
.a2hs-h { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; padding-right: 30px; }
.a2hs-h img { width: 54px; height: 54px; border-radius: 12px; flex: none; }
.a2hs-h b { display: block; font-size: 17px; }
.a2hs-h small { color: #aab; font-size: 12.5px; line-height: 1.4; }
.a2hs-st { display: flex; align-items: center; gap: 10px; font-size: 14px; background: #111621; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.a2hs-n { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex: none; }
.a2hs-ic { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; background: #2a3346; vertical-align: middle; margin: 0 2px; }
.a2hs-btns { display: flex; gap: 10px; margin-top: 6px; }
.a2hs-btns button { flex: 1; border-radius: 12px; padding: 12px; font-weight: 700; font-size: 14px; min-height: 44px; }
.a2hs-later { background: #2a3346; color: #ccd; }
.a2hs-ok { background: var(--accent); color: #fff; }
.a2hs-arrow { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) - 6px); transform: translateX(-50%); color: var(--accent); font-size: 30px; font-weight: 800; animation: a2hsb 1.2s ease-in-out infinite; }
@keyframes a2hsb { 50% { transform: translate(-50%, 6px); } }
.a2hs-tip { font-size: 13px; color: #ffd27a; background: #2a2412; border-radius: 10px; padding: 8px 10px; margin: 0 0 10px; line-height: 1.4; }
/* Rubriques perso (panel) en haut du Live */
.cat.rub{display:flex;align-items:center;gap:8px;border-left:3px solid var(--rc,#E5262B)}
.cat.rub .rub-dot{width:8px;height:8px;border-radius:50%;background:var(--rc,#E5262B);flex:none}
.cat.rub span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat.rub .rub-live{color:#ff5a5f;font-size:10px;font-weight:700;flex:none}
.cat.ev{background:linear-gradient(90deg,#0d3b2e,#145a43 60%,#0000);color:#fff}
.cat.ev .rub-live{color:#ffd75e}
[data-tab][hidden]{display:none!important}
.tab.tab-ev{color:#ffd75e}
.tab.tab-ev.on{background:linear-gradient(90deg,#145a43,#c9a227);color:#fff}

/* ───── الجيل الذهبي (Rewind Zmen) ───── */
.tab.tab-jil{color:#ffc24b}.tab.tab-jil.on{background:linear-gradient(90deg,#ff7a2f,#c9701f);color:#140e0a}
.main.jilmode{background:#140e0a}.main.jilmode .cats{background:#1c1410;border-color:#3a2a20}.main.jilmode .grid-wrap{background:#140e0a}
.main.jilmode .cat.on{background:#3a2618;outline:1.5px solid #ffc24b;color:#fff}.main.jilmode .cat:hover{background:#2a1d15}
.jil-back{color:#ffc24b!important;font-weight:700}.jil-cat-title{color:#ffc24b;font-weight:800;font-size:18px;padding:8px 10px 10px}
.jil{flex:1;min-width:0;overflow-y:auto;padding:16px 22px 30px;background:#140e0a;color:#f5efe6}
.jil-head{text-align:center;margin-bottom:12px}.jil-logo{font-size:34px;font-weight:800;letter-spacing:-1px}.jil-logo b{color:#ff7a2f;font-size:24px;margin-right:8px;vertical-align:middle}
.jil-logo i{font-style:normal;font-weight:400;color:#ff7a2f}.jil-sub{color:#ffc24b;font-weight:800;font-size:17px;text-shadow:0 3px 4px #7a4310}
.jil-ban{position:relative;overflow:hidden;border-radius:20px;background:#1a1310;border:1px solid #33281f;min-height:150px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 26px 28px;margin:0 0 14px}
.jil-ban-r{text-align:right;position:relative;z-index:1}.jil-ban-r h2{font-size:clamp(20px,3vw,34px);margin:0 0 6px}.jil-ban-r p{color:#c9bba8;margin:0}
.jil-ban-l{position:relative;z-index:1}.jil-tag{color:#ffc24b;font-weight:800;letter-spacing:.12em;font-size:13px;margin-bottom:10px}.jil-tag b{color:#ff7a2f;margin-right:6px}
.jil-play{background:#ff7a2f;color:#1a1310;font-weight:800;font-size:16px;border-radius:24px;padding:10px 24px}.jil-play:hover{transform:scale(1.06)}
.jil-90{position:absolute;left:45%;top:50%;transform:translate(-50%,-50%);font-size:120px;font-weight:900;color:#ffffff0d;pointer-events:none}
.jil-stripes{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;height:8px}.jil-stripes i{flex:1}
.jil-stripes i:nth-child(1){background:#e2483d}.jil-stripes i:nth-child(2){background:#ff7a2f}.jil-stripes i:nth-child(3){background:#ffb547}.jil-stripes i:nth-child(4){background:#3fa58f}
.jil-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.jil-tile{position:relative;overflow:hidden;border-radius:18px;min-height:110px;background:linear-gradient(135deg,var(--c1),var(--c2));border:1px solid #ffffff2e;color:#fff8ec;display:flex;align-items:center;justify-content:center;padding:22px 10px 14px;transition:transform .15s}
.jil-tile:hover,.jil-tile:focus-visible{transform:scale(1.05);outline:3px solid #ff7a2f}.jil-tile.dim{opacity:.45}
.jil-tile .jil-stripes{flex-direction:row;height:5px}.jt-tag{position:absolute;top:8px;left:12px;font-size:11px;font-weight:800;letter-spacing:.1em;opacity:.75}
.jt-ic{position:absolute;top:6px;right:10px;font-size:16px}.jt-t{font-weight:800;font-size:17px;text-align:center;text-shadow:0 2px 6px #0006}
.jt-last{position:absolute;bottom:10px;left:8px;right:8px;font-size:11px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.main.jilmode .poster .im{background:#231915}.main.jilmode .poster:hover .im{outline-color:#ff7a2f}.main.jilmode .poster .m{color:#c9bba8}
.jil-p.wide .im{aspect-ratio:16/9}.jil-p:not(.wide) .im img{object-fit:contain;background:#1a120e}
.jil-yt-v{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}.jil-yt-v iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.jil-yt-bar{display:flex;align-items:center;gap:10px;margin-top:10px}.jil-yt-bar span{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1100px){.jil-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.jil{padding:12px}.jil-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.jil-tile{min-height:90px}.jt-t{font-size:15px}
  .jil-ban{flex-direction:column-reverse;align-items:stretch;text-align:right}.jil-90{display:none}.jil{order:3;padding-bottom:90px;overflow:visible}.jil-cat-title{display:none}.main.jilmode .cat.on{background:#ff7a2f;color:#140e0a;outline:0}}