/* 1 */

:root{
  --cc-bg:#ffffff;
  --cc-surface:#ffffff;
  --cc-border:#e5e7eb;
  --cc-text:#0f172a;
  --cc-muted:#6b7280;

  --cc-primary:#111827;
  --cc-primary-600:#0b1220;
  --cc-success:#16a34a;
  --cc-danger:#ef4444;

  --cc-ring:rgba(17,24,39,.18);
  --cc-radius:16px;
  --cc-shadow:0 10px 28px rgba(2,6,23,.08);
  --cc-shadow-sm:0 2px 10px rgba(2,6,23,.06);
}

/*2 */

.cc-field{
  display:grid;
  gap:6px;
}

.cc-field > span{
  font-size:12px;
  color:var(--cc-muted);
}

.cc-field input[type="number"],
.cc-field input[type="text"],
.cc-field select{
  height:42px;
  border:1px solid var(--cc-border);
  border-radius:12px;
  padding:0 12px;
  font-size:15px;
  background:#fff;
  color:var(--cc-text);
  outline:none;
  box-sizing:border-box;
}

.cc-field input[type="number"]:focus,
.cc-field input[type="text"]:focus,
.cc-field select:focus,
.cc-field select:focus-visible{
  border-color:var(--cc-primary-600);
  box-shadow:0 0 0 6px var(--cc-ring);
}

/* 3*/
.cc-field--compact > span{
  font-size:12px;
  color:var(--cc-muted);
}

.cc-field--compact input[type="number"]{
  width:100px;
  height:42px;
  text-align:center;
  font-weight:700;
}

/* 4 */
.cc-grid-3 > *{
  min-width:0;
}

/* 5 */

.cc-field select,
#cc-grad,
#cc-opstina,
#cc-skola{
  appearance:none;
  -webkit-appearance:none;
  outline:none !important;
  box-shadow:none !important;
  padding:0 40px 0 12px;
  background-color:#fff;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px;
}

#cc-skola{
  width:100%;
  max-width:100%;
}

#cc-skola option{
  text-overflow:ellipsis;
}

/* 6 */

.cc-btn,
.cc-btn-ghost,
.cc-btn-primary,
.cc-btn-accent,
#cc-improve-button,
#cc-toggle-mode,
#cc-add-wishlist-row,
#cc-improvement-toggle,
#cc-lock-averages-button,
#cc-pdf-report-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:42px;
  padding:0 16px;
  font-weight:700;
  border-radius:12px;
  border:1px solid #111827;
  cursor:pointer;
  text-decoration:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease, box-shadow .15s ease;
  box-sizing:border-box;
}

.cc-btn,
.cc-btn-primary,
.cc-btn-accent,
#cc-improve-button,
#cc-toggle-mode,
#cc-add-wishlist-row,
#cc-improvement-toggle,
#cc-lock-averages-button,
#cc-pdf-report-button{
  background:#111827;
  color:#fff;
  border-color:#111827;
  box-shadow:0 6px 16px rgba(0,0,0,.16);
}

.cc-btn:hover,
.cc-btn-primary:hover,
.cc-btn-accent:hover,
#cc-improve-button:hover,
#cc-toggle-mode:hover,
#cc-add-wishlist-row:hover,
#cc-improvement-toggle:hover,
#cc-lock-averages-button:hover,
#cc-pdf-report-button:hover{
  background:#fff !important;
  color:#111827 !important;
  border-color:#111827 !important;
}

.cc-btn:active,
.cc-btn-primary:active,
.cc-btn-accent:active,
#cc-improve-button:active,
#cc-toggle-mode:active,
#cc-add-wishlist-row:active,
#cc-improvement-toggle:active,
#cc-lock-averages-button:active,
#cc-pdf-report-button:active{
  transform:translateY(1px);
}

.cc-btn-ghost{
  background:#fff;
  color:#111827;
  border-color:#111827;
  box-shadow:none;
}

.cc-btn-ghost:hover{
  background:#111827;
  color:#fff;
  border-color:#111827;
}

/* 7 */

.cc-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid var(--cc-border);
  font-weight:700;
  font-size:14px;
}

.cc-badge-primary{
  background:#f3f4f6;
  border-color:#e5e7eb;
  color:#111827;
}

.cc-error{
  color:var(--cc-danger);
  font-size:14px;
}

.cc-pass{
  color:var(--cc-success);
  font-weight:700;
}

.cc-miss{
  color:var(--cc-danger);
  font-weight:700;
}

.cc-input-error{
  border-color:#fca5a5 !important;
  box-shadow:0 0 0 6px rgba(239,68,68,.12) !important;
}

.cc-suggested-grade{
  background:#d1fae5 !important;
  color:#065f46;
  font-weight:800;
}

.cc-metrics{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:10px 0 0;
}

.cc-spacer{
  flex:1 1 auto;
}

#cc-skola.cc-select-empty{
  background-color:#f3f4f6 !important;
  border-color:#d1d5db !important;
  color:#6b7280 !important;
  box-shadow:none !important;
}

#cc-skola.cc-select-empty:focus,
#cc-skola.cc-select-empty:focus-visible{
  box-shadow:none !important;
  border-color:#d1d5db !important;
}

#cc-skola.cc-select-empty option{
  color:#6b7280;
}

/* 8 */

.cc-app button,
.cc-app .cc-btn,
.cc-app .cc-btn-primary,
.cc-app .cc-btn-accent,
.cc-app .cc-btn-ghost,
.cc-app .cc-improve-row-btn,
.cc-app .cc-refresh-btn,
.cc-app .cc-favorite-btn,
.cc-app .cc-favorite-preview-btn,
.cc-app .wishlist-preview-btn,
.cc-app .cc-curriculum-mode-toggle,
.cc-app .cc-help__btn{
  -webkit-tap-highlight-color: transparent;
}

.cc-app button:focus,
.cc-app button:focus-visible,
.cc-app button:active,
.cc-app .cc-btn:focus,
.cc-app .cc-btn:focus-visible,
.cc-app .cc-btn:active,
.cc-app .cc-btn-primary:focus,
.cc-app .cc-btn-primary:focus-visible,
.cc-app .cc-btn-primary:active,
.cc-app .cc-btn-accent:focus,
.cc-app .cc-btn-accent:focus-visible,
.cc-app .cc-btn-accent:active,
.cc-app .cc-btn-ghost:focus,
.cc-app .cc-btn-ghost:focus-visible,
.cc-app .cc-btn-ghost:active,
.cc-app .cc-improve-row-btn:focus,
.cc-app .cc-improve-row-btn:focus-visible,
.cc-app .cc-improve-row-btn:active,
.cc-app .cc-refresh-btn:focus,
.cc-app .cc-refresh-btn:focus-visible,
.cc-app .cc-refresh-btn:active,
.cc-app .cc-favorite-btn:focus,
.cc-app .cc-favorite-btn:focus-visible,
.cc-app .cc-favorite-btn:active,
.cc-app .cc-favorite-preview-btn:focus,
.cc-app .cc-favorite-preview-btn:focus-visible,
.cc-app .cc-favorite-preview-btn:active,
.cc-app .wishlist-preview-btn:focus,
.cc-app .wishlist-preview-btn:focus-visible,
.cc-app .wishlist-preview-btn:active,
.cc-app .cc-curriculum-mode-toggle:focus,
.cc-app .cc-curriculum-mode-toggle:focus-visible,
.cc-app .cc-curriculum-mode-toggle:active,
.cc-app .cc-help__btn:focus,
.cc-app .cc-help__btn:focus-visible,
.cc-app .cc-help__btn:active{
  outline:none !important;
  box-shadow:none !important;
}

/* 9 */



.cc-app button,
.cc-app button:focus,
.cc-app button:focus-visible,
.cc-app button:active{
  outline:none !important;
  box-shadow:none !important;
}

/* 10 */
.cc-app .cc-btn:not(.cc-btn-ghost):not(.cc-favorite-btn):not(.cc-favorite-preview-btn):not(.wishlist-preview-btn),
.cc-app .cc-btn-primary,
.cc-app .cc-btn-accent,
.cc-app #cc-improve-button,
.cc-app #cc-toggle-mode,
.cc-app #cc-add-wishlist-row,
.cc-app #cc-improvement-toggle,
.cc-app #cc-lock-averages-button,
.cc-app #cc-pdf-report-button,
.cc-app .cc-improve-row-btn,
.cc-app .cc-refresh-btn{
  background:#111827;
  color:#fff;
  border-color:#111827;
}

.cc-app .cc-btn:not(.cc-btn-ghost):not(.cc-favorite-btn):not(.cc-favorite-preview-btn):not(.wishlist-preview-btn):focus,
.cc-app .cc-btn:not(.cc-btn-ghost):not(.cc-favorite-btn):not(.cc-favorite-preview-btn):not(.wishlist-preview-btn):focus-visible,
.cc-app .cc-btn:not(.cc-btn-ghost):not(.cc-favorite-btn):not(.cc-favorite-preview-btn):not(.wishlist-preview-btn):active,
.cc-app .cc-btn-primary:focus,
.cc-app .cc-btn-primary:focus-visible,
.cc-app .cc-btn-primary:active,
.cc-app .cc-btn-accent:focus,
.cc-app .cc-btn-accent:focus-visible,
.cc-app .cc-btn-accent:active,
.cc-app #cc-improve-button:focus,
.cc-app #cc-improve-button:focus-visible,
.cc-app #cc-improve-button:active,
.cc-app #cc-toggle-mode:focus,
.cc-app #cc-toggle-mode:focus-visible,
.cc-app #cc-toggle-mode:active,
.cc-app #cc-add-wishlist-row:focus,
.cc-app #cc-add-wishlist-row:focus-visible,
.cc-app #cc-add-wishlist-row:active,
.cc-app #cc-improvement-toggle:focus,
.cc-app #cc-improvement-toggle:focus-visible,
.cc-app #cc-improvement-toggle:active,
.cc-app #cc-lock-averages-button:focus,
.cc-app #cc-lock-averages-button:focus-visible,
.cc-app #cc-lock-averages-button:active,
.cc-app #cc-pdf-report-button:focus,
.cc-app #cc-pdf-report-button:focus-visible,
.cc-app #cc-pdf-report-button:active,
.cc-app .cc-improve-row-btn:focus,
.cc-app .cc-improve-row-btn:focus-visible,
.cc-app .cc-improve-row-btn:active,
.cc-app .cc-refresh-btn:focus,
.cc-app .cc-refresh-btn:focus-visible,
.cc-app .cc-refresh-btn:active{
  background:#111827 !important;
  color:#fff !important;
  border-color:#111827 !important;
}

/* 11 */
.cc-app .cc-btn-ghost,
.cc-app .cc-favorite-btn:not(.is-active){
  background:#fff;
  color:#111827;
  border-color:#111827;
}

.cc-app .cc-btn-ghost:focus,
.cc-app .cc-btn-ghost:focus-visible,
.cc-app .cc-btn-ghost:active,
.cc-app .cc-favorite-btn:not(.is-active):focus,
.cc-app .cc-favorite-btn:not(.is-active):focus-visible,
.cc-app .cc-favorite-btn:not(.is-active):active{
  background:#fff !important;
  color:#111827 !important;
  border-color:#111827 !important;
}

/* 12 */
.cc-app .cc-favorite-btn:not(.is-active):hover{
  background:#111827 !important;
  color:#fff !important;
  border-color:#111827 !important;
}

/* 13 */
.cc-app .cc-favorite-preview-btn,
.cc-app .wishlist-preview-btn{
  background:#111827;
  color:#fff;
  border-color:#111827;
}

.cc-app .cc-favorite-preview-btn:hover,
.cc-app .wishlist-preview-btn:hover{
  background:#fff !important;
  color:#111827 !important;
  border-color:#111827 !important;
}

.cc-app .cc-favorite-preview-btn:focus,
.cc-app .cc-favorite-preview-btn:focus-visible,
.cc-app .cc-favorite-preview-btn:active,
.cc-app .wishlist-preview-btn:focus,
.cc-app .wishlist-preview-btn:focus-visible,
.cc-app .wishlist-preview-btn:active{
  background:#111827 !important;
  color:#fff !important;
  border-color:#111827 !important;
}

/* 14 */
.cc-app .cc-favorite-btn.is-active:focus,
.cc-app .cc-favorite-btn.is-active:focus-visible,
.cc-app .cc-favorite-btn.is-active:active{
  background:#111827 !important;
  color:#fff !important;
  border-color:#111827 !important;
}

/* 15 */
#cc-skola.cc-select-hit{
  background-color:#e0f2fe !important; /* 16 */
  border-color:#38bdf8 !important;
  color:#075985 !important;
}

/* 17 */
#cc-skola.cc-select-hit:focus,
#cc-skola.cc-select-hit:focus-visible{
  box-shadow:0 0 0 6px rgba(56,189,248,.25) !important;
}

.cc-about-card{
  text-align:left;           /* 18*/
  padding:50px 40px;
}

.cc-about-card .cc-about-content{
  width:100%;
  max-width:none;

  display:flex;
  flex-direction:column;
  gap:28px;

  font-size:26px;            /* 19 */
  line-height:1.9;           /* 20 */
  font-weight:400;
  color:#1f2937;             /* 21 */
}

.cc-about-card p{
  margin:0;
}

.cc-about-card a{
  color:#2563eb;             /* 22*/
  font-weight:500;
  text-decoration:none;
}

.cc-about-card a:hover{
  text-decoration:underline;
}