/* Shared K2 theme and component layer. */
:root {
    --color-bg: #f1f5f9;
    --color-surface: #ffffff;
    --color-text-primary: #1e293b;
    --color-text-secondary: #64748b;
    --color-text-muted: #94a3b8;
    --color-border: #e2e8f0;
    --color-border-hover: #cbd5e1;
    --color-input-bg: #ffffff;
    --color-input-border: #d1d5db;
    --color-focus: #3b82f6;
    --color-navbar-bg: #ffffff;
    --color-priority-low: #6b7280;
    --color-priority-medium: #2563eb;
    --color-priority-high: #ea580c;
    --color-priority-critical: #dc2626;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: var(--color-bg);
    min-height: 100vh;
}

.glass {
    background: var(--color-navbar-bg);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.form-input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.625rem 0.875rem;
    background-color: var(--color-input-bg);
    border: 1px solid var(--color-input-border);
    border-radius: 0.625rem;
    color: var(--color-text-primary);
    transition: all 0.2s;
    font-size: 0.9375rem;
    line-height: 1.35rem;
}

.form-input::placeholder {
    color: var(--color-text-muted);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-focus);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.25);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.625rem 1rem;
    background: linear-gradient(to right, #2563eb, #7c3aed);
    color: white;
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: 0.625rem;
    transition: all 0.2s;
    box-shadow: 0 1px 3px 0 rgb(37 99 235 / 0.3);
}

.btn-primary:hover {
    background: linear-gradient(to right, #3b82f6, #8b5cf6);
    transform: scale(1.02);
    box-shadow: 0 4px 6px -1px rgb(37 99 235 / 0.3);
}

.btn-primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.4);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.625rem 1rem;
    background-color: #e2e8f0;
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: 0.625rem;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background-color: #cbd5e1;
}

.btn-secondary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgb(100 116 139 / 0.3);
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.section-card {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}

.compact-meta {
    display: grid;
    gap: 0.625rem;
}

.compact-meta-item {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #f8fafc;
    padding: 0.75rem;
}

.compact-meta-label {
    font-size: 0.6875rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.compact-meta-value {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: #0f172a;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
}

.status-chip-gray {
    border: 1px solid #cbd5e1;
    background-color: #f8fafc;
    color: #475569;
}

.status-chip-blue {
    border: 1px solid #bfdbfe;
    background-color: #eff6ff;
    color: #1d4ed8;
}

.status-chip-amber {
    border: 1px solid #fde68a;
    background-color: #fffbeb;
    color: #b45309;
}

.status-chip-orange {
    border: 1px solid #fed7aa;
    background-color: #fff7ed;
    color: #c2410c;
}

.status-chip-emerald {
    border: 1px solid #a7f3d0;
    background-color: #ecfdf5;
    color: #047857;
}

.status-chip-red {
    border: 1px solid #fecaca;
    background-color: #fef2f2;
    color: #b91c1c;
}

.status-dot-gray {
    background-color: #6b7280;
}

.status-dot-blue {
    background-color: #3b82f6;
}

.status-dot-amber {
    background-color: #f59e0b;
}

.status-dot-orange {
    background-color: #f97316;
}

.status-dot-emerald {
    background-color: #10b981;
}

.status-dot-red {
    background-color: #ef4444;
}

.htmx-indicator {
    opacity: 0;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
    transition: opacity 200ms ease-in;
}

.section-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #334155;
}

.section-subtitle {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: #64748b;
}

.list-card {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #ffffff;
    padding: 0.875rem 1rem;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.list-card:hover {
    border-color: rgb(37 99 235 / 0.35);
    box-shadow: 0 10px 20px rgb(15 23 42 / 0.08);
    transform: translateY(-1px);
}

.control-readiness-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
    border: 1px solid #fed7aa;
    border-radius: 1rem;
    background: #fff7ed;
    padding: 1rem;
}

.control-readiness-list {
    display: grid;
    gap: 0.5rem;
}

.control-readiness-item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.375rem;
    border-radius: 0.75rem;
    background: #ffffff;
    padding: 0.75rem;
}

.control-readiness-badge {
    width: fit-content;
    border-radius: 999px;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 0.875rem;
    text-transform: uppercase;
}

.control-readiness-message {
    color: #334155;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
}

.control-readiness-action {
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.15rem;
}

.control-readiness-commands {
    display: grid;
    gap: 0.375rem;
    min-width: 0;
}

.control-readiness-command {
    display: block;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #f8fafc;
    padding: 0.5rem 0.625rem;
    color: #0f172a;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.75rem;
    line-height: 1rem;
    white-space: nowrap;
}

.control-readiness-warning .control-readiness-badge {
    background: #fef3c7;
    color: #92400e;
}

.control-readiness-critical .control-readiness-badge {
    background: #fee2e2;
    color: #991b1b;
}

.control-focus-panel {
    border: 1px solid #cbd5e1;
    border-radius: 1rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: 1rem;
    box-shadow: 0 12px 28px rgb(15 23 42 / 0.08);
}

.control-focus-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 0.875rem;
}

.control-focus-card,
.control-focus-empty {
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 0.875rem;
    background: #ffffff;
    padding: 0.875rem;
}

.control-focus-card {
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.control-focus-card:hover {
    box-shadow: 0 14px 24px rgb(15 23 42 / 0.1);
    transform: translateY(-1px);
}

.control-focus-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1rem;
    text-transform: uppercase;
}

.control-focus-title {
    display: block;
    margin-top: 0.5rem;
    overflow: hidden;
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.control-focus-title:hover {
    color: #1d4ed8;
}

.control-focus-meta {
    margin-top: 0.25rem;
    overflow: hidden;
    color: #64748b;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.control-focus-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.control-focus-button,
.control-focus-link {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1rem;
}

.control-focus-button {
    border: 1px solid rgb(37 99 235 / 0.2);
    background: #ffffff;
    color: #1d4ed8;
}

.control-focus-button:hover {
    border-color: rgb(37 99 235 / 0.45);
    background: #eff6ff;
}

.control-focus-link {
    color: #334155;
}

.control-focus-link:hover {
    color: #1d4ed8;
}

.control-focus-blue {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.control-focus-blue .control-focus-card-header {
    color: #1d4ed8;
}

.control-focus-red {
    border-color: #fecaca;
    background: #fef2f2;
}

.control-focus-red .control-focus-card-header {
    color: #b91c1c;
}

.control-focus-orange {
    border-color: #fed7aa;
    background: #fff7ed;
}

.control-focus-orange .control-focus-card-header {
    color: #c2410c;
}

.control-focus-amber {
    border-color: #fde68a;
    background: #fffbeb;
}

.control-focus-amber .control-focus-card-header {
    color: #b45309;
}

.control-focus-slate .control-focus-card-header {
    color: #334155;
}

.control-starter-panel {
    border: 1px solid #d1d5db;
    border-radius: 1rem;
    background: #ffffff;
    padding: 1rem;
    box-shadow: 0 10px 24px rgb(15 23 42 / 0.06);
}

.control-starter-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.control-starter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 0.75rem;
    margin-top: 0.875rem;
}

.control-starter-card {
    min-width: 0;
}

.control-starter-button {
    display: flex;
    min-height: 9.25rem;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    border: 1px solid #e2e8f0;
    border-radius: 0.875rem;
    background: #f8fafc;
    padding: 0.875rem;
    text-align: left;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.control-starter-button:hover {
    box-shadow: 0 14px 24px rgb(15 23 42 / 0.1);
    transform: translateY(-1px);
}

.control-starter-title {
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.25rem;
}

.control-starter-description {
    margin-top: 0.5rem;
    color: #475569;
    font-size: 0.8125rem;
    line-height: 1.2rem;
}

.control-starter-action {
    margin-top: 0.75rem;
    border-radius: 999px;
    background: #ffffff;
    padding: 0.375rem 0.625rem;
    color: #1e293b;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1rem;
}

.control-starter-blue .control-starter-button {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.control-starter-green .control-starter-button {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.control-starter-amber .control-starter-button {
    border-color: #fde68a;
    background: #fffbeb;
}

.control-starter-slate .control-starter-button {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.control-create-template-panel {
    border: 1px solid #d1d5db;
    border-radius: 1rem;
    background: #ffffff;
    padding: 1rem;
    box-shadow: 0 10px 24px rgb(15 23 42 / 0.05);
}

.control-create-template-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.control-create-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12.75rem, 1fr));
    gap: 0.75rem;
    margin-top: 0.875rem;
}

.control-create-template-card {
    display: flex;
    min-height: 8.75rem;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #e2e8f0;
    border-radius: 0.875rem;
    background: #f8fafc;
    padding: 0.875rem;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.control-create-template-card:hover,
.control-create-template-card.is-active {
    box-shadow: 0 14px 24px rgb(15 23 42 / 0.1);
    transform: translateY(-1px);
}

.control-create-template-card.is-active {
    border-width: 2px;
}

.control-create-template-title {
    color: #0f172a;
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1.25rem;
}

.control-create-template-description {
    margin-top: 0.5rem;
    color: #475569;
    font-size: 0.8125rem;
    line-height: 1.2rem;
}

.control-create-template-meta {
    margin-top: 0.75rem;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1rem;
}

.control-create-template-blue {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.control-create-template-green {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.control-create-template-amber {
    border-color: #fde68a;
    background: #fffbeb;
}

.control-create-template-slate {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.control-due-preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0.25rem 0 0.5rem;
}

.control-due-preset {
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 0.375rem 0.5rem;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1rem;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.control-due-preset:hover,
.control-due-preset.is-active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
}

.control-detail-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.control-detail-next,
.control-detail-metric {
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 0.875rem;
    background: #ffffff;
    padding: 1rem;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}

.control-detail-next {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.control-detail-metrics {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.control-detail-label {
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1rem;
    text-transform: uppercase;
}

.control-detail-next-text {
    margin-top: 0.375rem;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35rem;
}

.control-detail-value {
    margin-top: 0.375rem;
    color: #0f172a;
    font-size: 1.125rem;
    font-weight: 900;
    line-height: 1.5rem;
}

.control-detail-hint {
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.125rem;
}

.control-detail-progress {
    display: block;
    width: 100%;
    margin-top: 0.625rem;
    height: 0.5rem;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: #e2e8f0;
    appearance: none;
}

.control-detail-progress::-webkit-progress-bar {
    border-radius: 999px;
    background: #e2e8f0;
}

.control-detail-progress::-webkit-progress-value {
    border-radius: 999px;
    background: #2563eb;
}

.control-detail-progress::-moz-progress-bar {
    border-radius: 999px;
    background: #2563eb;
}

.control-detail-next-blue,
.control-detail-metric-blue {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.control-detail-next-amber,
.control-detail-metric-amber {
    border-color: #fde68a;
    background: #fffbeb;
}

.control-detail-next-red,
.control-detail-metric-red {
    border-color: #fecaca;
    background: #fef2f2;
}

.control-detail-next-green,
.control-detail-metric-green {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.control-detail-next-slate,
.control-detail-metric-slate {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.control-detail-metric-red .control-detail-value {
    color: #b91c1c;
}

.control-detail-metric-amber .control-detail-value {
    color: #b45309;
}

.control-detail-metric-green .control-detail-value {
    color: #047857;
}

.control-task-list {
    display: grid;
    gap: 0.625rem;
}

.control-task-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.875rem;
    background: #ffffff;
    padding: 1rem;
    text-decoration: none;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.control-task-row:hover {
    border-color: #bfdbfe;
    box-shadow: 0 12px 22px rgb(15 23 42 / 0.08);
    transform: translateY(-1px);
}

.control-task-row-main,
.control-task-row-side {
    min-width: 0;
}

.control-task-title {
    color: #0f172a;
    font-size: 0.9375rem;
    font-weight: 850;
    line-height: 1.25rem;
}

.control-task-meta {
    margin-top: 0.375rem;
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2rem;
}

.control-task-next {
    margin-top: 0.625rem;
    color: #334155;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25rem;
}

.control-task-row-side {
    display: grid;
    gap: 0.5rem;
}

.control-task-due,
.control-task-checklist {
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #f8fafc;
    padding: 0.75rem;
}

.control-task-due span,
.control-task-checklist span {
    display: block;
    color: #0f172a;
    font-size: 0.875rem;
    font-weight: 850;
    line-height: 1.25rem;
}

.control-task-due small {
    display: block;
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1rem;
}

.control-task-checklist progress {
    display: block;
    width: 100%;
    height: 0.5rem;
    margin-top: 0.5rem;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: #e2e8f0;
    appearance: none;
}

.control-task-checklist progress::-webkit-progress-bar {
    border-radius: 999px;
    background: #e2e8f0;
}

.control-task-checklist progress::-webkit-progress-value {
    border-radius: 999px;
    background: #2563eb;
}

.control-task-checklist progress::-moz-progress-bar {
    border-radius: 999px;
    background: #2563eb;
}

.control-task-due-red {
    border-color: #fecaca;
    background: #fef2f2;
}

.control-task-due-red span {
    color: #b91c1c;
}

.control-task-due-amber {
    border-color: #fde68a;
    background: #fffbeb;
}

.control-task-due-amber span {
    color: #b45309;
}

.control-task-due-blue {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.control-task-due-green {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.control-task-due-green span {
    color: #047857;
}

.control-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem;
}

.control-scope-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
    gap: 0.5rem;
}

.control-domain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.5rem;
}

.control-quick-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.control-quick-form-title {
    min-width: 0;
}

.control-quick-form-presets {
    grid-column: 1 / -1;
}

.control-split-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.control-split-grid > *,
.control-kpi-grid > * {
    min-width: 0;
}

.control-filter-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    align-items: end;
}

@media (min-width: 1024px) {
    .control-readiness-panel {
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
        align-items: start;
    }

    .control-starter-header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .control-create-template-header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .control-focus-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .control-detail-summary {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
        align-items: stretch;
    }

    .control-detail-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .control-task-row {
        grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.32fr);
        align-items: center;
    }

    .control-quick-form {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        align-items: end;
    }

    .control-quick-form-title {
        grid-column: span 2;
    }

    .control-split-grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    }

    .control-filter-form {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.priority-low {
    color: var(--color-priority-low);
}

.priority-medium {
    color: var(--color-priority-medium);
}

.priority-high {
    color: var(--color-priority-high);
}

.priority-critical {
    color: var(--color-priority-critical);
}

.pct-w-0 { width: 0%; }
.pct-w-1 { width: 1%; }
.pct-w-2 { width: 2%; }
.pct-w-3 { width: 3%; }
.pct-w-4 { width: 4%; }
.pct-w-5 { width: 5%; }
.pct-w-6 { width: 6%; }
.pct-w-7 { width: 7%; }
.pct-w-8 { width: 8%; }
.pct-w-9 { width: 9%; }
.pct-w-10 { width: 10%; }
.pct-w-11 { width: 11%; }
.pct-w-12 { width: 12%; }
.pct-w-13 { width: 13%; }
.pct-w-14 { width: 14%; }
.pct-w-15 { width: 15%; }
.pct-w-16 { width: 16%; }
.pct-w-17 { width: 17%; }
.pct-w-18 { width: 18%; }
.pct-w-19 { width: 19%; }
.pct-w-20 { width: 20%; }
.pct-w-21 { width: 21%; }
.pct-w-22 { width: 22%; }
.pct-w-23 { width: 23%; }
.pct-w-24 { width: 24%; }
.pct-w-25 { width: 25%; }
.pct-w-26 { width: 26%; }
.pct-w-27 { width: 27%; }
.pct-w-28 { width: 28%; }
.pct-w-29 { width: 29%; }
.pct-w-30 { width: 30%; }
.pct-w-31 { width: 31%; }
.pct-w-32 { width: 32%; }
.pct-w-33 { width: 33%; }
.pct-w-34 { width: 34%; }
.pct-w-35 { width: 35%; }
.pct-w-36 { width: 36%; }
.pct-w-37 { width: 37%; }
.pct-w-38 { width: 38%; }
.pct-w-39 { width: 39%; }
.pct-w-40 { width: 40%; }
.pct-w-41 { width: 41%; }
.pct-w-42 { width: 42%; }
.pct-w-43 { width: 43%; }
.pct-w-44 { width: 44%; }
.pct-w-45 { width: 45%; }
.pct-w-46 { width: 46%; }
.pct-w-47 { width: 47%; }
.pct-w-48 { width: 48%; }
.pct-w-49 { width: 49%; }
.pct-w-50 { width: 50%; }
.pct-w-51 { width: 51%; }
.pct-w-52 { width: 52%; }
.pct-w-53 { width: 53%; }
.pct-w-54 { width: 54%; }
.pct-w-55 { width: 55%; }
.pct-w-56 { width: 56%; }
.pct-w-57 { width: 57%; }
.pct-w-58 { width: 58%; }
.pct-w-59 { width: 59%; }
.pct-w-60 { width: 60%; }
.pct-w-61 { width: 61%; }
.pct-w-62 { width: 62%; }
.pct-w-63 { width: 63%; }
.pct-w-64 { width: 64%; }
.pct-w-65 { width: 65%; }
.pct-w-66 { width: 66%; }
.pct-w-67 { width: 67%; }
.pct-w-68 { width: 68%; }
.pct-w-69 { width: 69%; }
.pct-w-70 { width: 70%; }
.pct-w-71 { width: 71%; }
.pct-w-72 { width: 72%; }
.pct-w-73 { width: 73%; }
.pct-w-74 { width: 74%; }
.pct-w-75 { width: 75%; }
.pct-w-76 { width: 76%; }
.pct-w-77 { width: 77%; }
.pct-w-78 { width: 78%; }
.pct-w-79 { width: 79%; }
.pct-w-80 { width: 80%; }
.pct-w-81 { width: 81%; }
.pct-w-82 { width: 82%; }
.pct-w-83 { width: 83%; }
.pct-w-84 { width: 84%; }
.pct-w-85 { width: 85%; }
.pct-w-86 { width: 86%; }
.pct-w-87 { width: 87%; }
.pct-w-88 { width: 88%; }
.pct-w-89 { width: 89%; }
.pct-w-90 { width: 90%; }
.pct-w-91 { width: 91%; }
.pct-w-92 { width: 92%; }
.pct-w-93 { width: 93%; }
.pct-w-94 { width: 94%; }
.pct-w-95 { width: 95%; }
.pct-w-96 { width: 96%; }
.pct-w-97 { width: 97%; }
.pct-w-98 { width: 98%; }
.pct-w-99 { width: 99%; }
.pct-w-100 { width: 100%; }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-out;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}