:root {
      --bg: #0f1220;
      --bg-2: #0a0c16;
      --card: rgba(255,255,255,.08);
      --card-border: rgba(255,255,255,.15);
      --txt: #e7e9ef;
      --muted: #a5acc4;
      --accent: #7aa2ff;
      --accent-2: #a87bff;
      --success: #36d399;
      --danger: #ff6b6b;
      --shadow: 0 10px 30px rgba(0,0,0,.45);
      --radius: 22px;
    }

    @media (prefers-color-scheme: light) {
      :root {
        --bg: #f6f7fb;
        --bg-2: #edf0f7;
        --card: rgba(255,255,255,.85);
        --card-border: rgba(16,24,40,.08);
        --txt: #0d1428;
        --muted: #495267;
        --accent: #3b82f6;
        --accent-2: #8b5cf6;
        --shadow: 0 10px 25px rgba(16,24,40,.12);
      }
    }

    *{ box-sizing: border-box }
    #layout { width: initial; background-color: transparent; }
    html, body { height: 100% }
    body {
      margin: 0;
      font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", "Noto Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--txt);
      background: radial-gradient(1200px 800px at 80% 10%, rgba(122,162,255,.25), transparent 60%),
                  radial-gradient(900px 700px at 10% 90%, rgba(168,123,255,.22), transparent 60%),
                  linear-gradient(180deg, var(--bg), var(--bg-2));
      display: grid;
      place-items: center;
      overflow: hidden;
    }

    .grid {
      position: fixed;
      inset: -200% -200% -200% -200%;
      background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size: 40px 40px, 40px 40px;
      mask-image: radial-gradient(60% 60% at 50% 50%, black, transparent);
      pointer-events: none;
    }

    .scene {
      position: absolute; inset: 0; overflow: hidden; pointer-events: none;
    }
    .cube {
      position: absolute; width: 22px; height: 22px; opacity: .28; border-radius: 6px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      filter: blur(.2px);
      animation: float var(--d, 14s) linear infinite;
      box-shadow: 0 5px 15px rgba(0,0,0,.25);
    }
    .cube:nth-child(2){ --d: 18s }
    .cube:nth-child(3){ --d: 16s }
    .cube:nth-child(4){ --d: 20s }
    .cube:nth-child(5){ --d: 22s }
    @keyframes float {
      0%   { transform: translate3d(var(--x,10vw), 110vh, 0) rotate(0turn) }
      100% { transform: translate3d(calc(var(--x,10vw) + 10vw), -15vh, 0) rotate(1turn) }
    }

    .wrap { width: 100%; max-width: 760px; padding: 24px; align-content: center; }

    .panel {
      display: grid; grid-template-columns: 1fr; gap: 28px;
      align-items: stretch;
    }
    @media (max-width: 900px) {
      .panel { grid-template-columns: 1fr }
    }

    .card {
      backdrop-filter: saturate(140%) blur(14px);
      background: var(--card);
      border: 1px solid var(--card-border);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
    }
    .task-login .dark-mode.card {
      background: transparent !important;
    }
    .login img {
      width: 85px;
      margin: auto;
    }
    .task-login #logo {
      top: initial;
    }
    #login-form {
      top: initial;
    }
    html.dark-mode .form-control {
      background-color: transparent;
      color: #fff !important;
    }

    .brand {
      padding: 28px; display: flex; flex-direction: column; justify-content: center;
      position: relative; overflow: hidden;
    }

    .logo {
      display: inline-flex; align-items: center; gap: 12px; margin-bottom: 10px;
      font-weight: 700; letter-spacing: .4px; font-size: 22px;
    }
    .logo-badge {
      width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: white;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow: 0 8px 20px rgba(0,0,0,.2), inset 0 0 20px rgba(255,255,255,.15);
    }
    html.dark-mode #logo {
      opacity: .5;
    }

    .tag { color: var(--muted); margin-top: 4px; }

    .features { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 24px; }
    .feature {
      padding: 14px; border-radius: 16px; border: 1px dashed var(--card-border); opacity: .9;
    }

    .login {
      padding: 28px; display: grid; gap: 18px; align-content: start;
    }

    .title { font-size: 20px; font-weight: 700; }

    .field { display: grid; gap: 8px; }
    .field label { font-size: 13px; color: var(--muted) }
    input, select, .form-control {
      border: 1px solid var(--card-border); border-radius: 14px !important; padding: 14px 14px; background: rgba(255,255,255,.06);
      color: var(--txt); outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
    }
    .input::placeholder { color: color-mix(in oklab, var(--muted) 70%, transparent) }
    .input:focus { border-color: color-mix(in oklab, var(--accent) 60%, white 20%); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 25%, transparent) }
    .input-group-prepend {
      display: none;
    }

    .row { display: flex; gap: 12px; align-items: center; justify-content: space-between }
    .checkbox { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted) }

    .button {
      border: 0; border-radius: 14px; padding: 14px 16px; font-weight: 600; cursor: pointer;
      background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white;
      box-shadow: 0 10px 20px rgba(0,0,0,.25), inset 0 -6px 20px rgba(0,0,0,.15);
      transition: transform .04s ease, filter .2s ease;
      margin-top: 10px;
    }
    .button:hover { filter: brightness(1.05) }
    .button:active { transform: translateY(1px) }
    .button.submit {
      margin: auto;
    }
    .formbuttons {
      text-align: center;
    }

    .meta { font-size: 12px; color: var(--muted) }

    .footer { text-align: center; margin-top: 18px; color: var(--muted); font-size: 12px }

    /* Subtilní outline pro přístupnost na klávesnici */
    :focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 40%, transparent); outline-offset: 2px; border-radius: 12px }

    td {
      display: block;
    }
    table, input, select {
      width: 100%;
    }
    label {
      font-size: 13px;
      color: var(--muted);
    }
    @media (max-width: 600px) {
      * {
        font-size: 1em !important;
      }
    }