:root {
  --bg: #fff7ed;
  --bg-grad: linear-gradient(180deg,#fff7ed 0%,#fed7aa33 30%,#0000 60%);
  --card: #ffffff;
  --ink: #0f172a;
  --muted: #64748b;
  --primary: #f97316;
  --ring: rgba(249,115,22,.25);
  --border: rgba(2,6,23,.10);
  --elev: 0 10px 30px rgba(2,6,23,.08);
  --elev2: 0 18px 38px rgba(2,6,23,.12);
  --inputBg: #ffffff;
  --mark: #fde68a;
  --gap: 20px;
  --cardPad: 18px;
  --tileBg1: #fff7ed;
  --tileBg2: #ffffff;
  --iconColor: #f97316;
}
[data-theme="dark"] {
  --bg: #0b1220;
  --bg-grad: radial-gradient(1200px 600px at 50% -200px,#1f293733 0%,#0000 60%),
             radial-gradient(900px 500px at 30% 20%,#7c2d1233 0%,#0000 60%),
             #0b1220;
  --card: #0f172a;
  --ink: #e2e8f0;
  --muted: #94a3b8;
  --primary: #fdba74;
  --ring: rgba(253,186,116,.28);
  --border: rgba(148,163,184,.22);
  --elev: 0 10px 28px rgba(0,0,0,.35);
  --elev2: 0 18px 48px rgba(0,0,0,.45);
  --inputBg: #0f172a;
  --mark: #f59e0b66;
  --tileBg1: #0f172a;
  --tileBg2: #111827;
  --iconColor: #fdba74;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg-grad);
  background-attachment: fixed;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
}

a { text-decoration: none; }

.container { max-width: 1280px; margin: 0 auto; padding: 24px; }

.header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
}
.brand { display: flex; gap: 14px; align-items: center; }
.brand img {height: 44px;pointer-events: none;user-select: none;}
.brand-logo {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: conic-gradient(from 160deg at 50% 50%,
    #fdba74 0 25%, #fb923c 25% 50%, #f97316 50% 75%, #c2410c 75% 100%);
  box-shadow: 0 10px 30px rgba(249,115,22,.25);
}
[data-theme="dark"] .brand-logo { box-shadow: 0 10px 30px rgba(253,186,116,.25); }
.brand-title { font-size: 22px; font-weight: 800; letter-spacing: .3px; }

.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.btn,.pill,.select,.switch {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
  box-shadow: var(--elev);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.pill { background: #fff3e6; color: var(--primary); }
[data-theme="dark"] .pill { background: #0b1220; color: var(--primary); }
.select select {
  border: none; background: transparent;
  font: inherit; outline: none; color: var(--ink);
}

.search { position: relative; display: flex; align-items: center; }
.search input {
  width: 420px;
  padding: 8px 32px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--inputBg);
  box-shadow: var(--elev);
  outline: none;
  font-size: 14px;
  color: var(--ink);
}
.search input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
.search svg {
  position: absolute; left: 10px;
  width: 18px; height: 18px;
  opacity: .75; fill: currentColor; color: var(--muted);
}

.hero {
  margin-top: 8px;
  display: grid;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--elev);
}
.hero h2 { margin: 0; font-size: 18px; }
.hero p { margin: 0; color: var(--muted); }
.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 12px;
}

.copybox {
  display: grid; gap: 8px;
  background: var(--inputBg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
}
.copybox label { font-size: 12px; color: var(--muted); font-weight: 700; }
.copyinput {
  cursor: pointer; width: 100%;
  border: none; background: transparent;
  font-family: ui-monospace, monospace;
  font-size: 13px; color: var(--ink);
  outline: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
  gap: var(--gap);
  margin-top: 18px;
}
.card {
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--elev);
  padding: var(--cardPad);
  display: grid;
  grid-template-rows: auto auto;
  gap: 12px;
  align-items: center;
  justify-items: center;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--elev2); }
.icon-wrap {
  width: 84px; height: 84px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: linear-gradient(180deg,var(--tileBg1),var(--tileBg2));
  border: 1px solid var(--border);
}
.icon-wrap .fox-icon { font-size: 40px; color: var(--iconColor); transition: transform .18s ease; }
.card:hover .fox-icon { transform: scale(1.06); }
.name {
  font-size: 13px; color: var(--muted);
  font-weight: 600; text-align: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

.footer {
  display: flex; justify-content: space-between;
  align-items: center; margin-top: 20px;
  color: var(--muted); font-size: 13px;
}
.footer a { color: var(--muted); text-decoration: none; }
.kbd {
  background: var(--inputBg);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  padding: 2px 6px; border-radius: 6px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
}
.card.focus { outline: 3px solid rgba(249,115,22,.35); }

.modal-back {
  position: fixed; inset: 0;
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 50;
}
[data-theme="dark"] .modal-back { background: rgba(2,6,23,.65); }

.modal {
  width: min(880px,94vw); max-height: 92vh;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(2,6,23,.25);
  padding: 20px;
  transform: translateY(10px) scale(.98);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
.modal.show { transform: translateY(0) scale(1); opacity: 1; }
.modal-head {
  display: flex; gap: 10px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.modal-title { font-weight: 800; font-size: 18px; }
.modal-actions { display: flex; gap: 10px; align-items: center; }
.modal-body {
  display: grid; grid-template-columns: 260px 1fr;
  gap: 18px; align-items: start; min-width: 0;
}
.modal-icon {
  display: grid; place-items: center;
  width: 260px; height: 260px;
  border-radius: 16px;
  background: linear-gradient(180deg,var(--tileBg1),var(--tileBg2));
  border: 1px solid var(--border);
}
.modal-icon .fox-icon { font-size: 110px; color: var(--iconColor); }

.controls {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 8px; min-width: 0;
}
.control {
  position: relative;
  display: flex; gap: 10px; align-items: center;
  background: var(--inputBg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--elev);
  min-width: 0; overflow: hidden;
}
.control label {
  font-size: 12px; color: var(--muted); font-weight: 700;
  width: 96px; flex: 0 0 96px;
}
.control input[type="color"], .control select {
  flex: 1; width: 100%; min-width: 0;
  border: none; background: transparent;
  font: inherit; outline: none; color: var(--ink);
}
.control select { -webkit-appearance: none; appearance: none; padding-right: 28px; }
.control::after {
  content:""; position:absolute; right:12px; top:50%;
  width:8px; height:8px;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:translateY(-50%) rotate(45deg);
  pointer-events:none;
}

.copy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: 0; }
.copy-item {
  display: grid; grid-template-rows: auto 1fr;
  gap: 6px;
  background: var(--inputBg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px; min-width: 0;
}
.copy-item label { font-size: 12px; color: var(--muted); font-weight: 700; }
.copy-input {
  width: 100%; border: none; background: transparent;
  font-family: ui-monospace, monospace;
  font-size: 13px; color: var(--ink);
  outline: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

.toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background:#0b1220; color:#fff;
  padding:10px 14px;
  border-radius:12px;
  box-shadow:0 12px 28px rgba(2,6,23,.25);
  opacity:0;
  transition:opacity .2s ease,transform .2s ease;
  z-index:1260;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.control input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  width: 100%;
  height: 34px;
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
}
.control input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 8px;
}
.control input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 8px;
}

@media (max-width: 980px) {
  .modal-body { grid-template-columns: 1fr; }
  .modal-icon { width: 100%; height: 200px; }
  .modal-icon .fox-icon { font-size: 90px; }
}
@media (max-width: 768px) {
  .mobile-hide { display: none; }
  body { background: var(--bg); background-attachment: scroll; }
  .header { grid-template-columns: 1fr; gap: 12px; }
  .tools { justify-content: flex-start; flex-wrap: wrap; }
  .search input { width: 100%; max-width: 100%; }
  .btn,.pill,.select,.switch { font-size: 12px; padding: 6px 8px; }
}
@media (max-width: 640px) {
  .gallery { grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); }
  .copy-grid { grid-template-columns: 1fr; }
  .controls { grid-template-columns: 1fr; }
}

.pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 24px 0;
}
.pagination button {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  transition: background .2s,color .2s;
}
.pagination button:hover { background: var(--primary); color: #fff; }
.pagination button.active { background: var(--primary); color: #fff; }

.segmented{display:flex;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--elev);overflow:hidden}
.segmented button{appearance:none;border:0;background:transparent;color:var(--ink);font-weight:600;font-size:13px;padding:6px 12px;cursor:pointer}
.segmented button.active{background: var(--primary); color:#000}
.segmented button+button{border-left:1px solid var(--border)}

.alert{transition:opacity .25s ease, transform .25s ease; opacity:1; transform:translateY(0)}
.alert.hide{opacity:0; transform:translateY(-6px)}
.alerts{pointer-events:none}
.alerts .alert{pointer-events:auto}

.copyinput{cursor:pointer;width:100%;border:none;background:transparent;font-family:ui-monospace,monospace;font-size:13px;color:var(--ink);outline:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
mark{background:transparent;color:var(--primary);font-weight:700}

.cookie-banner{
  position:fixed;
  left:50%;
  bottom:16px;
  transform:translate(-50%,12px);
  width:min(980px,calc(100vw - 24px));
  display:none;
  align-items:center;
  gap:12px;
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--elev2);
  padding:14px 16px;
  z-index:1200;
  opacity:0;
  transition:opacity .2s ease, transform .2s ease;
}
.cookie-banner.show{display:flex;opacity:1;transform:translate(-50%,0)}
.cookie-text{flex:1;line-height:1.4}
.cookie-text a{color:var(--primary);text-decoration:none}
.cookie-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-accept{background:var(--primary);color:#fff}
.btn-plain{background:var(--inputBg);color:var(--ink)}

@media (max-width:640px){
  .cookie-text{font-size:13px}
}

.filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:space-between;
  margin-top:14px;
}
@media (max-width:768px){
  .filters{gap:10px}
  .filters .search{flex:1 1 100%}
  .filters .search input{width:100%}
}
/* Badge na kartách podle tieru */
.badge { color:#fff }
.badge.pro { background:#f97316 }
.badge.plus { background:#3b82f6 }
[data-theme="light"] .badge.pro{ background:#dc2626 }
[data-theme="light"] .badge.plus{ background:#2563eb }

/* Badge v modalu */
.modal-badge.pro{ color:#f97316 }
.modal-badge.plus{ color:#3b82f6 }
[data-theme="light"] .modal-badge.pro{ color:#dc2626 }
[data-theme="light"] .modal-badge.plus{ color:#2563eb }
.select{
  position:relative;
  background:var(--inputBg);
  border:1px solid var(--border);
  box-shadow:var(--elev);
  border-radius:10px;
  padding:0 10px;
  height:36px;
  align-items:center;
}
.select span{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  margin-right:8px;
}
.select select{
  -webkit-appearance:none;
  appearance:none;
  border:none;
  background:transparent;
  font:inherit;
  color:var(--ink);
  outline:none;
  height:34px;
  line-height:34px;
  padding:0 22px 0 0;
  cursor:pointer;
}
.select::after{
  content:"";
  position:absolute;
  right:12px;
  top:50%;
  width:8px;
  height:8px;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:translateY(-50%) rotate(45deg);
  pointer-events:none;
}
.select:focus-within{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--ring), var(--elev);
}
.select:hover{
  background:color-mix(in srgb, var(--inputBg) 92%, var(--ink) 8%);
}
@supports not (color: color-mix(in srgb, black 10%, white)) {
  .select:hover{filter:brightness(0.98)}
}
.select select:disabled{opacity:.6;cursor:not-allowed}
.select select::-ms-expand{display:none}

.control select{
  -webkit-appearance:none;
  appearance:none;
  border:none;
  background:transparent;
  font:inherit;
  color:var(--ink);
  outline:none;
  padding-right:26px;
  height:28px;
  line-height:28px;
}

select option{
  background:var(--card);
  color:var(--ink);
}
[data-theme="dark"] select option{
  background:#0b1220;
  color:var(--ink);
}

@media (max-width:768px){
  .select{height:34px}
  .select select{height:32px;line-height:32px}
}
.header{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:12px 0}
.brand{display:flex;gap:14px;align-items:center}
.brand img{height:44px;pointer-events:none;user-select:none}
.brand-title{font-size:22px;font-weight:800;letter-spacing:.3px}

.tools{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.btn,.switch,.pill{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:6px 10px;box-shadow:var(--elev);font-weight:700;font-size:13px;color:var(--ink);cursor:pointer;text-decoration:none}
.pill{background:#fff3e6;color:var(--primary)}
[data-theme="dark"] .pill{background:#0b1220;color:var(--primary)}
.btn:focus-visible,.switch:focus-visible{outline:0;box-shadow:0 0 0 4px var(--ring),var(--elev)}
.btn:hover,.switch:hover{filter:brightness(0.98)}
.switch{min-width:68px;justify-content:center}

.dropdown{position:relative}
.dropdown > .btn{min-width:180px;justify-content:space-between}
.dropdown-menu{display:none;position:absolute;right:0;top:100%;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--elev2);padding:6px 0;z-index:60;min-width:220px}
.dropdown.open .dropdown-menu{display:block}
.dropdown-menu a,.dropdown-menu form button{display:block;width:100%;text-align:left;background:transparent;border:0;padding:8px 14px;font-size:14px;color:var(--ink);cursor:pointer}
.dropdown-menu a i,.dropdown-menu form button i{margin-right:8px}
.dropdown-menu a:hover,.dropdown-menu form button:hover{background:color-mix(in srgb, var(--inputBg) 90%, #000 10%)}
@supports not (color: color-mix(in srgb, black 10%, white)) {
  .dropdown-menu a:hover,.dropdown-menu form button:hover{filter:brightness(0.96)}
}

.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;color:#fff;line-height:1}
.badge.free{background:#22c55e;color:#053b18}
.free-l{color:#22c55e}
.badge.plus{background:#3b82f6}
.plus-l{color:#3b82f6}
.badge.pro{background:#f97316}
.pro-l{color:#f97316}
[data-theme="light"] .plus-l{color:#2563eb}
[data-theme="light"] .pro-l{color:#dc2626}

@media(max-width:768px){
  .header{grid-template-columns:1fr;gap:12px}
  .tools{justify-content:flex-start}
  .brand img{height:38px}
  .brand-title{font-size:20px}
  .btn,.switch,.pill{font-size:12px;padding:6px 8px}
}
.cat-duotone {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}