/* PEF ČZU design tokens (AI BRIDGE portal / PPSŘ styl.css); fonts fall back to system until Rubik is self-hosted */
html:root { --background: 0 0% 100%; --foreground: 0 0% 25%; --card: 0 0% 100%; --muted: 0 0% 92%; --muted-foreground: 0 0% 45%; --border: 0 0% 88%; --border-strong: 0 0% 78%; --primary: 359 89% 42%; --primary-dark: 0 100% 30%; --primary-soft: 0 78% 95%; --primary-foreground: 0 0% 100%; --info: 97 94% 28%; --info-soft: 97 50% 95%; --success: 99 60% 40%; --success-soft: 99 45% 94%; --danger: 356 95% 46%; --danger-soft: 356 80% 96%; --radius-lg: 1rem; --radius-md: 0.875rem; --radius-sm: 0.75rem; --sans: "Rubik", "Segoe UI", system-ui, -apple-system, sans-serif; color-scheme: light; }
@media (prefers-color-scheme: dark) { html:root { --background: 0 0% 25%; --foreground: 0 0% 96%; --card: 0 0% 35%; --muted: 0 0% 45%; --muted-foreground: 0 0% 85%; --border: 0 0% 45%; --border-strong: 0 0% 55%; --primary-soft: 0 0% 45%; --info-soft: 0 0% 42%; --success-soft: 0 0% 42%; --danger-soft: 0 0% 42%; color-scheme: dark; } }
* { box-sizing: border-box; } body { margin: 0; font-family: var(--sans); color: hsl(var(--foreground)); background: hsl(var(--background)); line-height: 1.5; }
a { color: hsl(var(--primary)); text-decoration: none; } a:hover { color: hsl(var(--primary-dark)); text-decoration: underline; }
code { font-family: Consolas, "Liberation Mono", monospace; font-size: 0.9em; background: hsl(var(--muted)); padding: 0.1em 0.35em; border-radius: 0.35rem; word-break: break-all; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 2rem; border-bottom: 4px solid hsl(var(--primary)); background: hsl(var(--card)); }
.brand { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; font-size: 1.1rem; color: hsl(var(--foreground)); } .brand:hover { text-decoration: none; }
.brand .mark { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-weight: 800; font-size: 0.8rem; }
.brand small { display: block; font-weight: 400; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
nav.main { display: flex; gap: 0.25rem; flex-wrap: wrap; } nav.main a { padding: 0.45rem 0.9rem; border-radius: var(--radius-sm); font-weight: 500; color: hsl(var(--foreground)); } nav.main a:hover { background: hsl(var(--muted)); text-decoration: none; } nav.main a.active { background: hsl(var(--primary-soft)); color: hsl(var(--primary)); }
.user-info { font-size: 0.9rem; color: hsl(var(--muted-foreground)); } main { max-width: 1200px; margin: 0 auto; padding: 1.5rem 2rem 3rem; display: flex; flex-direction: column; gap: 1.5rem; }
footer { padding: 1rem 2rem; border-top: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); font-size: 0.85rem; display: flex; justify-content: space-between; }
.card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; } .card.narrow { max-width: 460px; margin: 2rem auto; } .card h2 { margin: 0 0 1rem; font-size: 1.1rem; font-weight: 600; }
.pagetitle { font-size: 1.4rem; font-weight: 600; margin: 0 0 1rem; } .muted { color: hsl(var(--muted-foreground)); }
button { font: inherit; font-weight: 500; border: 1px solid hsl(var(--primary)); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); padding: 0.5rem 1rem; border-radius: var(--radius-sm); cursor: pointer; } button:hover { background: hsl(var(--primary-dark)); } button.secondary { background: transparent; color: hsl(var(--primary)); } button.secondary:hover { background: hsl(var(--primary-soft)); } button.small { padding: 0.25rem 0.6rem; font-size: 0.8rem; margin: 0 0.1rem; }
form label { display: block; font-weight: 500; margin: 0.75rem 0 0.25rem; } form label.radio { font-weight: 400; display: flex; gap: 0.5rem; align-items: center; } form input[type=text], form input[type=password], form input[type=email], form input[type=url], form input[type=number] { font: inherit; width: 100%; padding: 0.55rem 0.75rem; border: 1px solid hsl(var(--border-strong)); border-radius: var(--radius-sm); background: hsl(var(--background)); color: hsl(var(--foreground)); } form input:focus { outline: 2px solid hsl(var(--primary) / 0.4); border-color: hsl(var(--primary)); } form button { margin-top: 1rem; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 1rem; }
ul.flash { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; } ul.flash li { padding: 0.6rem 0.9rem; border-radius: var(--radius-md); border: 1px solid; } ul.flash li.error { background: hsl(var(--danger-soft)); border-color: hsl(var(--danger) / 0.4); color: hsl(var(--danger)); } ul.flash li.success { background: hsl(var(--success-soft)); border-color: hsl(var(--success) / 0.4); color: hsl(var(--success)); } ul.flash li.info { background: hsl(var(--info-soft)); border-color: hsl(var(--info) / 0.4); color: hsl(var(--info)); }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } th, td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; } th { font-weight: 600; color: hsl(var(--muted-foreground)); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; } .badge.neutral { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.tile { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.25rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--card)); color: hsl(var(--foreground)); transition: transform 0.12s, border-color 0.12s; } .tile:hover { text-decoration: none; transform: translateY(-2px); border-color: hsl(var(--primary)); }
.tile-icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 0.75rem; background: hsl(var(--primary-soft)); color: hsl(var(--primary)); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .tile-name { font-weight: 600; font-size: 1.05rem; } .tile-desc { font-size: 0.9rem; color: hsl(var(--muted-foreground)); } .tile-host { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
.qr { display: flex; justify-content: center; margin: 1rem 0; } .qr svg { width: 220px; height: 220px; background: #fff; padding: 0.5rem; border-radius: var(--radius-sm); }
@media (max-width: 720px) { .topbar, main, footer { padding-left: 1rem; padding-right: 1rem; } }