.kategoro {
--ts-bg: #0a0a0a;
--ts-panel: #111114;
--ts-text: #f5f5f5;
--ts-muted: #9a9aa2;
--ts-border: #26262c;
--ts-track: #000000;
--ts-overlay: rgba(255,255,255,.08);
--ts-overlay-hover: rgba(255,255,255,.18);
--ts-tile-base: #000000;
--ts-tile-fallback: #14141b;
--ts-tile-fallback-hover: #1c1c26;
--ts-chip: rgba(0,0,0,.35);
--ts-btn-bg: #1a1a20;
--ts-btn-bg-hover: #24242c;
--ts-danger-bg: #3a1414;
--ts-danger-border: #7f1d1d;
--ts-danger-text: #fecaca;
--ts-danger-bg-hover: #4c1a1a;
--ts-ov-col-bg: #0d0d10;
--ts-ov-item-bg: #17171d;
--ts-ov-item-hover: #22222a;
--ts-radius: 14px;
box-sizing: border-box;
color: var(--ts-text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
outline: none;
max-width: 1000px;
margin: 0 auto;
}
.kategoro.ts-theme-light {
--ts-bg: #ffffff;
--ts-panel: #eef1f4;
--ts-text: #17171a;
--ts-muted: #667085;
--ts-border: #d5dae1;
--ts-track: #e3e6ea;
--ts-overlay: rgba(0,0,0,.05);
--ts-overlay-hover: rgba(0,0,0,.12);
--ts-tile-base: #ffffff;
--ts-tile-fallback: #f4f6f8;
--ts-tile-fallback-hover: #eaeef2;
--ts-chip: rgba(0,0,0,.10);
--ts-btn-bg: #ffffff;
--ts-btn-bg-hover: #eef1f4;
--ts-danger-bg: #fdecec;
--ts-danger-border: #f1c4c4;
--ts-danger-text: #b42318;
--ts-danger-bg-hover: #fbdcdc;
--ts-ov-col-bg: #f6f7f9;
--ts-ov-item-bg: #ffffff;
--ts-ov-item-hover: #eef1f4;
}
.kategoro *,
.kategoro *::before,
.kategoro *::after { box-sizing: border-box; }
.ts-panel {
background: var(--ts-panel);
border: 1px solid var(--ts-border);
border-radius: var(--ts-radius);
padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
.ts-header { display: flex; flex-direction: column; gap: 8px; }
.ts-title { font-size: 18px; font-weight: 700; letter-spacing: .2px; }
.ts-progress-text { font-size: 13px; color: var(--ts-muted); }
.ts-progress {
height: 6px; width: 100%;
background: var(--ts-track); border-radius: 999px; overflow: hidden;
}
.ts-progress-bar {
height: 100%; width: 0%;
background: linear-gradient(90deg, #3b82f6, #22c55e);
transition: width .25s ease;
}
.ts-stage {
position: relative;
background: var(--ts-bg);
border: 1px solid var(--ts-border);
border-radius: var(--ts-radius);
height: clamp(220px, 42vh, 460px);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px 72px;
overflow: hidden;
}
.ts-stage-badge {
position: absolute; top: 14px; left: 18px;
font-size: 12px; color: var(--ts-muted);
letter-spacing: 1px;
}
.ts-stage-text {
font-size: clamp(26px, 5vw, 52px);
font-weight: 800;
line-height: 1.1;
max-width: 100%;
word-break: normal;
overflow-wrap: normal;
hyphens: manual;
}
.ts-stage-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 100%;
min-width: 0;
gap: clamp(8px, 1.5vh, 20px);
}
.ts-stage-eyebrow {
font-size: clamp(13px, 1.6vw, 30px);
font-weight: 800;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--ts-topic-accent, #f59e0b);
line-height: 1;
}
.kategoro.is-topic .ts-tiles { display: none; }
.kategoro.is-topic .ts-stage {
box-shadow: inset 0 5px 0 0 var(--ts-topic-accent, #f59e0b);
}
.ts-nav {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
}
.ts-nav-btn {
position: absolute;
top: 50%;
margin-top: -22px;
pointer-events: auto;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid var(--ts-border);
background: var(--ts-overlay);
color: var(--ts-text);
cursor: pointer;
transition: background .15s;
z-index: 2;
}
.ts-nav-btn svg {
width: 22px; height: 22px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.ts-prev { left: 12px; }
.ts-next { right: 12px; }
.ts-nav-btn:hover:not(:disabled) { background: var(--ts-overlay-hover); }
.ts-nav-btn:disabled { opacity: .2; cursor: default; }
.ts-tiles {
display: grid;
grid-template-columns: repeat(var(--ts-cols, 4), minmax(0, 1fr));
gap: 12px;
}
.ts-tile {
--ts-color: #2563eb;
position: relative;
border: 2px solid var(--ts-color);
background: var(--ts-tile-fallback);
background: color-mix(in srgb, var(--ts-color) 14%, var(--ts-tile-base) 86%);
color: var(--ts-text);
border-radius: 12px;
padding: 18px 14px 16px;
min-height: 92px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
text-align: center;
font-size: 16px;
font-weight: 600;
transition: transform .1s ease, background .15s ease, box-shadow .15s ease;
}
.ts-tile:hover { background: var(--ts-tile-fallback-hover); transform: translateY(-2px); }
.ts-tile:hover { background: color-mix(in srgb, var(--ts-color) 28%, var(--ts-tile-base) 72%); transform: translateY(-2px); }
.ts-tile:active { transform: translateY(0); }
.ts-tile.is-active {
background: var(--ts-color);
color: var(--ts-on-color, #fff);
box-shadow: 0 0 0 3px rgba(255,255,255,.25);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ts-color) 45%, transparent);
}
.ts-tile-num {
position: absolute; top: 6px; left: 8px;
font-size: 11px; opacity: .6; font-weight: 700;
}
.ts-tile-label { line-height: 1.2; }
.ts-tile-count {
font-size: 12px; font-weight: 700;
background: var(--ts-chip);
border-radius: 999px;
padding: 1px 9px;
min-width: 24px;
}
.ts-tile.is-active .ts-tile-count { background: rgba(255,255,255,.25); }
.kategoro.ts-readonly .ts-tile { cursor: default; }
.kategoro.ts-readonly .ts-tile:hover { transform: none; }
.ts-ov-note-ro {
width: 100%;
font-size: 12px;
line-height: 1.4;
color: var(--ts-text);
background: var(--ts-overlay);
border: 1px solid var(--ts-border);
border-radius: 6px;
padding: 4px 8px;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.ts-toolbar {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.ts-btn {
border: 1px solid var(--ts-border);
background: var(--ts-btn-bg);
color: var(--ts-text);
border-radius: 10px;
padding: 9px 16px;
font-size: 14px; font-weight: 600;
cursor: pointer;
transition: background .15s, border-color .15s;
}
.ts-btn:hover:not(:disabled) { background: var(--ts-btn-bg-hover); }
.ts-btn:disabled { opacity: .4; cursor: default; }
.ts-btn.is-active { border-color: #3b82f6; }
.ts-btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.ts-btn-primary:hover:not(:disabled) { background: #1d4ed8; color: #fff; }
.ts-btn-off { opacity: .5; }
.ts-btn-danger { background: var(--ts-danger-bg); border-color: var(--ts-danger-border); color: var(--ts-danger-text); }
.ts-btn-danger:hover:not(:disabled) { background: var(--ts-danger-bg-hover); }
.ts-theme-toggle { margin-left: auto; }
.ts-fs { margin-left: auto; }
.ts-theme-toggle + .ts-fs,
.ts-fs + .ts-theme-toggle { margin-left: 0; }
.ts-load-select {
border: 1px solid var(--ts-border);
background: var(--ts-btn-bg);
color: var(--ts-text);
border-radius: 10px;
padding: 9px 12px;
font-size: 14px;
max-width: 240px;
}
.ts-status {
min-height: 20px;
font-size: 14px;
color: var(--ts-muted);
text-align: center;
}
.ts-status.is-done { color: #22c55e; font-weight: 700; }
.ts-status.is-error { color: #f87171; font-weight: 600; }
.ts-overview {
border-top: 1px solid var(--ts-border);
padding-top: 16px;
}
.ts-overview-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.ts-ov-col {
--ts-color: #2563eb;
background: var(--ts-ov-col-bg);
border: 1px solid var(--ts-border);
border-top: 3px solid var(--ts-color);
border-radius: 10px;
padding: 10px;
min-height: 80px;
}
.ts-ov-head {
font-weight: 700; font-size: 14px;
margin-bottom: 8px;
color: var(--ts-color);
}
.ts-ov-list { display: flex; flex-direction: column; gap: 6px; }
.ts-ov-item {
display: flex; flex-direction: column;
gap: 5px;
background: var(--ts-ov-item-bg);
border: 1px solid var(--ts-border);
border-radius: 8px;
padding: 6px 8px;
font-size: 13px;
transition: background .12s;
}
.ts-ov-item:hover { background: var(--ts-ov-item-hover); }
.ts-ov-row {
display: flex; align-items: center; justify-content: space-between;
gap: 6px;
}
.ts-ov-text { cursor: pointer; flex: 1 1 auto; }
.ts-ov-remove {
flex: 0 0 auto;
border: none; background: transparent; color: var(--ts-muted);
font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.ts-ov-remove:hover { color: #f87171; }
.ts-ov-note {
width: 100%;
resize: none;
overflow: hidden;
min-height: 26px;
font: inherit;
font-size: 12px;
line-height: 1.4;
color: var(--ts-text);
background: var(--ts-overlay);
border: 1px solid var(--ts-border);
border-radius: 6px;
padding: 4px 7px;
}
.ts-ov-note::placeholder { color: var(--ts-muted); opacity: .8; }
.ts-ov-note:focus {
outline: none;
border-color: var(--ts-color);
}
.ts-ov-item.has-note { border-left: 3px solid var(--ts-color); }
.ts-ov-empty { color: var(--ts-muted); opacity: .7; font-size: 13px; text-align: center; padding: 6px 0; }
.ts-ov-unassigned { margin-top: 12px; font-size: 13px; color: var(--ts-muted); }
.ts-error {
background: #fff3cd;
border: 1px solid #ffe69c;
color: #664d03;
padding: 12px 16px;
border-radius: 8px;
font-family: sans-serif;
}
.kategoro.is-fullscreen {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100vw; height: 100vh;
max-width: none;
margin: 0;
background: var(--ts-bg);
display: flex;
flex-direction: column;
padding: 2.6vh 3vw;
z-index: 2147483000;
overflow: hidden;
}
.kategoro.is-fullscreen .ts-mount {
flex: 1 1 auto;
min-height: 0;
width: 100%;
display: flex;
flex-direction: column;
}
.kategoro.is-fullscreen .ts-panel {
flex: 1 1 auto;
min-height: 0;
width: 100%;
max-width: 1500px;
margin: 0 auto;
padding: 0;
gap: 16px;
border: none;
background: transparent;
}
.kategoro.is-fullscreen .ts-stage {
flex: 1 1 auto;
height: auto;
min-height: 0;
width: 100%;
padding: 34px 72px;
}
.kategoro.is-fullscreen .ts-header { gap: 4px; }
.kategoro.is-fullscreen .ts-title { font-size: 15px; opacity: .7; }
.kategoro.is-fullscreen .ts-tile { min-height: 92px; padding: 18px 16px; font-size: 19px; }
.kategoro.is-fullscreen .ts-tile-count { font-size: 14px; }
.kategoro.is-fullscreen .ts-status { min-height: 0; }
@media (max-width: 640px) {
.ts-tiles { grid-template-columns: repeat(2, 1fr); }
.ts-overview-grid { grid-template-columns: repeat(2, 1fr); }
.ts-stage { padding: 40px 24px; }
.ts-fs, .ts-theme-toggle { margin-left: 0; }
.ts-load-select { max-width: 100%; flex: 1; }
}.wpcf7-form.cf7skins a {
background: transparent;
} .wpcf7-form.cf7skins a:active,
.wpcf7-form.cf7skins a:hover {
outline: 0;
}  .wpcf7-form.cf7skins b,
.wpcf7-form.cf7skins strong {
font-weight: bold;
} .wpcf7-form.cf7skins dfn {
font-style: italic;
} .wpcf7-form.cf7skins h1 {
font-size: 2em;
margin: 0.67em 0;
} .wpcf7-form.cf7skins mark {
background: #ff0;
color: #000;
} .wpcf7-form.cf7skins small {
font-size: 80%;
} .wpcf7-form.cf7skins sub,
.wpcf7-form.cf7skins sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
.wpcf7-form.cf7skins sup {
top: -0.5em;
}
.wpcf7-form.cf7skins sub {
bottom: -0.25em;
}  .wpcf7-form.cf7skins img {
border: 0;
} .wpcf7-form.cf7skins svg:not(:root) {
overflow: hidden;
}  .wpcf7-form.cf7skins figure {
margin: 1em 40px;
} .wpcf7-form.cf7skins hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
} .wpcf7-form.cf7skins pre {
overflow: auto;
} .wpcf7-form.cf7skins code,
.wpcf7-form.cf7skins kbd,
.wpcf7-form.cf7skins pre,
.wpcf7-form.cf7skins samp {
font-family: monospace, monospace;
font-size: 1em;
}   .wpcf7-form.cf7skins button,
.wpcf7-form.cf7skins input,
.wpcf7-form.cf7skins optgroup,
.wpcf7-form.cf7skins select,
.wpcf7-form.cf7skins textarea {
color: inherit; font: inherit; margin: 0; } .wpcf7-form.cf7skins button {
overflow: visible;
} .wpcf7-form.cf7skins button,
.wpcf7-form.cf7skins select {
text-transform: none;
} .wpcf7-form.cf7skins button,
.wpcf7-form.cf7skins html input[type="button"], .wpcf7-form.cf7skins input[type="reset"],
.wpcf7-form.cf7skins input[type="submit"] {
-webkit-appearance: button; cursor: pointer; } .wpcf7-form.cf7skins button[disabled],
.wpcf7-form.cf7skins html input[disabled] {
cursor: default;
} .wpcf7-form.cf7skins button::-moz-focus-inner,
.wpcf7-form.cf7skins input::-moz-focus-inner {
border: 0;
padding: 0;
} .wpcf7-form.cf7skins input {
line-height: normal;
} .wpcf7-form.cf7skins input[type="checkbox"],
.wpcf7-form.cf7skins input[type="radio"] {
box-sizing: border-box; padding: 0; } .wpcf7-form.cf7skins input[type="number"]::-webkit-inner-spin-button,
.wpcf7-form.cf7skins input[type="number"]::-webkit-outer-spin-button {
height: auto;
} .wpcf7-form.cf7skins input[type="search"] {
-webkit-appearance: textfield; -moz-box-sizing: content-box;
-webkit-box-sizing: content-box; box-sizing: content-box;
} .wpcf7-form.cf7skins input[type="search"]::-webkit-search-cancel-button,
.wpcf7-form.cf7skins input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
} .wpcf7-form.cf7skins fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
} .wpcf7-form.cf7skins legend {
border: 0; padding: 0; } .wpcf7-form.cf7skins textarea {
overflow: auto;
} .wpcf7-form.cf7skins optgroup {
font-weight: bold;
}  .wpcf7-form.cf7skins table {
border-collapse: collapse;
border-spacing: 0;
}
.wpcf7-form.cf7skins td,
.wpcf7-form.cf7skins th {
padding: 0;
}.wpcf7-form.cf7skins *,
.wpcf7-form.cf7skins *:before,
.wpcf7-form.cf7skins *:after {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.wpcf7-form.cf7skins p {
margin: 0; padding: 0; }
.wpcf7-form.cf7skins em {
}
.wpcf7-form.cf7skins a {
}
.wpcf7-form.cf7skins span {
} .wpcf7-form.cf7skins {
color: #000; }
.wpcf7-form.cf7skins .wpcf7-form-control {
}
.wpcf7-form.cf7skins .wpcf7-form-control-wrap {
} .wpcf7-form.cf7skins fieldset {
margin: 0; }
.wpcf7-form.cf7skins legend {
}
.wpcf7-form.cf7skins fieldset p {
}
.wpcf7-form.cf7skins fieldset fieldset {
margin: 0; 
}
.wpcf7-form.cf7skins fieldset fieldset legend {
}
.wpcf7-form.cf7skins fieldset fieldset input,
.wpcf7-form.cf7skins fieldset fieldset textarea {
} .wpcf7-form.cf7skins input {
width: auto; padding: 5px;
box-shadow: none;
}
.wpcf7-form.cf7skins input[type="text"],
.wpcf7-form.cf7skins input[type="email"],
.wpcf7-form.cf7skins input[type="tel"],
.wpcf7-form.cf7skins input[type="url"],
.wpcf7-form.cf7skins input[type="number"],
.wpcf7-form.cf7skins input[type="range"],
.wpcf7-form.cf7skins input[type=date],
.wpcf7-form.cf7skins input[type=file] {
width: 100%; border: 1px solid #c0c0c0; background: #fafafa; } .wpcf7-form.cf7skins textarea {
width: 100%;
padding: 5px;
border: 1px solid #c0c0c0;
background: #fafafa;
box-shadow: none;
}
.wpcf7-form.cf7skins .wpcf7-text {
}
.wpcf7-form.cf7skins .wpcf7-email {
}
.wpcf7-form.cf7skins .wpcf7-tel {
}
.wpcf7-form.cf7skins .wpcf7-textarea {
}  .wpcf7-form.cf7skins ol,
.wpcf7-form.cf7skins ul,
.wpcf7-form.cf7skins li {
margin: 0;
padding: 0;
list-style: none;
}
.wpcf7-form.cf7skins ol {
}
.wpcf7-form.cf7skins li {
}
.wpcf7-form.cf7skins .wpcf7-list-item {
}
.wpcf7-form.cf7skins .wpcf7-list-item-label {
}
.wpcf7-form.cf7skins span.wpcf7-list-item {
margin-left: 0; } .wpcf7-form.cf7skins label {
}
.wpcf7-form.cf7skins li label {
}
.wpcf7-form.cf7skins li label .cf7s-reqd {
}  .wpcf7-form.cf7skins input[type="checkbox"],
.wpcf7-form.cf7skins input[type="radio"] { 
border: none;
background: none; } .wpcf7-form.cf7skins select {
display: block; margin-left: 3px; 
padding: 3px;
}
.wpcf7-form.cf7skins select option {
}
.wpcf7-form.cf7skins select option:hover {
background: #dfdfdf; }
.wpcf7-form.cf7skins .wpcf7-checkbox .wpcf7-list-item,
.wpcf7-form.cf7skins .wpcf7-radio .wpcf7-list-item {
display: block; margin-left: 3px; }
.wpcf7-form.cf7skins .wpcf7-checkbox {
}
.wpcf7-form.cf7skins .wpcf7-radio {
}
.wpcf7-form.cf7skins .wpcf7-select {
} .wpcf7-form.cf7skins .wpcf7-url {
}
.wpcf7-form.cf7skins .wpcf7-number {
}
.wpcf7-form.cf7skins .wpcf7-range {
}
.wpcf7-form.cf7skins .wpcf7-date {
}
.wpcf7-form.cf7skins .wpcf7-file {
}
.wpcf7-form.cf7skins .wpcf7-quiz {
}
.wpcf7-form.cf7skins .wpcf7-quiz-label {
}
.wpcf7-form.cf7skins .wpcf7-acceptance {
}
.wpcf7-form.cf7skins .wpcf7-captchac {
}
.wpcf7-form.cf7skins .wpcf7-captchar {
} .wpcf7-form.cf7skins input[type="submit"] {
margin: 4px 0 0; }
.wpcf7-form.cf7skins input[type="submit"]:hover { 
} .cf7skins .wpcf7-submit {
}