/* Kompletní design pro desktop + mobil */

/* základní proměnné */
/* základní proměnné (defaultně tmavý motiv) */
:root {
  --bg: #0b0c10;
  --card: #11131a;
  --border: #202431;
  --text: #e9eef5;
  --muted: #a8b3c4;
  --primary: #4f8cff;
  --primary-cta: #3b7cff;
  --ok: #20c997;
  --warn: #f6c343;
  --err: #ff6b6b;
  --shadow: 0 6px 24px rgba(0,0,0,.25);
  color-scheme: dark; /* pro tmavý motiv */
}

/* světlý motiv */
html[data-theme="light"] {
  --bg: #f6f7fb;
  --card: #fff;
  --border: #e7eaf0;
  --text: #111827;
  --muted: #606975;
  --primary: #2f6df6;
  --primary-cta: #2459d9;
  --shadow: 0 6px 24px rgba(16,24,40,.08);
  color-scheme: light;
}


*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans","DejaVu Sans",sans-serif;background:radial-gradient(1200px 600px at 10% -10%, rgba(79,140,255,.12),transparent 60%),radial-gradient(900px 500px at 90% -20%, rgba(79,140,255,.10),transparent 60%),var(--bg);color:var(--text)}

/* top bar */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:12px;width:auto;height:auto;padding:8px 12px;background:var(--primary);color:#fff;border-radius:8px;z-index:50}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);backdrop-filter:saturate(1.2) blur(8px);background:color-mix(in oklab, var(--bg) 86%, transparent);padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right))}
.brand{display:flex;align-items:center;gap:10px}
.brand h1{font-size:clamp(16px,2.8vw,18px);margin:0;font-weight:650;letter-spacing:.2px}
.actions{display:flex;align-items:center;gap:10px}
#search{min-width:180px;max-width:340px;width:36vw;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--text);outline:none;-webkit-tap-highlight-color:transparent}
#search::placeholder{color:var(--muted)}
#theme-toggle{border:1px solid var(--border);background:var(--card);color:var(--text);padding:12px 14px;border-radius:12px;cursor:pointer;min-width:44px;min-height:44px}
#theme-toggle:hover{transform:translateY(-1px)}

/* container & grid */
.container{max-width:1200px;margin:24px auto;padding:0 16px}
h2{margin:0 0 16px;font-size:clamp(18px,2.8vw,20px);color:var(--text)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

/* card */
.card{border:1px solid var(--border);background:linear-gradient(180deg,color-mix(in oklab, var(--card) 100%, transparent) 0%, color-mix(in oklab, var(--card) 85%, transparent) 100%);border-radius:16px;padding:clamp(12px,2vw,16px);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;min-height:160px;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.card:hover{transform:translateY(-2px);border-color:color-mix(in oklab, var(--primary) 60%, var(--border))}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-title{display:flex;align-items:center;gap:8px}
.card .emoji{font-size:20px}
.card .title{margin:0;font-size:clamp(15px,2.6vw,16px);line-height:1.2}
.desc{margin:0;color:var(--muted);font-size:clamp(14px,2.5vw,15px)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags .tag{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid var(--border);color:var(--muted);background:color-mix(in oklab, var(--card), transparent)}
.badge{font-size:12px;padding:4px 8px;border-radius:8px;border:1px solid var(--border);background:color-mix(in oklab, var(--card), transparent)}
.badge.ok{color:#0b5;border-color:color-mix(in oklab, var(--ok), var(--border) 55%)}
.badge.warn{color:#b98b00;border-color:color-mix(in oklab, var(--warn), var(--border) 55%)}
.badge.err{color:#d33;border-color:color-mix(in oklab, var(--err), var(--border) 55%)}

/* externí / HTML badge */
.badge.empty {
  color: var(--muted);
  background: color-mix(in oklab, var(--card), var(--border) 30%);
}

.card-foot{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:12px;border:1px solid var(--border);text-decoration:none;color:var(--text);background:var(--card);min-height:44px}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-cta)}
.btn.ghost:hover{border-color:color-mix(in oklab, var(--primary), var(--border) 50%)}

/* footer */
.footer{max-width:1200px;margin:24px auto 32px;padding:16px;color:var(--muted);border-top:1px solid var(--border);padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right));padding-bottom:calc(16px + env(safe-area-inset-bottom))}

/* mobile bottom bar */
.bottombar{position:sticky;bottom:0;left:0;right:0;display:none;gap:8px;padding:8px 12px;border-top:1px solid var(--border);backdrop-filter:saturate(1.2) blur(8px);background:color-mix(in oklab, var(--bg) 86%, transparent);justify-content:space-around;align-items:center;padding-left:max(12px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right));padding-bottom:max(8px, env(safe-area-inset-bottom));z-index:30}
.nav-btn{display:inline-flex;flex-direction:column;align-items:center;gap:2px;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:8px 12px;min-width:44px;min-height:44px}
.nav-btn span{font-size:12px;opacity:.9}

/* dialog */
#settings::backdrop{background:rgba(0,0,0,.4)}
#settings{border:1px solid var(--border);border-radius:16px;padding:0;background:var(--card);color:var(--text)}
.settings-form{padding:16px;min-width:min(92vw,420px)}
.settings-form h3{margin:0 0 12px}
.settings-form fieldset{border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin:0 0 12px}
.settings-form legend{padding:0 6px;color:var(--muted)}
.settings-form label{display:inline-flex;align-items:center;gap:8px;margin-right:16px}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}

/* mobile */
@media (max-width:640px){ 
  .actions{gap:8px} 
  #search{width:48vw;min-width:140px} 
  .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px} 
  .bottombar{display:flex} 
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){ *{transition:none!important;animation:none!important} }