/* ============================================================
   ONLINESTUDIO.CZ
   R60_8_1_GLOBAL_ORANGE_REGGAE_BACKGROUND
   2026-09-04
   ============================================================ */

:root{
    --r608-orange:#f28c28;
    --r608-orange-mid:#d86f13;
    --r608-orange-dark:#b9570b;
    --r608-orange-deep:#8d3e08;
    --r608-green:#4caf50;
    --r608-red:#d94a4a;
}

html{
    min-height:100%;
    background:#b9570b !important;
}

body{
    min-height:100vh;
    background:
        radial-gradient(
            circle at 8% 4%,
            rgba(255,196,94,.42),
            transparent 31rem
        ),
        radial-gradient(
            circle at 93% 10%,
            rgba(76,175,80,.22),
            transparent 28rem
        ),
        radial-gradient(
            circle at 78% 94%,
            rgba(217,74,74,.20),
            transparent 31rem
        ),
        linear-gradient(
            145deg,
            #f28c28 0%,
            #d86f13 38%,
            #b9570b 72%,
            #8d3e08 100%
        ) !important;
    background-attachment:fixed !important;
}

/*
 * Pouze pozadí stránky.
 * Panely, karty, formuláře, tabulky a vlastní motivy jednotlivých
 * aplikací R60.x zůstávají nedotčené.
 */

@media(max-width:760px){
    body{
        background:
            radial-gradient(
                circle at 10% 3%,
                rgba(255,200,105,.34),
                transparent 21rem
            ),
            radial-gradient(
                circle at 96% 10%,
                rgba(76,175,80,.17),
                transparent 19rem
            ),
            radial-gradient(
                circle at 82% 95%,
                rgba(217,74,74,.15),
                transparent 21rem
            ),
            linear-gradient(
                160deg,
                #f28c28 0%,
                #cf6811 55%,
                #984208 100%
            ) !important;
        background-attachment:scroll !important;
    }
}

/* END R60.8.1 */


/* ============================================================
   ONLINESTUDIO.CZ
   R60_9_GLOBAL_READABILITY_CARD_THEME
   2026-09-04
   ============================================================ */

:root{
    --r609-black:#0a0a0b;
    --r609-black-soft:#101011;
    --r609-gray:#19191b;
    --r609-gray-soft:#222225;
    --r609-gray-raised:#29292d;
    --r609-line:rgba(255,255,255,.11);

    --r609-text:#f7f7f2;
    --r609-text-soft:#e4e3dd;
    --r609-muted:#b8b6af;
    --r609-muted-2:#94928c;

    --r609-orange:#f28c28;
    --r609-orange-soft:#ffc06a;
    --r609-green:#4caf50;
    --r609-red:#d94a4a;
}

/* Základní textový kontrast */
body{
    color:var(--r609-text) !important;
}

main,
article{
    color:var(--r609-text) !important;
}

h1,h2,h3,h4,h5,h6{
    color:#fffdf8 !important;
    text-shadow:0 1px 1px rgba(0,0,0,.20);
}

p,
li,
dd,
dt{
    color:var(--r609-text-soft);
}

small,
.muted,
.meta,
.help,
.hint,
.note,
.description,
.subtitle,
[class$="-meta"],
[class$="-muted"],
[class$="-help"],
[class$="-hint"],
[class$="-note"],
[class$="-description"]{
    color:var(--r609-muted) !important;
}

a{
    color:var(--r609-orange-soft);
    text-decoration-color:rgba(242,140,40,.55);
}

a:hover,
a:focus-visible{
    color:#ffd39b;
}

/* Karty a panely: černá + šedá */
:where(
    .card,
    .panel,
    .tile,
    .widget,
    .box,
    [class$="-card"],
    [class$="-panel"],
    [class$="-tile"],
    [class$="-widget"],
    [class$="-box"]
){
    --r609-card-accent:var(--r609-orange);
    color:var(--r609-text) !important;
    border-color:var(--r609-line) !important;
    background:
        linear-gradient(
            180deg,
            #202023 0%,
            #171719 100%
        ) !important;
    box-shadow:
        0 12px 28px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}

/* Střídání černé a šedé */
:where(
    .card,
    .tile,
    .widget,
    [class$="-card"],
    [class$="-tile"],
    [class$="-widget"]
):nth-child(even){
    background:
        linear-gradient(
            180deg,
            #151517 0%,
            #0f0f10 100%
        ) !important;
}

:where(
    .card,
    .tile,
    .widget,
    [class$="-card"],
    [class$="-tile"],
    [class$="-widget"]
):nth-child(3n+1){
    --r609-card-accent:var(--r609-orange);
}

:where(
    .card,
    .tile,
    .widget,
    [class$="-card"],
    [class$="-tile"],
    [class$="-widget"]
):nth-child(3n+2){
    --r609-card-accent:var(--r609-green);
}

:where(
    .card,
    .tile,
    .widget,
    [class$="-card"],
    [class$="-tile"],
    [class$="-widget"]
):nth-child(3n){
    --r609-card-accent:var(--r609-red);
}

:where(
    .card,
    .tile,
    .widget,
    [class$="-card"],
    [class$="-tile"],
    [class$="-widget"]
){
    box-shadow:
        inset 0 4px 0 var(--r609-card-accent),
        0 12px 28px rgba(0,0,0,.22) !important;
}

/* Panely bez barevného proužku */
:where(
    .panel,
    [class$="-panel"]
){
    background:
        linear-gradient(
            180deg,
            #1c1c1f 0%,
            #121214 100%
        ) !important;
}

/* Přímé obsahové sekce */
main > section:not(.hero):not([class*="header"]),
article > section:not(.hero):not([class*="header"]){
    color:var(--r609-text) !important;
    border-color:var(--r609-line) !important;
    background:
        linear-gradient(
            180deg,
            rgba(31,31,34,.98),
            rgba(17,17,19,.98)
        ) !important;
    box-shadow:0 12px 30px rgba(0,0,0,.20);
}

/* Vnitřní text karet */
:where(
    .card,
    .panel,
    .tile,
    .widget,
    .box,
    [class$="-card"],
    [class$="-panel"],
    [class$="-tile"],
    [class$="-widget"],
    [class$="-box"]
) h1,
:where(
    .card,
    .panel,
    .tile,
    .widget,
    .box,
    [class$="-card"],
    [class$="-panel"],
    [class$="-tile"],
    [class$="-widget"],
    [class$="-box"]
) h2,
:where(
    .card,
    .panel,
    .tile,
    .widget,
    .box,
    [class$="-card"],
    [class$="-panel"],
    [class$="-tile"],
    [class$="-widget"],
    [class$="-box"]
) h3{
    color:#fff !important;
}

:where(
    .card,
    .panel,
    .tile,
    .widget,
    .box,
    [class$="-card"],
    [class$="-panel"],
    [class$="-tile"],
    [class$="-widget"],
    [class$="-box"]
) p{
    color:#dfded8 !important;
}

/* Formuláře */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select{
    color:#fafaf6 !important;
    caret-color:var(--r609-orange) !important;
    border-color:rgba(255,255,255,.14) !important;
    background:#0d0d0e !important;
}

input::placeholder,
textarea::placeholder{
    color:#8e8c86 !important;
    opacity:1;
}

input:focus,
textarea:focus,
select:focus{
    border-color:var(--r609-orange) !important;
    outline:2px solid rgba(242,140,40,.22) !important;
    outline-offset:1px;
}

/* Tlačítka */
button,
.button,
.btn,
[role="button"]{
    color:#f7f7f2 !important;
    border-color:rgba(255,255,255,.13) !important;
    background:#29292d !important;
}

button:hover,
button:focus-visible,
.button:hover,
.button:focus-visible,
.btn:hover,
.btn:focus-visible,
[role="button"]:hover,
[role="button"]:focus-visible{
    border-color:rgba(242,140,40,.65) !important;
    background:#343438 !important;
}

.primary,
.btn-primary,
.button.primary,
button.primary,
button[type="submit"]{
    color:#111 !important;
    border-color:var(--r609-orange) !important;
    background:var(--r609-orange) !important;
}

.success,
.btn-success,
.button.success{
    color:#081109 !important;
    border-color:var(--r609-green) !important;
    background:var(--r609-green) !important;
}

.danger,
.error,
.btn-danger,
.button.danger{
    color:#fff5f5 !important;
    border-color:rgba(217,74,74,.62) !important;
    background:rgba(126,33,33,.92) !important;
}

/* Stavové bloky */
.notice,
.alert,
.message,
.status,
[class*="notice"],
[class*="alert"]{
    color:var(--r609-text) !important;
    border-color:var(--r609-line) !important;
    background:#151517 !important;
}

.notice.success,
.alert.success,
.alert-success,
.message.success,
.status.success{
    color:#e7f8e9 !important;
    border-color:rgba(76,175,80,.48) !important;
    background:rgba(30,83,35,.88) !important;
}

.notice.error,
.alert.error,
.alert-danger,
.message.error,
.status.error{
    color:#ffeaea !important;
    border-color:rgba(217,74,74,.52) !important;
    background:rgba(92,28,28,.90) !important;
}

.notice.warning,
.alert.warning,
.alert-warning,
.message.warning,
.status.warning{
    color:#fff0d8 !important;
    border-color:rgba(242,140,40,.55) !important;
    background:rgba(100,57,16,.92) !important;
}

/* Tabulky */
table{
    color:var(--r609-text) !important;
    border-color:var(--r609-line) !important;
    background:#101011 !important;
}

thead,
th{
    color:#fff !important;
    background:#252528 !important;
}

td,
th{
    border-color:var(--r609-line) !important;
}

tbody tr:nth-child(odd) td{
    background:#151517 !important;
}

tbody tr:nth-child(even) td{
    background:#1d1d20 !important;
}

/* Kód */
code,
pre{
    color:#ffd09a !important;
    border-color:rgba(255,255,255,.09) !important;
    background:#0b0b0c !important;
}

hr{
    border-color:rgba(255,255,255,.12) !important;
}

::selection{
    color:#111;
    background:#ffb45a;
}

@media(max-width:760px){
    :where(
        .card,
        .panel,
        .tile,
        .widget,
        .box,
        [class$="-card"],
        [class$="-panel"],
        [class$="-tile"],
        [class$="-widget"],
        [class$="-box"]
    ){
        box-shadow:
            inset 0 3px 0 var(--r609-card-accent, var(--r609-orange)),
            0 8px 20px rgba(0,0,0,.20) !important;
    }

    main > section:not(.hero):not([class*="header"]),
    article > section:not(.hero):not([class*="header"]){
        background:
            linear-gradient(
                180deg,
                #1b1b1e,
                #111113
            ) !important;
    }
}

/* END R60.9 */


/* ============================================================
   ONLINESTUDIO.CZ
   R60_10_GLOBAL_DEPTH_RADIUS_SPACING
   2026-09-05
   ============================================================ */

:root{
    /* výrazněji oddělené neutrální úrovně */
    --r6010-black-0:#070708;
    --r6010-black-1:#0d0d0f;
    --r6010-black-2:#111114;
    --r6010-gray-1:#1c1c21;
    --r6010-gray-2:#292930;
    --r6010-gray-3:#36363e;

    --r6010-border:rgba(255,255,255,.14);
    --r6010-border-strong:rgba(255,255,255,.20);

    --r6010-text:#faf9f5;
    --r6010-text-soft:#e5e3dc;
    --r6010-muted:#bbb8af;

    --r6010-orange:#f28c28;
    --r6010-green:#4caf50;
    --r6010-red:#d94a4a;

    --r6010-radius-xs:8px;
    --r6010-radius-sm:11px;
    --r6010-radius-md:15px;
    --r6010-radius-lg:19px;
    --r6010-radius-xl:25px;

    --r6010-pad-xs:8px;
    --r6010-pad-sm:12px;
    --r6010-pad-md:16px;
    --r6010-pad-lg:22px;
    --r6010-pad-xl:28px;
}

/* ------------------------------------------------------------
   Typografie a základní rytmus
   ------------------------------------------------------------ */

body{
    color:var(--r6010-text) !important;
    line-height:1.56;
}

main,
article{
    line-height:1.56;
}

h1,h2,h3,h4,h5,h6{
    color:#fffefa !important;
    line-height:1.16 !important;
    margin-top:0;
    margin-bottom:.62em;
}

p{
    color:var(--r6010-text-soft);
    line-height:1.62;
    margin-top:.35em;
    margin-bottom:.85em;
}

p:last-child{
    margin-bottom:0;
}

ul,
ol{
    padding-inline-start:1.4em;
}

li{
    line-height:1.58;
}

li + li{
    margin-top:.28em;
}

label{
    line-height:1.4;
}

small,
.muted,
.meta,
.help,
.hint,
.note,
.description,
.subtitle{
    color:var(--r6010-muted) !important;
    line-height:1.48;
}

/* ------------------------------------------------------------
   Skutečné obsahové plochy
   ------------------------------------------------------------ */

:where(
    .card,
    .panel,
    .tile,
    .widget,
    .box,
    .modal,
    .dialog,
    .drawer,
    .sidebar,
    [class$="-card"],
    [class$="-panel"],
    [class$="-tile"],
    [class$="-widget"],
    [class$="-box"],
    [class$="-modal"],
    [class$="-dialog"],
    [class$="-drawer"],
    [class$="-sidebar"]
){
    border-radius:var(--r6010-radius-lg) !important;
    border-color:var(--r6010-border) !important;
    padding:clamp(16px,2vw,24px) !important;
    overflow-wrap:anywhere;
}

/* výraznější rozdíly povrchů */
:where(
    .card,
    .tile,
    .widget,
    [class$="-card"],
    [class$="-tile"],
    [class$="-widget"]
){
    background:
        linear-gradient(
            180deg,
            var(--r6010-gray-2) 0%,
            var(--r6010-gray-1) 100%
        ) !important;
}

:where(
    .card,
    .tile,
    .widget,
    [class$="-card"],
    [class$="-tile"],
    [class$="-widget"]
):nth-child(even){
    background:
        linear-gradient(
            180deg,
            var(--r6010-black-2) 0%,
            var(--r6010-black-0) 100%
        ) !important;
}

:where(
    .panel,
    .box,
    [class$="-panel"],
    [class$="-box"]
){
    background:
        linear-gradient(
            180deg,
            var(--r6010-gray-1) 0%,
            var(--r6010-black-2) 100%
        ) !important;
}

/*
 * Přímé hlavní sekce jsou šedější než karty,
 * aby vznikla jasná hierarchie:
 * oranžové pozadí → tmavá sekce → černá/šedá karta.
 */
main > section:not(.hero):not([class*="header"]),
article > section:not(.hero):not([class*="header"]){
    border-radius:var(--r6010-radius-xl) !important;
    border:1px solid var(--r6010-border) !important;
    padding:clamp(18px,2.4vw,30px) !important;
    background:
        linear-gradient(
            180deg,
            var(--r6010-gray-2) 0%,
            var(--r6010-gray-1) 100%
        ) !important;
    box-shadow:
        0 16px 38px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}

/* ------------------------------------------------------------
   Radius pro vizuální a interaktivní prvky
   ------------------------------------------------------------ */

button,
.button,
.btn,
[role="button"]{
    border-radius:var(--r6010-radius-sm) !important;
    padding:.72em 1.05em !important;
    min-height:42px;
    line-height:1.25 !important;
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select{
    border-radius:var(--r6010-radius-sm) !important;
    padding:.78em .92em !important;
    min-height:42px;
    line-height:1.35 !important;
}

textarea{
    min-height:96px;
}

fieldset{
    border-radius:var(--r6010-radius-md) !important;
    padding:var(--r6010-pad-lg) !important;
    border-color:var(--r6010-border) !important;
}

legend{
    padding:0 .55em;
}

details{
    border-radius:var(--r6010-radius-md) !important;
    border:1px solid var(--r6010-border);
    background:var(--r6010-black-1);
    overflow:hidden;
}

summary{
    border-radius:var(--r6010-radius-sm) !important;
    padding:var(--r6010-pad-sm) var(--r6010-pad-md) !important;
}

pre{
    border-radius:var(--r6010-radius-md) !important;
    padding:var(--r6010-pad-md) !important;
    overflow:auto;
}

code{
    border-radius:var(--r6010-radius-xs) !important;
    padding:.12em .36em;
}

pre code{
    padding:0;
    border-radius:0 !important;
}

img,
video,
iframe,
canvas{
    border-radius:var(--r6010-radius-md) !important;
}

progress,
meter{
    border-radius:999px !important;
    overflow:hidden;
}

/* badge/chip/pill/tag jako kompaktní zaoblené prvky */
:where(
    .badge,
    .chip,
    .pill,
    .tag,
    [class$="-badge"],
    [class$="-chip"],
    [class$="-pill"],
    [class$="-tag"]
){
    border-radius:999px !important;
    padding:.35em .7em !important;
    line-height:1.2 !important;
}

/* stavové bloky */
:where(
    .notice,
    .alert,
    .message,
    .status,
    [class*="notice"],
    [class*="alert"]
){
    border-radius:var(--r6010-radius-md) !important;
    padding:var(--r6010-pad-md) var(--r6010-pad-lg) !important;
}

/* ------------------------------------------------------------
   Tabulky: radius + bezpečné odsazení textu
   ------------------------------------------------------------ */

table{
    border-radius:var(--r6010-radius-md) !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
    overflow:hidden;
    border:1px solid var(--r6010-border) !important;
    background:var(--r6010-black-1) !important;
}

th,
td{
    padding:12px 14px !important;
    line-height:1.42 !important;
    vertical-align:top;
}

thead th{
    background:var(--r6010-gray-3) !important;
}

tbody tr:nth-child(odd) td{
    background:var(--r6010-black-2) !important;
}

tbody tr:nth-child(even) td{
    background:var(--r6010-gray-1) !important;
}

/* ------------------------------------------------------------
   Navigace a hlavičkové plochy
   ------------------------------------------------------------ */

:where(
    nav,
    .nav,
    .navbar,
    .toolbar,
    .topbar,
    [class$="-nav"],
    [class$="-navbar"],
    [class$="-toolbar"],
    [class$="-topbar"]
){
    border-radius:var(--r6010-radius-lg) !important;
}

:where(
    .hero,
    [class$="-hero"],
    [class*="hero-"]
){
    border-radius:var(--r6010-radius-xl) !important;
}

/* ------------------------------------------------------------
   Text uvnitř ploch: bezpečná vzdálenost od hran
   ------------------------------------------------------------ */

:where(
    .card,
    .panel,
    .tile,
    .widget,
    .box,
    [class$="-card"],
    [class$="-panel"],
    [class$="-tile"],
    [class$="-widget"],
    [class$="-box"]
) > :first-child{
    margin-top:0 !important;
}

:where(
    .card,
    .panel,
    .tile,
    .widget,
    .box,
    [class$="-card"],
    [class$="-panel"],
    [class$="-tile"],
    [class$="-widget"],
    [class$="-box"]
) > :last-child{
    margin-bottom:0 !important;
}

:where(
    .card,
    .panel,
    .tile,
    .widget,
    .box,
    [class$="-card"],
    [class$="-panel"],
    [class$="-tile"],
    [class$="-widget"],
    [class$="-box"]
) p,
:where(
    .card,
    .panel,
    .tile,
    .widget,
    .box,
    [class$="-card"],
    [class$="-panel"],
    [class$="-tile"],
    [class$="-widget"],
    [class$="-box"]
) li{
    color:var(--r6010-text-soft) !important;
}

/* ------------------------------------------------------------
   Hover/focus: optická hloubka bez zhoršení čitelnosti
   ------------------------------------------------------------ */

:where(
    .card,
    .tile,
    .widget,
    [class$="-card"],
    [class$="-tile"],
    [class$="-widget"]
):hover{
    border-color:var(--r6010-border-strong) !important;
    filter:brightness(1.06);
}

button:focus-visible,
.button:focus-visible,
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible{
    outline:3px solid rgba(242,140,40,.35) !important;
    outline-offset:2px !important;
}

/* ------------------------------------------------------------
   Mobil: menší radius a padding, ale zachovaná hierarchie
   ------------------------------------------------------------ */

@media(max-width:760px){
    :root{
        --r6010-radius-lg:16px;
        --r6010-radius-xl:20px;
    }

    :where(
        .card,
        .panel,
        .tile,
        .widget,
        .box,
        [class$="-card"],
        [class$="-panel"],
        [class$="-tile"],
        [class$="-widget"],
        [class$="-box"]
    ){
        padding:15px !important;
    }

    main > section:not(.hero):not([class*="header"]),
    article > section:not(.hero):not([class*="header"]){
        padding:17px !important;
    }

    th,
    td{
        padding:10px 11px !important;
    }
}

/* END R60.10 */