/* =========================================================
TYPECODE - MODULAR DESIGN SYSTEM ENTRY POINT
========================================================= */
/* Core Tokens & Base */
@import url("core/variables.css");
@import url("core/base.css");
/* Shared UI Components */
@import url("components/buttons.css");
@import url("components/forms.css");
@import url("components/modals.css");
@import url("components/tables.css");
/* User & Practice Views */
@import url("views/auth.css");
@import url("views/practice.css");
@import url("views/practice-exam.css");
@import url("views/history.css");
/* Admin Management Modules */
@import url("views/admin/admin-layout.css");
@import url("views/admin/users.css");
@import url("views/admin/sesi.css");
@import url("views/admin/results.css");
@import url("views/admin/bobot.css");
@import url("views/admin/context.css");
@import url("views/admin/settings.css");
@import url("views/admin/explain-grading.css");
@import url("views/admin/bugfix-grading.css");
@import url("views/admin/exam-management.css");
/* =========================================================
CARD (Drafting Sheet Panel)
========================================================= */
.card {
background: var(--bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
transition:
background var(--transition-normal),
border-color var(--transition-normal),
box-shadow var(--transition-normal);
}
.card:hover {
background: var(--bg-hover);
}
/* =========================================================
CALLOUTS (Architectural Draft Notes)
========================================================= */
.info-callout {
padding: var(--space-4) var(--space-5);
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
color: var(--text-secondary);
}
.accent-callout {
padding: var(--space-4) var(--space-5);
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
color: var(--text-secondary);
}
/* =========================================================
VERTICAL STEPPER
========================================================= */
.stepper {
position: relative;
}
.step {
position: relative;
display: flex;
gap: var(--space-4);
padding-bottom: var(--space-6);
}
.step-indicator {
position: relative;
z-index: 2;
width: 30px;
height: 30px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-surface);
color: var(--text-secondary);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-family: var(--font-code);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
}
.step.active .step-indicator {
background: var(--color-accent);
color: #1A1916;
border-color: var(--color-accent);
}
.step.completed .step-indicator {
background: var(--brand-indigo);
color: #FFFFFF;
border-color: var(--brand-indigo);
}
.step:not(:last-child)::after {
content: "";
position: absolute;
left: 14px;
top: 30px;
width: 1px;
height: calc(100% - 10px);
background: var(--color-divider);
}
/* =========================================================
PROGRESS
========================================================= */
.progress {
width: 100%;
height: 6px;
overflow: hidden;
background: var(--bg-hover);
border-radius: var(--radius-full);
}
.progress-bar {
height: 100%;
background: var(--color-accent);
border-radius: inherit;
transition: width 300ms ease;
}
/* =========================================================
BADGE (Technical Draft Stamp)
========================================================= */
.badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: var(--radius-full);
border: 1px solid var(--color-border);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
}
.badge-primary {
background: var(--bg-elevated);
color: var(--brand-indigo);
border-color: var(--brand-indigo);
}
.badge-accent {
background: var(--bg-elevated);
color: var(--color-accent);
border-color: var(--color-accent);
}
/* =========================================================
TABLE (Drafting Grid)
========================================================= */
table {
width: 100%;
border-collapse: collapse;
background: var(--bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
th {
padding: 11px 14px;
background: var(--bg-elevated);
color: var(--text-primary);
text-align: left;
font-weight: var(--font-weight-semibold);
border-bottom: 1px solid var(--color-border);
}
td {
padding: 11px 14px;
color: var(--text-secondary);
border-bottom: 1px solid var(--color-divider);
}
tbody tr:hover {
background: var(--bg-hover);
}
/* =========================================================
DIVIDER
========================================================= */
.divider {
width: 100%;
height: 1px;
background: var(--color-divider);
}
/* =========================================================
SCROLLBAR
========================================================= */
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-tertiary);
}
/* =========================================================
SELECTION & FOCUS ACCESSIBILITY
========================================================= */
::selection {
background: var(--color-accent);
color: #1A1916;
}
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* ==========================================================================
GLOBAL SVG BACKDROP (Stretch Seluruh Layar Monitor untuk Semua Menu)
========================================================================== */
.app-global-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 0;
pointer-events: none;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.app-global-bg-svg {
width: 100%;
height: 100%;
min-width: 100vw;
min-height: 100vh;
object-fit: cover;
object-position: center;
opacity: 0.15;
filter: contrast(1.15) brightness(1.05);
transform: scale(1.02);
transition: opacity 0.3s ease;
}
.app-global-bg-overlay {
position: absolute;
inset: 0;
background: radial-gradient(circle at center, transparent 0%, var(--bg-base) 88%);
opacity: 0.7;
pointer-events: none;
}
.app-layout {
max-width: none;
margin: 0 auto;
padding: 0 24px;
min-height: 100vh;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
}
/* --------------------------------------------------------------------------
3. Top Navigation Header
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
3. Top Navigation Header - Apple Liquid / Frosted Glass Style
-------------------------------------------------------------------------- */
.top-nav,
.topbar {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
height: 64px;
margin: 0;
margin-inline: calc(-1 * clamp(12px, 2.5vw, 24px));
padding-inline: clamp(12px, 2.5vw, 24px) !important;
background: var(--bg-surface);
background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: none;
border-bottom: 1px solid var(--border-subtle);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
border-radius: 0;
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 60;
transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.nav-brand,
.brand {
display: flex;
align-items: center;
gap: 12px;
justify-self: start;
min-width: 0;
}
.brand-icon {
width: 38px;
height: 38px;
background: var(--bg-surface, #ffffff);
border: 1px solid var(--border-subtle);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--brand-indigo, #D97706);
font-size: 15px;
position: relative;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
/* Logo RPL (assets/logos/logo.png) menutupi ikon saat berhasil dimuat.
Jika file belum ada, onerror menyembunyikan ![]()
sehingga ikon tampil. */
.brand-icon .brand-logo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
padding: 0px;
z-index: 1;
}
.brand-info {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
line-height: 1.25;
}
.brand-name {
font-size: 16.5px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text-primary);
font-family: var(--font-ui, var(--font-mono));
line-height: 1.25;
white-space: nowrap;
}
.brand-accent {
color: var(--accent-amber, #D97706);
}
.brand-tag {
font-size: 11.5px;
font-weight: 500;
font-family: var(--font-ui, var(--font-mono));
color: var(--text-tertiary);
margin-left: 0;
margin-top: 2px;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 280px;
}
/* Tabs - Clean Floating Pill Nav (No Inner Container Box) */
.nav-tabs,
.nav {
display: flex;
justify-self: center;
align-items: center;
gap: 8px;
background: transparent !important;
border: none !important;
padding: 0 !important;
box-shadow: none !important;
}
.nav-tab {
background: transparent !important;
border: none !important;
color: var(--text-secondary, #666666) !important;
padding: 10px 18px !important;
border-radius: 999px !important;
font-size: 13.5px !important;
font-weight: 500 !important;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease !important;
white-space: nowrap;
position: relative;
box-shadow: none !important;
}
.nav-tab:hover {
color: var(--text-primary) !important;
background: var(--bg-hover, #ECE9E2) !important;
}
.nav-tab.active {
background: var(--accent-amber, #D97706) !important;
color: #ffffff !important;
font-weight: 600 !important;
box-shadow: 0 2px 10px rgba(217, 119, 6, 0.35) !important;
}
.nav-tab.active i {
color: #ffffff !important;
}
.tab-badge {
color: inherit;
opacity: 0.8;
font-size: 11px;
font-weight: 600;
font-family: var(--font-mono);
margin-left: 2px;
}
/* Actions / User - Apple Style Circular & Pill Buttons */
.nav-actions,
.user {
display: flex;
align-items: center;
justify-self: end;
gap: 8px;
}
/* ONLY top-level trigger buttons are circular - NEVER dropdown items */
.nav-actions > .nav-btn,
.nav-actions > .nav-btn-wrap > .nav-btn,
.nav-actions > .nav-noti-wrap > .nav-btn,
.nav-actions > .nav-user-wrap > .nav-btn {
background: var(--bg-surface, #ffffff);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
width: 38px;
height: 38px;
min-width: 38px;
flex: none;
border-radius: 50% !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.nav-actions > .nav-btn:hover,
.nav-actions > .nav-btn-wrap > .nav-btn:hover,
.nav-actions > .nav-noti-wrap > .nav-btn:hover,
.nav-actions > .nav-user-wrap > .nav-btn:hover {
background: var(--bg-hover, #ECE9E2);
color: var(--text-primary);
border-color: var(--border-strong);
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
.nav-btn.muted {
color: var(--text-muted);
}
.nav-btn.btn-auth,
#nav-auth-btn {
width: auto !important;
min-width: 38px !important;
height: 38px !important;
border-radius: 999px !important;
padding: 0 14px !important;
gap: 8px !important;
font-size: 13px !important;
font-weight: 600 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--bg-surface, #ffffff) !important;
border: 1px solid var(--border-subtle) !important;
color: var(--text-primary) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
.nav-btn.btn-auth:hover,
#nav-auth-btn:hover {
background: var(--bg-hover, #ECE9E2) !important;
border-color: var(--border-strong) !important;
transform: translateY(-1px) !important;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
}
/* Hide redundant split chevrons for clean 1-icon-per-feature Apple style */
#theme-menu-btn,
#sound-menu-btn {
display: none !important;
}
/* Theme Toggle Button Highlight */
#theme-toggle-btn {
color: var(--accent-amber, #D97706);
}
/* --------------------------------------------------------------------------
4. View Container & Panels
-------------------------------------------------------------------------- */
.content-area {
flex: 1;
padding: 24px 0;
}
.view-panel {
display: none;
flex-direction: column;
gap: 24px;
}
.view-panel:not(.active) {
display: none !important;
}
.view-panel.active {
display: flex;
animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* --------------------------------------------------------------------------
5. Practice View Elements
-------------------------------------------------------------------------- */
.toolbar-section {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 12px 20px;
flex-wrap: wrap;
}
.toolbar-section .toolbar-group + .toolbar-group {
padding-left: 20px;
border-left: 1px solid var(--border-subtle);
}
.toolbar-group {
display: flex;
align-items: center;
gap: 12px;
}
.toolbar-title {
font-size: 12px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 6px;
}
.segment-control {
display: flex;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
padding: 3px;
gap: 6px;
}
.segment-btn {
background: transparent;
border: 1px solid transparent;
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
padding: 6px 12px;
border-radius: var(--radius-xs);
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.18s ease, transform 0.15s ease;
}
.segment-btn:hover:not(.disabled):not(.active) {
color: var(--text-primary);
background: var(--bg-hover);
border-color: var(--border-strong);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transform: translateY(-1px);
}
.segment-btn.active {
background: var(--bg-elevated);
color: var(--text-primary);
border-color: var(--border-strong);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
font-weight: 600;
}
.segment-btn.disabled {
opacity: 0.4;
cursor: not-allowed;
}
.color-js { color: #F7DF1E; }
.color-py { color: #4B8BBE; }
.color-php { color: #8993BE; }
.color-cpp { color: #659AD2; }
.color-ts { color: #3178C6; }
.color-html { color: #E34F26; }
.dot-status {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-tertiary);
}
.level-1 { background: var(--text-tertiary); }
.level-2 { background: var(--text-secondary); }
.level-3 { background: var(--text-primary); }
/* Stats Grid Bar */
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr) 1.5fr;
gap: 16px;
align-items: stretch;
}
.stat-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 18px 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 110px;
transition: all 0.2s ease, transform 0.15s ease;
}
.stat-card:hover {
border-color: #475569;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
transform: translateY(-1px);
}
.stat-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.stat-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-tertiary);
}
.stat-unit {
font-size: 10px;
font-family: var(--font-mono);
color: var(--text-muted);
background: var(--bg-base);
padding: 1px 6px;
border-radius: 4px;
border: 1px solid var(--border-subtle);
}
.stat-value {
font-size: 32px;
font-weight: 700;
font-family: var(--font-mono);
color: var(--text-primary);
line-height: 1.1;
margin: 6px 0 4px;
}
.stat-symbol {
font-size: 20px;
color: var(--text-tertiary);
}
.stat-footer {
font-size: 12px;
color: var(--text-secondary);
font-family: var(--font-mono);
}
/* Kartu ke-4: Kemajuan Sintaks - layout vertikal simetris dengan kartu lain */
.stat-card-progress {
justify-content: flex-start;
gap: 0;
}
.stat-card-progress .stat-header {
margin-bottom: 10px;
}
/* Progress Bar Container (Kemajuan Sintaks) */
.progress-bar-container {
width: 100%;
height: 8px;
background: var(--bg-base);
border-radius: 999px;
overflow: hidden;
margin: 4px 0 10px;
border: 1px solid var(--border-subtle);
}
.progress-bar-fill {
height: 100%;
background: var(--color-secondary);
border-radius: 999px;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.text-danger { color: var(--accent-rose) !important; }
.text-success { color: var(--accent-emerald) !important; }
/* --------------------------------------------------------------------------
5b. Floating Metrics Pop-up / HUD (Realtime Telemetry Pinned on Scroll)
-------------------------------------------------------------------------- */
.floating-metrics-hud {
position: fixed;
top: 92px;
left: 50%;
transform: translate(-50%, -24px);
opacity: 0;
pointer-events: none;
transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
z-index: 58;
max-width: calc(100vw - 32px);
}
.floating-metrics-hud.visible {
transform: translate(-50%, 0);
opacity: 1;
pointer-events: auto;
}
.floating-metrics-content {
display: flex;
align-items: center;
gap: 14px;
background: var(--bg-surface);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid var(--border-strong);
border-radius: 999px;
padding: 7px 18px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--border-subtle);
user-select: none;
}
.floating-stat-item {
display: flex;
align-items: center;
gap: 8px;
}
.floating-stat-icon {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
background: var(--bg-hover);
color: var(--text-primary);
flex-shrink: 0;
}
.floating-stat-icon.icon-speed {
color: var(--brand-indigo);
background: rgba(230, 172, 75, 0.15);
}
.floating-stat-icon.icon-accuracy {
color: var(--accent-emerald);
background: rgba(94, 184, 134, 0.15);
}
.floating-stat-icon.icon-time {
color: var(--brand-cyan);
background: rgba(126, 175, 186, 0.15);
}
.floating-stat-text {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.floating-stat-val-group {
display: flex;
align-items: baseline;
gap: 3px;
}
.floating-stat-val {
font-size: 14px;
font-weight: 700;
font-family: var(--font-mono, monospace);
color: var(--text-primary);
letter-spacing: -0.01em;
}
.floating-stat-unit {
font-size: 10px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
}
.floating-stat-sub {
font-size: 10px;
color: var(--text-muted);
font-weight: 500;
font-family: var(--font-mono, monospace);
}
.floating-stat-divider {
width: 1px;
height: 22px;
background: var(--border-strong);
opacity: 0.8;
}
.floating-stat-progress {
min-width: 90px;
display: flex;
flex-direction: column;
gap: 3px;
}
.floating-progress-header {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 10px;
color: var(--text-secondary);
font-weight: 600;
line-height: 1;
}
.floating-progress-bar {
width: 100%;
height: 5px;
background: var(--bg-hover);
border-radius: 999px;
overflow: hidden;
position: relative;
border: 1px solid var(--border-subtle);
}
.floating-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--brand-indigo), var(--accent-emerald));
border-radius: 999px;
transition: width 0.25s ease;
}
@media (max-width: 768px) {
.floating-metrics-hud {
top: auto;
bottom: 16px;
transform: translate(-50%, 20px);
}
.floating-metrics-hud.visible {
transform: translate(-50%, 0);
}
.floating-metrics-content {
gap: 10px;
padding: 6px 14px;
}
.floating-stat-item.floating-stat-progress {
display: none;
}
}
/* --------------------------------------------------------------------------
6. Editor Frame & Code Viewport
-------------------------------------------------------------------------- */
/* Canvas Viewport */
.hidden-input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
top: 0;
left: 0;
}
.canvas-overlay.hidden {
opacity: 0;
pointer-events: none;
}
.overlay-content {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: var(--brand-cyan);
}
.overlay-icon {
font-size: 32px;
}
/* Baris perintah terminal (skema pembuatan file/direktori level 2-3) */
.char.shell-prompt {
color: var(--accent-emerald);
font-weight: 700;
}
.char.shell-cmd {
color: #9BE1FF;
}
[data-theme="light"] .char.shell-cmd, [data-theme="minimal"] .char.shell-cmd, [data-theme="chatgpt"] .char.shell-cmd, [data-theme="sakura-light"] .char.shell-cmd {
color: #2A7B54;
font-weight: 500;
}
/* --------------------------------------------------------------------------
7. History & Analytics View
-------------------------------------------------------------------------- */
.history-section {
display: flex;
flex-direction: column;
gap: 20px;
}
.history-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 16px;
margin-bottom: 32px;
}
.summary-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md, 12px);
padding: 18px 20px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
min-height: 88px;
box-sizing: border-box;
transition: var(--transition);
}
.summary-card:hover {
border-color: var(--brand-indigo);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.summary-value {
font-size: 24px;
font-weight: 700;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
color: var(--text-primary);
line-height: 1.2;
}
.level-recap-section {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 16px;
}
.level-recap-section .card-header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-subtle);
}
.level-recap-section .card-header h3 {
font-size: 17px;
font-weight: 700;
color: var(--text-primary);
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.level-recap-section .card-subtitle {
font-size: 13px;
color: var(--text-secondary);
margin: 0;
}
/* Chart Visualizer */
.chart-container-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 20px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.card-header.border-bottom {
padding-bottom: 14px;
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 0;
}
.card-header h3 {
font-size: 15px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.card-subtitle {
font-size: 12px;
color: var(--text-tertiary);
}
.chart-viewport {
min-height: 160px;
display: flex;
align-items: flex-end;
justify-content: center;
padding-top: 20px;
}
.empty-chart {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: var(--text-tertiary);
font-size: 13px;
margin: auto;
}
.empty-chart i { font-size: 28px; opacity: 0.4; }
.bar-chart {
width: 100%;
height: 160px;
display: flex;
align-items: flex-end;
justify-content: space-around;
gap: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-subtle);
}
.chart-bar-item {
flex: 1;
max-width: 48px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
height: 100%;
justify-content: flex-end;
}
.chart-bar-fill {
width: 100%;
background: var(--brand-cyan);
border-radius: var(--radius-xs) var(--radius-xs) 0 0;
transition: height 0.3s ease;
}
.chart-bar-value {
font-size: 10px;
font-family: var(--font-mono);
color: var(--brand-cyan);
font-weight: 600;
}
.chart-bar-label {
font-size: 10px;
color: var(--text-tertiary);
font-family: var(--font-mono);
}
/* History Table */
.table-responsive {
overflow-x: auto;
}
.history-table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.history-table th {
background: var(--bg-elevated);
padding: 12px 16px;
font-size: 11px;
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border-bottom: 2px solid var(--color-border);
}
.history-table td {
padding: 14px 16px;
border-bottom: 1px solid var(--border-subtle);
color: var(--text-secondary);
vertical-align: middle;
}
.history-table tbody tr {
transition: background 0.12s ease;
}
.history-table tbody tr:hover td {
background: var(--bg-hover);
color: var(--text-primary);
}
.wpm-badge {
font-family: var(--font-mono);
font-weight: 700;
font-size: 14px;
color: var(--text-primary);
}
.badge {
font-size: 11px;
font-family: var(--font-mono);
color: var(--text-secondary);
}
.badge-success {
color: var(--text-secondary);
}
.btn-delete-row {
background: transparent;
border: none;
color: var(--text-tertiary);
cursor: pointer;
padding: 4px;
}
.btn-delete-row:hover {
color: var(--accent-rose);
}
.empty-table-state {
padding: 40px;
text-align: center;
color: var(--text-tertiary);
}
.empty-table-state i { font-size: 32px; margin-bottom: 8px; }
/* --------------------------------------------------------------------------
8. Modals
-------------------------------------------------------------------------- */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(6px);
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
[data-theme="light"] .modal-backdrop, [data-theme="minimal"] .modal-backdrop, [data-theme="chatgpt"] .modal-backdrop, [data-theme="sakura-light"] .modal-backdrop {
background: rgba(15, 23, 42, 0.4);
}
.modal-dialog {
background: var(--bg-surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
max-width: 480px;
width: 100%;
max-height: calc(100vh - 40px);
overflow-y: auto;
padding: 28px;
box-shadow: var(--box-shadow-modal);
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
}
.res-box {
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
padding: 12px;
text-align: center;
}
.res-value {
font-size: 24px;
font-weight: 700;
font-family: var(--font-mono);
color: var(--brand-cyan);
display: block;
}
.res-label {
font-size: 11px;
color: var(--text-tertiary);
}
.pillar-level-tabs-wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 12px;
padding: 10px 16px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.pillar-level-label {
font-size: 0.88rem;
font-weight: 700;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
.pillar-level-selector {
margin: 0;
}
.res-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 2px 0;
color: var(--text-secondary);
}
.modal-footer-btns {
display: flex;
align-items: center;
gap: 12px;
margin-top: 20px;
}
.modal-footer-btns .btn,
.modal-footer-btns .btn-primary,
.modal-footer-btns .btn-secondary,
.modal-footer-btns .btn-accent {
flex: 1;
}
.page-btn {
min-width: 32px;
height: 32px;
padding: 0 10px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: var(--bg-surface);
color: var(--text-primary);
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.page-btn:hover:not(:disabled) {
background: var(--bg-hover);
border-color: var(--brand-indigo);
color: var(--text-primary);
}
.page-btn.active,
.page-btn.btn-primary {
background: var(--brand-indigo);
color: #FFFFFF;
border-color: var(--brand-indigo);
}
.page-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
background: transparent;
border-color: var(--border-subtle);
}
.modal-close {
position: absolute;
top: 14px;
right: 14px;
background: transparent;
border: none;
color: var(--text-tertiary);
font-size: 22px;
cursor: pointer;
}
.modal-dialog-info {
max-width: 520px;
}
.brand-accent-icon {
font-size: 28px;
color: var(--brand-cyan);
margin-bottom: 8px;
}
.shortcut-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
margin: 10px 0;
}
.shortcut-list li {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--text-secondary);
}
/* --------------------------------------------------------------------------
Panduan & Fitur Sistem - modal informasi (editorial / profesional)
-------------------------------------------------------------------------- */
.modal-dialog-info {
max-width: min(680px, 94vw);
padding: 32px 34px 28px;
}
.panduan {
display: flex;
flex-direction: column;
gap: 26px;
}
/* Kepala editorial */
.panduan-head {
padding-bottom: 18px;
border-bottom: 1px solid var(--border-strong);
}
.panduan-kicker {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent-rose);
margin-bottom: 6px;
}
.panduan-title {
margin: 0;
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.015em;
color: var(--text-primary);
text-align: left;
}
.panduan-sub {
margin: 6px 0 0;
font-size: 12.5px;
color: var(--text-tertiary);
line-height: 1.6;
}
/* Bagian (section) */
.panduan-sec {
display: flex;
flex-direction: column;
gap: 12px;
}
.panduan-sec-head {
display: flex;
align-items: baseline;
gap: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-subtle);
}
.panduan-sec-num {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
color: var(--accent-rose);
letter-spacing: 0.05em;
}
.panduan-sec-title {
margin: 0;
font-size: 13.5px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--text-primary);
}
/* Level akses */
.panduan-role {
display: flex;
flex-direction: column;
gap: 12px;
}
.panduan-role-row {
display: flex;
gap: 14px;
align-items: flex-start;
font-size: 12.5px;
line-height: 1.65;
color: var(--text-secondary);
}
.panduan-role-row p {
margin: 0;
}
.panduan-tag {
flex: 0 0 auto;
min-width: 74px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
margin-top: 1px;
}
.panduan-tag-user { color: var(--text-primary); }
.panduan-tag-asisten{ color: var(--text-secondary); }
.panduan-tag-admin { color: var(--text-secondary); }
/* Tata cara (langkah bernomor) */
.panduan-steps {
margin: 0;
padding: 0;
list-style: none;
counter-reset: panduan-step;
display: flex;
flex-direction: column;
gap: 10px;
}
.panduan-steps li {
counter-increment: panduan-step;
position: relative;
padding-left: 34px;
font-size: 12.5px;
line-height: 1.65;
color: var(--text-secondary);
}
.panduan-steps li::before {
content: counter(panduan-step, decimal-leading-zero);
position: absolute;
left: 0;
top: 1px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 700;
color: var(--accent-rose);
background: color-mix(in srgb, var(--accent-rose) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--accent-rose) 30%, transparent);
border-radius: 7px;
}
/* Larangan */
.panduan-rules {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 9px;
}
.panduan-rules li {
position: relative;
padding-left: 22px;
font-size: 12.5px;
line-height: 1.6;
color: var(--text-secondary);
}
.panduan-rules li::before {
content: "\f071"; /* fa-triangle-exclamation */
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 0;
top: 1px;
font-size: 11px;
color: var(--accent-rose);
opacity: 0.85;
}
/* Rumus */
.panduan-label {
margin: 2px 0 0;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.panduan-formula {
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.7;
color: var(--text-primary);
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: 8px;
padding: 9px 13px;
overflow-wrap: break-word;
}
.panduan-note,
.panduan-example {
margin: 0;
font-size: 12px;
line-height: 1.65;
color: var(--text-tertiary);
}
.panduan-example {
color: var(--text-secondary);
}
.panduan-example strong {
color: var(--accent-rose);
font-weight: 700;
}
/* Tabel skor */
.panduan-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.panduan-table th {
text-align: left;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-secondary);
padding: 6px 10px;
border-bottom: 2px solid var(--color-border);
}
.panduan-table td {
padding: 8px 10px;
line-height: 1.55;
color: var(--text-secondary);
border-bottom: 1px solid var(--border-subtle);
vertical-align: top;
}
.panduan-table td:first-child {
font-family: var(--font-mono);
font-weight: 700;
font-size: 11.5px;
color: var(--text-primary);
white-space: nowrap;
}
/* Pintasan keyboard */
.panduan-keys {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
}
.panduan-key {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--text-secondary);
}
.panduan-key kbd {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 700;
color: var(--text-primary);
background: var(--bg-elevated);
border: 1px solid var(--border-strong);
border-bottom-width: 2px;
border-radius: 5px;
padding: 2px 7px;
}
/* Referensi berkas */
.panduan-ref {
margin: 0;
padding-top: 14px;
border-top: 1px solid var(--border-subtle);
font-size: 11px;
line-height: 1.6;
color: var(--text-tertiary);
}
.panduan-ref code {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--accent-rose);
background: color-mix(in srgb, var(--accent-rose) 8%, transparent);
border-radius: 4px;
padding: 1px 5px;
}
/* --------------------------------------------------------------------------
9. Footer
-------------------------------------------------------------------------- */
.app-footer {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
border-top: 1px solid var(--border-subtle);
font-size: 12px;
color: var(--text-tertiary);
}
.separator { margin: 0 6px; }
/* --------------------------------------------------------------------------
10. Level Admin & Authentication Styles
-------------------------------------------------------------------------- */
.badge-tag-admin {
color: var(--text-tertiary);
font-weight: 600;
font-size: 10px;
letter-spacing: 0.08em;
margin-left: 6px;
text-transform: uppercase;
}
.badge-role {
font-size: 10px;
color: var(--text-tertiary);
font-weight: 600;
letter-spacing: 0.05em;
}
.badge-role-admin {
color: var(--text-secondary);
}
.btn-auth {
display: flex;
align-items: center;
gap: 8px;
width: auto;
height: 36px;
max-width: 300px;
padding: 0 14px;
background: var(--bg-elevated);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
color: var(--text-primary);
font-size: 13px;
cursor: pointer;
transition: var(--transition);
}
.btn-auth .user-identity {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.25;
min-width: 0;
}
.btn-auth .user-name-label {
max-width: 170px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
}
.btn-auth .user-meta {
font-size: 10px;
font-family: var(--font-mono);
color: var(--text-tertiary);
white-space: nowrap;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-auth .badge-role {
flex: none;
white-space: nowrap;
}
.btn-auth:hover {
background: var(--bg-hover);
border-color: var(--brand-indigo);
}
/* Notifikasi Permintaan Akun (Navbar Admin/Asisten) */
.nav-noti-wrap {
position: relative;
display: flex;
align-items: center;
}
.nav-noti-btn,
button.nav-noti-btn {
position: relative;
width: 36px;
height: 36px;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: var(--radius-md) !important;
background: var(--bg-surface) !important;
border: 1px solid var(--color-border) !important;
color: var(--text-main) !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
min-width: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
.nav-noti-btn::before,
.nav-noti-btn::after,
button.nav-noti-btn::before,
button.nav-noti-btn::after {
display: none !important;
}
.nav-noti-btn:hover,
button.nav-noti-btn:hover {
background: var(--bg-hover) !important;
color: var(--primary) !important;
border-color: var(--primary) !important;
}
.nav-noti-badge {
position: absolute;
top: -6px;
right: -6px;
min-width: 19px;
height: 19px;
padding: 0 4px;
background: #ef4444;
color: #ffffff !important;
font-size: 11px;
font-weight: 700;
line-height: 1;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--bg-main, #181825);
box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5);
z-index: 10 !important;
pointer-events: none;
animation: notiBadgePulse 2s infinite;
}
@keyframes notiBadgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
.notification-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 360px;
max-width: calc(100vw - 24px);
max-height: 480px;
background: var(--bg-surface);
border: 1px solid var(--color-border);
border-radius: 16px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--border-subtle);
padding: 14px;
z-index: 140;
display: flex;
flex-direction: column;
animation: navMenuIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.notification-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 12px;
margin-bottom: 10px;
border-bottom: 1px dashed var(--color-divider);
}
.notification-header-left {
display: flex;
align-items: center;
gap: 8px;
}
.notification-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--text-main);
display: flex;
align-items: center;
gap: 6px;
}
.notification-title i {
color: var(--accent);
}
.notification-count-badge {
font-size: 11px;
font-weight: 600;
padding: 2px 7px;
border-radius: 10px;
background: rgba(59, 130, 246, 0.15);
color: var(--primary);
border: 1px solid rgba(59, 130, 246, 0.3);
}
.notification-close {
cursor: pointer;
width: 26px !important;
height: 26px !important;
min-width: 0 !important;
min-height: 0 !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--bg-hover) !important;
color: var(--text-muted) !important;
border: 1px solid var(--color-border) !important;
font-size: 16px !important;
line-height: 1 !important;
transition: all 0.15s ease !important;
padding: 0 !important;
box-shadow: none !important;
}
.notification-close::before,
.notification-close::after {
display: none !important;
}
.notification-close:hover {
background: var(--bg-active) !important;
color: var(--text-main) !important;
}
.notification-list {
overflow-y: auto;
max-height: 380px;
display: flex;
flex-direction: column;
gap: 10px;
padding-right: 2px;
}
.notification-container {
display: flex;
align-items: flex-start;
padding: 12px;
background: var(--bg-main);
border: 1px solid var(--color-border);
border-radius: 12px;
position: relative;
transition: all 0.2s ease;
gap: 12px;
}
.notification-container:hover {
border-color: var(--border-focus);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.notification-media {
position: relative;
flex-shrink: 0;
}
.notification-user-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--bg-hover);
color: var(--text-main);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
border: 1px solid var(--color-border);
}
.notification-reaction {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: white;
background: linear-gradient(135deg, #3b82f6, #06b6d4);
font-size: 10px;
position: absolute;
bottom: -2px;
right: -2px;
border: 2px solid var(--bg-main);
}
.notification-content {
flex: 1;
min-width: 0;
line-height: 1.35;
}
.notification-text {
margin: 0 0 4px 0;
font-size: 12.5px;
color: var(--text-main);
word-break: break-word;
}
.notification-text strong {
font-weight: 600;
color: var(--text-main);
}
.notification-meta-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 4px 0 6px 0;
}
.notification-timer {
color: var(--primary);
font-weight: 500;
font-size: 11px;
display: flex;
align-items: center;
gap: 4px;
}
.notification-actions {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
}
.notification-btn-approve,
.notification-btn-reject {
padding: 4px 10px !important;
font-size: 11px !important;
font-weight: 600 !important;
border-radius: 6px !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
box-shadow: none !important;
}
.notification-btn-approve::before,
.notification-btn-approve::after,
.notification-btn-reject::before,
.notification-btn-reject::after {
display: none !important;
}
.notification-btn-approve {
background: #10b981 !important;
color: #ffffff !important;
border: 1px solid #059669 !important;
}
.notification-btn-approve:hover {
background: #059669 !important;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4) !important;
}
.notification-btn-reject {
background: transparent !important;
color: #ef4444 !important;
border: 1px solid #ef4444 !important;
}
.notification-btn-reject:hover {
background: rgba(239, 68, 68, 0.1) !important;
}
.notification-empty {
text-align: center;
padding: 24px 12px;
color: var(--text-muted);
font-size: 13px;
}
.notification-empty i {
font-size: 28px;
margin-bottom: 8px;
opacity: 0.5;
display: block;
}
/* Menu Akun (Profil / About / Logout) - sejajar dengan tombol akun/logout */
.nav-user-wrap {
position: relative;
display: flex;
align-items: center;
}
.nav-user-menu {
position: absolute;
top: calc(100% + 10px);
right: 0;
width: 280px;
min-width: 280px;
max-width: 320px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 14px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16), 0 0 0 1px var(--border-subtle);
padding: 8px;
z-index: 130;
display: flex;
flex-direction: column;
gap: 3px;
animation: navMenuIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
box-sizing: border-box;
}
@keyframes navMenuIn {
from { opacity: 0; transform: translateY(-5px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.nav-user-menu-head {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px 10px;
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 4px;
}
.nav-user-menu-avatar {
width: 36px;
height: 36px;
flex: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
color: var(--brand-indigo, #D97706);
font-size: 14px;
}
.nav-user-menu-id {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.3;
}
.nav-user-menu-id strong {
font-size: 13px;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nav-user-menu-id small {
font-size: 11px;
font-family: var(--font-mono);
color: var(--text-tertiary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 1px;
}
/* User Menu Items - Full Width Row (Never Circular) */
.nav-user-menu-item,
button.nav-user-menu-item {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 38px !important;
padding: 8px 12px !important;
background: transparent !important;
border: 1px solid transparent !important;
border-radius: 8px !important;
color: var(--text-secondary) !important;
font-size: 13px !important;
font-weight: 500 !important;
text-align: left !important;
cursor: pointer !important;
box-shadow: none !important;
box-sizing: border-box !important;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
white-space: nowrap !important;
}
.nav-user-menu-item:hover,
button.nav-user-menu-item:hover {
background: var(--bg-hover) !important;
color: var(--text-primary) !important;
border-color: var(--border-subtle) !important;
transform: none !important;
}
.nav-user-menu-item i,
button.nav-user-menu-item i {
width: 18px;
text-align: center;
color: var(--brand-indigo, #D97706);
font-size: 13px;
flex-shrink: 0;
}
.nav-user-menu-item:hover i,
button.nav-user-menu-item:hover i {
color: var(--text-primary);
}
.nav-user-menu-item.nav-user-menu-logout,
button.nav-user-menu-item.nav-user-menu-logout {
color: var(--color-danger, #ef4444) !important;
}
.nav-user-menu-item.nav-user-menu-logout:hover,
button.nav-user-menu-item.nav-user-menu-logout:hover {
background: rgba(239, 68, 68, 0.1) !important;
color: var(--color-danger, #ef4444) !important;
border-color: rgba(239, 68, 68, 0.2) !important;
}
.nav-user-menu-item.nav-user-menu-logout i,
button.nav-user-menu-item.nav-user-menu-logout i {
color: inherit;
}
.nav-user-menu-divider {
height: 1px;
background: var(--border-subtle);
margin: 4px 0;
}
/* Admin Panel Layout */
.admin-panel-layout {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px 0;
}
.admin-header {
display: flex;
flex-direction: column;
gap: 16px;
padding: 24px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
}
.admin-title-wrap {
display: flex;
align-items: center;
gap: 16px;
}
.admin-badge-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.admin-title {
font-size: 22px;
font-weight: 700;
}
.admin-sub {
color: var(--text-secondary);
font-size: 13px;
}
.admin-tabs {
display: flex;
gap: 8px;
border-bottom: 1px solid var(--border-subtle);
padding-bottom: 8px;
}
.admin-tab-btn {
height: 36px;
padding: 0 16px;
border: 1px solid transparent;
background: transparent;
color: var(--text-secondary);
font-family: var(--font-ui);
font-weight: 600;
font-size: 13px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
box-sizing: border-box;
}
.admin-tab-btn:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.admin-tab-btn.active {
color: #FFFFFF;
background: var(--brand-indigo);
border-color: var(--brand-indigo);
}
.admin-content {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 24px;
}
/* Jarak antar seksi admin (mis. Rekap per Mahasiswa → Rekap per Kelas → Rekap per Level) */
.admin-section {
margin-bottom: 32px;
}
.admin-section:last-child {
margin-bottom: 0;
}
.admin-loading {
display: flex;
align-items: center;
justify-content: center;
height: 250px;
gap: 10px;
color: var(--text-secondary);
font-size: 15px;
}
.admin-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.search-box {
position: relative;
display: flex;
align-items: center;
flex: 1;
min-width: 240px;
}
.search-box i {
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
color: var(--text-tertiary);
font-size: 13px;
pointer-events: none;
transition: color var(--transition-fast);
}
.search-box input {
height: 38px;
padding: 0 12px 0 38px;
background: var(--bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 13px;
outline: none;
width: 100%;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.search-box input:focus {
border-color: var(--brand-indigo);
box-shadow: 0 0 0 3px var(--brand-indigo-glow);
background: var(--bg-surface);
}
.search-box input:focus ~ i {
color: var(--brand-indigo);
}
.admin-select {
height: 38px;
padding: 0 30px 0 12px;
background-color: var(--bg-elevated);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23ABA396' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 13.5px;
outline: none;
cursor: pointer;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.admin-select:focus {
border-color: var(--brand-indigo);
box-shadow: 0 0 0 3px var(--brand-indigo-glow);
background-color: var(--bg-surface);
}
.toolbar-actions {
display: flex;
align-items: center;
gap: 10px;
}
/* Filter Context Sintaks (tab Bahasa & Context) - grup dropdown sejajar,
tidak bertumpuk vertikal penuh selebar toolbar. */
.snippet-filter-toolbar {
gap: 10px;
}
.snippet-filter-group {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
flex: 1;
min-width: 0;
}
.snippet-filter-group .admin-select {
width: auto;
flex: 0 1 auto;
min-width: 130px;
}
.snippet-filter-group .admin-select#admin-snippet-sesi-filter {
max-width: 150px;
}
.snippet-filter-hint {
flex: none;
font-size: 12px;
}
/* =========================================================
ENTERPRISE DATA TABLE SYSTEM (.table & .admin-table)
========================================================= */
.table-container,
.table-responsive {
overflow-x: auto;
border-radius: var(--radius-lg, 12px);
border: 1px solid var(--border-subtle);
background: var(--bg-surface);
scrollbar-width: thin;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
max-height: calc(100vh - 240px);
}
.table,
.admin-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
line-height: 20px;
font-family: var(--font-ui);
}
.table th,
.admin-table th {
position: sticky;
top: 0;
z-index: 2;
background: var(--bg-elevated);
color: var(--text-secondary);
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.35;
height: 44px;
padding: 10px 16px;
border-bottom: 2px solid var(--color-border);
white-space: nowrap;
box-sizing: border-box;
}
.table td,
.admin-table td {
padding: 12px 16px;
min-height: 48px;
border-bottom: 1px solid var(--border-subtle);
vertical-align: middle;
color: var(--text-primary);
box-sizing: border-box;
}
.table tbody tr,
.admin-table tbody tr {
transition: background 150ms ease;
}
.table tbody tr:hover td,
.admin-table tbody tr:hover td {
background: var(--bg-hover);
}
/* Alignment Rules */
.table th.text-center,
.table td.text-center,
.admin-table th.text-center,
.admin-table td.text-center {
text-align: center !important;
}
.table th.text-right,
.table td.text-right,
.admin-table th.text-right,
.admin-table td.text-right,
.table td.numeric,
.admin-table td.numeric {
text-align: right !important;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* Baris terpilih pada tabel penilaian penjelasan - sorot netral sesuai tema
(tanpa aksen warna/garis mencolok; cukup permukaan + penanda tipis) */
.table tbody tr.explain-active td,
.admin-table tbody tr.explain-active td {
background: var(--bg-hover);
color: var(--text-primary);
box-shadow: inset 2px 0 0 var(--border-strong);
}
/* Structured Empty State Component */
.table-empty,
.empty-cell {
text-align: center !important;
padding: 48px 24px !important;
color: var(--text-secondary);
}
.empty-cell-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 auto;
max-width: 440px;
}
.empty-cell-icon {
font-size: 32px;
color: var(--text-tertiary);
margin-bottom: 4px;
}
.empty-cell-title {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.empty-cell-desc {
font-size: 13px;
color: var(--text-tertiary);
line-height: 1.5;
margin: 0;
}
/* Skeleton Loading Rows */
.table-skeleton-row td {
padding: 16px;
}
.skeleton-bar {
height: 14px;
background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-hover) 50%, var(--bg-elevated) 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
border-radius: 4px;
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Table Toolbar Standard */
.table-toolbar,
.admin-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
}
.role-badge {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
}
.role-admin { color: var(--text-primary); }
.role-user { color: var(--text-secondary); }
/* Status persetujuan akun mahasiswa (Panel Admin → Manajemen User) */
.status-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.status-pending { color: var(--text-secondary); }
.status-approved { color: var(--text-primary); }
.status-rejected { color: var(--text-tertiary); }
.status-unknown { color: var(--text-tertiary); }
/* Indikator kehadiran pengguna (Panel Admin → Manajemen User)
Dot hijau = online (last_seen ≤ 5 menit) dengan animasi pulsing blink, merah = offline. */
.user-presence-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-left: 6px;
vertical-align: middle;
flex-shrink: 0;
position: relative;
}
.dot-online {
background-color: #0fcc45;
}
.dot-online::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #0fcc45;
opacity: 0.7;
border-radius: 50%;
animation: blink 1.2s linear infinite;
pointer-events: none;
}
.dot-offline {
background-color: #ef4444;
}
/* Utilitas indikator online/offline bila dipakai di luar tabel */
.online-indicator {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 6px;
background-color: #0fcc45;
border-radius: 50%;
position: relative;
vertical-align: middle;
}
.online-indicator.offline {
background-color: #ef4444;
}
.online-indicator .blink {
display: block;
width: 100%;
height: 100%;
background-color: inherit;
opacity: 0.7;
border-radius: 50%;
animation: blink 1.2s linear infinite;
}
@keyframes blink {
100% {
transform: scale(2, 2);
opacity: 0;
}
}
/* Badge status jaringan mahasiswa - penjelas sebab-akibat perubahan status */
.net-badge {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 6px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
vertical-align: middle;
cursor: help;
}
.net-online {
color: var(--text-secondary);
}
.net-offline {
color: var(--text-tertiary);
}
/* --- Progress Pengerjaan Mahasiswa (tab Progress) --- */
.progress-cell {
display: flex;
align-items: center;
gap: 8px;
min-width: 150px;
}
.progress-cell-bar {
flex: 1;
height: 8px;
min-width: 70px;
border-radius: 999px;
background: var(--border-subtle, rgba(255, 255, 255, 0.08));
overflow: hidden;
}
.progress-cell-fill {
height: 100%;
border-radius: 999px;
background: var(--color-secondary);
transition: width 0.4s ease;
}
.progress-cell-fill.status-approved { background: var(--color-secondary); }
.progress-cell-fill.status-rejected { background: var(--color-error); }
.progress-cell-fill.status-unknown { background: var(--text-tertiary); }
.progress-cell-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-tertiary);
white-space: nowrap;
}
.progress-cell-stage {
display: block;
font-size: 0.7rem;
font-weight: 500;
color: var(--text-tertiary);
white-space: nowrap;
margin-top: 2px;
}
/* Body pesan modal konfirmasi persetujuan akun */
.approval-confirm-body {
padding: 0 1.5rem 1.25rem;
color: var(--text-secondary, #8b949e);
font-size: 0.92rem;
line-height: 1.6;
}
/* Peringatan: akun mahasiswa tanpa data status (backend versi lama) */
.approval-warning {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 1rem;
padding: 12px 14px;
border-radius: 10px;
background: rgba(210, 153, 34, 0.1);
border: 1px solid rgba(210, 153, 34, 0.35);
color: var(--text-primary, #F0F4F3);
font-size: 0.85rem;
line-height: 1.5;
}
.approval-warning i { color: var(--text-secondary); margin-top: 2px; }
.approval-warning code {
background: rgba(139, 148, 158, 0.15);
padding: 1px 5px;
border-radius: 4px;
font-size: 0.8em;
}
/* Segmen tabel Manajemen User - mahasiswa dipisah dari asisten & admin agar
validasi data lebih mudah (tiap segmen punya kolom yang relevan) */
.user-segment {
margin-bottom: 1.5rem;
border: 1px solid var(--border-card);
border-radius: var(--radius-md, 12px);
background: var(--bg-card);
padding: 1rem 1.25rem;
animation: fadeIn 0.25s ease;
}
.user-segment:last-child {
margin-bottom: 0;
}
.user-segment-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 1rem;
}
.user-segment-title {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.user-segment-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
border-radius: 10px;
}
.user-segment-title h4 {
margin: 0;
font-size: 0.98rem;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.user-segment-title p {
margin: 2px 0 0;
font-size: 0.8rem;
color: var(--text-secondary);
}
.user-segment-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
padding: 1px 9px;
font-size: 11px;
font-weight: 700;
color: var(--text-secondary);
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: 999px;
}
@media (max-width: 560px) {
.user-segment { padding: 0.85rem 0.9rem; }
.user-segment-head { align-items: flex-start; }
}
/* Tombol setujui akun (ikon centang hijau) */
.btn-approve-user { color: #4F8A72; border-color: rgba(79, 138, 114, 0.4); }
.btn-approve-user:hover { background: rgba(79, 138, 114, 0.12); color: #4F8A72; }
.btn-reject-user { color: var(--danger, #E64833); }
/* Kartu "Akun Menunggu Persetujuan" - aksi validasi di atas tabel Manajemen User */
.approval-card {
margin-bottom: 1.25rem;
border: 1px solid rgba(201, 138, 61, 0.35);
background: rgba(201, 138, 61, 0.05);
border-radius: var(--radius-md, 12px);
padding: 1rem 1.25rem;
animation: fadeIn 0.25s ease;
}
.approval-card-head { margin-bottom: 0.75rem; }
.approval-card-title {
display: flex;
align-items: center;
gap: 12px;
}
.approval-card-icon {
width: 42px;
height: 42px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
color: var(--text-secondary);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 50%;
}
.approval-card-title h4 { margin: 0; font-size: 0.98rem; color: var(--text-primary); }
.approval-card-title h4 strong { color: var(--text-primary); }
.approval-card-title p { margin: 2px 0 0; font-size: 0.8rem; color: var(--text-secondary); }
.approval-list { display: flex; flex-direction: column; gap: 8px; }
.approval-item {
display: flex;
align-items: center;
gap: 12px;
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--radius-sm, 10px);
padding: 10px 14px;
}
.approval-avatar {
width: 38px;
height: 38px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
color: var(--brand-indigo);
background: rgba(36, 72, 85, 0.12);
border-radius: 50%;
}
.approval-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.approval-info strong { font-size: 0.9rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approval-meta { font-size: 0.76rem; color: var(--text-tertiary); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.approval-actions { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 560px) {
.approval-item { flex-wrap: wrap; }
.approval-actions { width: 100%; justify-content: flex-end; }
}
/* ==========================================================================
LAYAR "MENUNGGU PERSETUJUAN" - akun mahasiswa yang belum disetujui Admin
========================================================================== */
.pending-approval-screen {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 24px 0 8px;
}
.pending-card {
width: 100%;
max-width: 560px;
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 36px 32px;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
animation: fadeIn 0.3s ease;
}
.pending-card-icon {
width: 72px;
height: 72px;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: var(--text-secondary);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 50%;
}
.pending-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-secondary);
}
.pending-title {
margin: 10px 0 8px;
font-size: clamp(20px, 3vw, 26px);
color: var(--text-primary);
}
.pending-desc {
margin: 0 auto 22px;
max-width: 46ch;
color: var(--text-secondary);
font-size: 0.92rem;
line-height: 1.65;
}
.pending-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
text-align: left;
margin-bottom: 18px;
}
.pending-info-item {
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: 12px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.pending-info-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.72rem;
color: var(--text-tertiary);
}
.pending-info-item strong {
font-size: 0.95rem;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pending-status-text {
color: var(--text-secondary) !important;
letter-spacing: 0.06em;
}
.pending-note {
display: flex;
gap: 10px;
align-items: flex-start;
text-align: left;
padding: 12px 14px;
margin-bottom: 18px;
border-radius: 12px;
border: 1px dashed var(--border-strong);
background: rgba(36, 72, 85, 0.06);
color: var(--text-secondary);
font-size: 0.82rem;
line-height: 1.55;
}
.pending-note i {
color: var(--brand-indigo);
margin-top: 2px;
flex-shrink: 0;
}
.pending-actions {
display: flex;
flex-direction: column;
gap: 10px;
}
@media (max-width: 520px) {
.pending-info-grid { grid-template-columns: 1fr; }
.pending-card { padding: 28px 20px; }
}
.action-btns {
display: flex;
gap: 6px;
align-items: center;
}
.action-btns-center {
justify-content: center;
}
.text-center {
text-align: center !important;
}
.btn-icon {
width: 30px;
height: 30px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-strong);
background: var(--bg-base);
color: var(--text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.btn-icon:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.btn-icon.btn-danger:hover {
background: rgba(230, 72, 51, 0.2);
color: var(--accent-rose);
border-color: var(--accent-rose);
}
/* Tombol ikon hapus (merah) di kolom aksi */
.btn-icon.btn-icon-danger {
border-color: rgba(230, 72, 51, 0.4);
color: var(--accent-rose, #E64833);
}
.btn-icon.btn-icon-danger:hover {
background: rgba(230, 72, 51, 0.18);
color: var(--accent-rose, #E64833);
border-color: var(--accent-rose, #E64833);
}
/* Stats Cards Grid for Admin */
.admin-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 20px;
}
.admin-stat-card {
display: flex;
align-items: center;
gap: 16px;
padding: 18px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
}
.stat-icon {
width: 42px;
height: 42px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.icon-indigo,
.icon-emerald,
.icon-cyan,
.icon-amber {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
}
.stat-info { display: flex; flex-direction: column; }
.stat-label { font-size: 12px; color: var(--text-tertiary); }
.stat-value { font-size: 20px; font-weight: 700; }
/* Modal & Forms */
.modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal-card {
background: var(--bg-surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
width: 100%;
max-width: 480px;
padding: 24px;
box-shadow: var(--box-shadow-modal);
}
/* Modal Sesi - lebar & tinggi dinamis mengikuti ukuran layar monitor */
.modal-sesi-overlay {
overflow-y: auto;
}
.modal-sesi {
width: min(760px, 94vw);
max-width: none; /* override max-width:480px bawaan modal-card */
max-height: calc(100vh - 40px);
display: flex;
flex-direction: column;
}
.modal-sesi .modal-header {
flex: none;
}
.modal-sesi .admin-form {
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 8px;
}
@media (max-width: 520px) {
.modal-sesi-overlay {
padding: 12px;
}
.modal-sesi {
width: 100%;
max-height: calc(100vh - 24px);
padding: 16px;
}
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.modal-close-btn {
background: none;
border: none;
color: var(--text-tertiary);
font-size: 24px;
cursor: pointer;
}
.admin-form {
display: flex;
flex-direction: column;
gap: 14px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
text-align: left;
width: 100%;
}
.form-group label {
font-size: 12.5px;
font-weight: 600;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 6px;
margin: 0;
}
.form-group input, .form-group select {
box-sizing: border-box;
width: 100%;
height: 38px;
padding: 0 12px;
background-color: var(--bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 13.5px;
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.form-group select {
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23ABA396' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px 14px;
padding-right: 36px !important;
}
.form-group input:focus, .form-group select:focus {
border-color: var(--brand-indigo);
box-shadow: 0 0 0 3px var(--brand-indigo-glow);
background-color: var(--bg-surface);
}
.code-textarea {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
background: var(--bg-editor);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.6;
outline: none;
resize: vertical;
scrollbar-width: thin;
scrollbar-color: var(--border-strong) transparent;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.code-textarea:focus {
border-color: var(--brand-indigo);
box-shadow: 0 0 0 3px var(--brand-indigo-glow);
}
.code-textarea::-webkit-scrollbar { width: 7px; height: 7px; }
.code-textarea::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.code-textarea::-webkit-scrollbar-track { background: transparent; }
/* --- Modal Tambah/Edit Pengguna - profesional & rapi --- */
.modal-user-card {
width: min(600px, 94vw);
max-width: none;
max-height: calc(100vh - 40px);
overflow-y: auto;
overscroll-behavior: contain;
animation: modal-pop 0.18s ease-out;
}
@keyframes modal-pop {
from { opacity: 0; transform: translateY(10px) scale(0.98); }
to { opacity: 1; transform: none; }
}
.modal-title-wrap h3 { margin: 0; font-size: 17px; }
.modal-subtitle { margin: 3px 0 0; font-size: 12.5px; color: var(--text-tertiary); }
.form-section {
border: 1px solid var(--color-border);
background: var(--bg-surface);
border-radius: var(--radius-md);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.form-section-head {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--color-divider);
}
.form-section-head > i {
width: 30px; height: 30px;
border-radius: var(--radius-sm);
background: var(--brand-indigo);
color: #fff;
font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
}
.form-section-head strong { display: block; font-size: 13px; color: var(--text-primary); }
.form-section-head small { display: block; font-size: 11.5px; color: var(--text-tertiary); }
.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
align-items: start;
}
.grid-span-2 { grid-column: 1 / -1; }
.password-wrap {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.password-wrap input {
width: 100%;
padding-right: 40px !important;
}
.password-toggle {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
border: none;
background: none;
color: var(--text-tertiary);
border-radius: var(--radius-sm);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color var(--transition-fast), background var(--transition-fast);
}
.password-toggle:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.role-badge-card {
display: flex;
align-items: center;
gap: 12px;
border: 1px solid var(--border-strong);
background: var(--bg-base);
border-radius: var(--radius-md);
padding: 10px 14px;
}
.role-badge-icon {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
font-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
}
.role-badge-card strong { display: block; font-size: 13.5px; color: var(--text-primary); }
.role-badge-card small { display: block; font-size: 11.5px; color: var(--text-tertiary); margin-top: 1px; }
@media (max-width: 560px) {
.form-grid { grid-template-columns: 1fr; }
.modal-user-card { padding: 18px; }
}
/* Sel ringkas rekap per level (jumlah soal · rata-rata nilai) pada Rekap per Kelas */
.level-recap-cell {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
font-size: 11.5px;
color: var(--text-secondary);
white-space: nowrap;
}
/* Modal Context Sintaks - lebih lebar agar editor kode & daftar pilar lega */
/* Form Context Sintaks INLINE (bukan modal) - panel yang muncul di bawah toolbar */
.snippet-inline-form {
background: var(--bg-elevated);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
margin: 14px 0;
padding: 18px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
animation: snippetInlineIn 0.18s ease-out;
}
@keyframes snippetInlineIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.snippet-inline-form-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-subtle);
}
.snippet-inline-form .admin-form {
padding: 0;
background: transparent;
border: none;
box-shadow: none;
}
.snippet-inline-form .form-actions {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--border-subtle);
}
.modal-snippet-card {
width: min(1120px, 96vw);
max-width: none;
scrollbar-width: thin; /* Firefox */
scrollbar-color: rgba(127, 137, 146, 0.22) transparent;
}
.modal-snippet-card::-webkit-scrollbar { width: 8px; }
.modal-snippet-card::-webkit-scrollbar-thumb { background: rgba(127, 137, 146, 0.16); border-radius: 4px; }
.modal-snippet-card::-webkit-scrollbar-thumb:hover { background: rgba(127, 137, 146, 0.30); }
.modal-snippet-card::-webkit-scrollbar-track { background: transparent; }
.modal-snippet-card .code-textarea {
font-size: 12.5px;
}
@media (max-width: 560px) {
.modal-snippet-card { padding: 18px; }
}
/* --- UI Pengaturan Waktu Sesi (Jam Mulai / Selesai WIT + Tanggal Berakhir) --- */
.sesi-time-set {
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
.sesi-time-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.sesi-time-head label {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 6px;
}
.sesi-preset-chips {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.preset-chip-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--text-tertiary);
}
.preset-chip {
border: 1px solid var(--border-strong);
background: var(--bg-surface);
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 11px;
padding: 3px 10px;
border-radius: 999px;
cursor: pointer;
transition: var(--transition);
}
.preset-chip:hover {
border-color: var(--brand-indigo);
color: var(--brand-indigo);
background: var(--brand-indigo-glow);
}
.preset-chip.active {
border-color: var(--brand-indigo);
color: #fff;
background: var(--brand-indigo);
}
.sesi-time-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 10px;
}
.sesi-time-arrow {
color: var(--text-muted);
font-size: 13px;
text-align: center;
}
.sesi-time-field {
display: flex;
align-items: center;
gap: 10px;
background: var(--bg-elevated);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
padding: 8px 12px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sesi-time-field:focus-within {
border-color: var(--brand-indigo);
box-shadow: 0 0 0 3px var(--brand-indigo-glow);
}
.sesi-time-field.invalid {
border-color: rgba(230, 72, 51, 0.55);
box-shadow: 0 0 0 3px rgba(230, 72, 51, 0.12);
}
.sesi-time-icon {
color: var(--brand-cyan);
font-size: 13px;
width: 16px;
text-align: center;
flex: none;
}
.sesi-time-input-wrap {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
gap: 1px;
}
.sesi-time-input-wrap input[type="time"] {
background: transparent;
border: none;
outline: none;
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 16px;
font-weight: 600;
padding: 0;
width: 100%;
}
.sesi-time-label {
font-size: 10px;
color: var(--text-tertiary);
letter-spacing: 0.3px;
}
.sesi-valid-msg {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--text-tertiary);
min-height: 16px;
transition: color 0.15s ease;
}
.sesi-valid-msg.ok { color: var(--accent-emerald); }
.sesi-valid-msg.bad { color: var(--accent-rose); }
/* Preview ringkasan jadwal live */
.sesi-preview {
display: flex;
align-items: center;
gap: 12px;
background: var(--bg-elevated);
border: 1px dashed var(--border-strong);
border-radius: var(--radius-md);
padding: 12px 14px;
transition: border-color 0.15s ease, background 0.15s ease;
}
.sesi-preview.ok {
border-color: rgba(79, 138, 114, 0.45);
background: rgba(79, 138, 114, 0.06);
}
.sesi-preview.bad {
border-color: rgba(230, 72, 51, 0.5);
background: rgba(230, 72, 51, 0.06);
}
.sesi-preview-icon {
width: 34px;
height: 34px;
flex: none;
border-radius: var(--radius-sm);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
display: flex;
align-items: center;
justify-content: center;
color: var(--brand-cyan);
font-size: 14px;
}
.sesi-preview-body {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.sesi-preview-body strong {
font-size: 13px;
color: var(--text-primary);
font-family: var(--font-mono);
word-break: break-word;
}
.sesi-preview-body span {
font-size: 11px;
color: var(--text-tertiary);
}
.sesi-preview-badge {
flex: none;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--text-tertiary);
white-space: nowrap;
}
.sesi-preview.ok .sesi-preview-badge {
color: var(--text-primary);
}
.sesi-preview.bad .sesi-preview-badge {
color: var(--text-tertiary);
}
/* Picker jam/tanggal native ikut tema aplikasi */
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="date"],
[data-theme="navy"] input[type="time"],
[data-theme="navy"] input[type="date"],
[data-theme="chatgpt-dark"] input[type="time"],
[data-theme="chatgpt-dark"] input[type="date"],
[data-theme="sakura"] input[type="time"],
[data-theme="sakura"] input[type="date"] { color-scheme: dark; }
[data-theme="light"] input[type="time"], [data-theme="light"] input[type="date"],
[data-theme="minimal"] input[type="time"], [data-theme="minimal"] input[type="date"],
[data-theme="chatgpt"] input[type="time"], [data-theme="chatgpt"] input[type="date"],
[data-theme="sakura-light"] input[type="time"], [data-theme="sakura-light"] input[type="date"] { color-scheme: light; }
/* --- Picker Bahasa Sesi (multi-select) --- */
.sesi-lang-picker {
display: flex;
flex-wrap: wrap;
gap: 8px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 12px;
}
.sesi-lang-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 12px;
background: var(--bg-surface);
border: 1px solid var(--border-strong);
border-radius: 999px;
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
user-select: none;
transition: var(--transition);
}
.sesi-lang-chip:hover {
border-color: var(--brand-indigo);
color: var(--text-primary);
}
.sesi-lang-chip input[type="checkbox"] {
accent-color: var(--brand-indigo);
width: 14px;
height: 14px;
cursor: pointer;
}
.sesi-lang-chip:has(input:checked) {
border-color: var(--brand-indigo);
background: var(--brand-indigo-glow);
color: var(--text-primary);
font-weight: 600;
}
@media (max-width: 520px) {
.sesi-time-grid {
grid-template-columns: 1fr;
}
.sesi-time-arrow {
transform: rotate(90deg);
}
}
.form-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 10px;
}
/* --- Modern & Professional Auth Modal (Login / Register) --- */
.auth-modal-card {
background: var(--bg-surface);
border: 1px solid var(--border-strong);
border-radius: 20px;
padding: 32px 36px;
width: min(440px, 92vw);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05);
position: relative;
animation: authModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes authModalPop {
from { opacity: 0; transform: translateY(12px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-modal-close {
position: absolute;
top: 18px;
right: 18px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-subtle);
color: var(--text-tertiary);
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 20px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.auth-modal-close:hover {
background: var(--bg-hover);
color: var(--text-primary);
transform: rotate(90deg);
}
.auth-card-header {
text-align: center;
margin-bottom: 24px;
}
.auth-brand-badge {
width: 52px;
height: 52px;
margin: 0 auto 14px;
border-radius: 14px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 6px;
}
.auth-brand-logo {
width: 100%;
height: 100%;
object-fit: contain;
}
.auth-title {
font-size: 1.45rem;
font-weight: 800;
color: var(--text-primary);
margin: 0 0 4px;
letter-spacing: -0.02em;
}
.auth-subtitle {
font-size: 0.85rem;
color: var(--text-tertiary);
margin: 0;
line-height: 1.45;
}
/* Segmen Tab Switcher */
.auth-tab-segment {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: 12px;
padding: 4px;
margin-bottom: 24px;
}
.auth-tab-item {
background: transparent;
border: none;
padding: 9px 12px;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.2s ease;
}
.auth-tab-item:hover {
color: var(--text-primary);
}
.auth-tab-item.active {
background: var(--bg-elevated);
color: var(--brand-cyan);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* Form Input Group */
.auth-form-body {
display: flex;
flex-direction: column;
gap: 14px;
}
.auth-input-group {
display: flex;
flex-direction: column;
gap: 6px;
text-align: left;
}
.auth-input-group label {
font-size: 12.5px;
font-weight: 600;
color: var(--text-secondary);
margin: 0;
display: flex;
align-items: center;
gap: 6px;
}
.auth-input-wrapper {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.auth-input-wrapper .input-icon {
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
color: var(--text-tertiary);
font-size: 14px;
pointer-events: none;
transition: color var(--transition-fast);
}
.auth-input-wrapper input,
.auth-input-wrapper select.auth-select {
box-sizing: border-box;
width: 100%;
height: 44px;
background-color: var(--bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 0 40px 0 38px;
font-size: 13.5px;
color: var(--text-primary);
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.auth-input-wrapper select.auth-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23ABA396' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 14px 14px;
}
[data-theme="light"] .auth-input-wrapper select.auth-select,
[data-theme="minimal"] .auth-input-wrapper select.auth-select,
[data-theme="chatgpt"] .auth-input-wrapper select.auth-select,
[data-theme="sakura-light"] .auth-input-wrapper select.auth-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%235C554B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}
.auth-input-wrapper input:focus,
.auth-input-wrapper select.auth-select:focus {
border-color: var(--brand-indigo);
box-shadow: 0 0 0 3px var(--brand-indigo-glow);
background-color: var(--bg-surface);
}
.auth-input-wrapper input:focus ~ .input-icon {
color: var(--brand-indigo);
}
.toggle-password-btn {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
background: none;
border: none;
color: var(--text-tertiary);
cursor: pointer;
font-size: 14px;
border-radius: var(--radius-sm);
display: inline-flex;
align-items: center;
justify-content: center;
transition: color var(--transition-fast), background var(--transition-fast);
}
.toggle-password-btn:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.auth-input-hint {
font-size: 11.5px;
color: var(--text-tertiary);
margin-top: 3px;
line-height: 1.4;
}
/* Tombol Submit Utama */
.auth-submit-btn {
box-sizing: border-box;
height: 44px;
padding: 0 24px;
border-radius: var(--radius-sm);
font-size: 14.5px;
font-weight: 700;
background: var(--color-primary);
color: #ffffff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 6px;
box-shadow: 0 6px 18px rgba(36, 72, 85, 0.28);
transition: all 0.2s ease;
}
.auth-submit-btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(53, 30, 28, 0.22);
background: var(--color-primary-dark);
}
.auth-submit-btn:active {
transform: translateY(0);
}
/* Language Cards in Admin */
.code-preview-cell { max-width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
/* --- Filter Bahasa & Hapus Bahasa Secara Keseluruhan (khusus Admin) --- */
.lang-filter-toolbar .search-box { max-width: 340px; }
/* ==========================================================================
11. Layout Alignment & Bugfixes (menyamakan CSS dengan struktur HTML aktual)
========================================================================== */
/* --- Editor Section Layout & VS Code Explorer Side-by-Side Simulator --- */
.editor-section {
width: 100%;
margin-bottom: 24px;
}
.editor-section-split {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.editor-section-split.has-explorer {
grid-template-columns: 1fr 340px;
}
@media (max-width: 992px) {
.editor-section-split.has-explorer {
grid-template-columns: 1fr;
}
}
/* --- Viewport-Fit Layout for Welcome, Practice, and Exam Views --- */
@media (min-height: 480px) {
body:has(#welcome-view.active),
body:has(#practice-view.active),
body:has(#exam-view.active),
body.practice-active {
height: 100vh;
height: 100dvh;
overflow: hidden;
}
body:has(#welcome-view.active) .app-layout,
body:has(#practice-view.active) .app-layout,
body:has(#exam-view.active) .app-layout,
body.practice-active .app-layout {
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
overflow: hidden;
display: flex;
flex-direction: column;
}
body:has(#welcome-view.active) .app-footer,
body:has(#practice-view.active) .app-footer,
body:has(#exam-view.active) .app-footer {
display: none;
}
body:has(#welcome-view.active) .top-nav,
body:has(#practice-view.active) .top-nav,
body:has(#exam-view.active) .top-nav,
body.practice-active .top-nav {
flex: 0 0 auto;
height: 64px;
margin-top: 0;
}
body:has(#welcome-view.active) .content-area,
body:has(#practice-view.active) .content-area,
body:has(#exam-view.active) .content-area,
body.practice-active .content-area {
flex: 1 1 auto;
min-height: 0;
padding-top: 8px;
padding-bottom: 8px;
display: flex;
flex-direction: column;
overflow: hidden;
}
body:has(#welcome-view.active) #welcome-view.active {
flex: 1 1 auto;
min-height: 0;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
body:has(#practice-view.active) #practice-view.active,
body.practice-active #practice-view.active {
flex: 1 1 auto;
min-height: 0;
height: 100%;
display: flex;
flex-direction: column;
gap: clamp(8px, 1.1vh, 14px);
overflow: hidden;
}
body:has(#practice-view.active) .mode-toggle-section,
body.practice-active .mode-toggle-section {
flex: 0 0 auto;
margin-bottom: 0;
}
body:has(#practice-view.active) .mode-chip,
body.practice-active .mode-chip {
padding: 5px 14px;
font-size: 12px;
}
body:has(#practice-view.active) .toolbar-section,
body.practice-active .toolbar-section {
flex: 0 0 auto;
padding: 7px 16px;
}
body:has(#practice-view.active) .stats-grid,
body.practice-active .stats-grid {
flex: 0 0 auto;
gap: clamp(8px, 1vw, 14px);
}
body:has(#practice-view.active) .stat-card,
body.practice-active .stat-card {
min-height: auto;
padding: 8px 14px;
}
body:has(#practice-view.active) .stat-value,
body.practice-active .stat-value {
font-size: clamp(20px, 1.8vw, 26px);
margin: 2px 0;
}
body:has(#practice-view.active) .editor-section,
body.practice-active .editor-section {
flex: 1 1 auto;
min-height: 0;
height: 100%;
margin-bottom: 0;
}
body:has(#practice-view.active) .editor-section-split,
body.practice-active .editor-section-split {
height: 100%;
min-height: 0;
}
body:has(#practice-view.active) .editor-window,
body.practice-active .editor-window {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
}
body:has(#practice-view.active) .vscode-explorer-panel,
body.practice-active .vscode-explorer-panel {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
}
body:has(#practice-view.active) .app-footer,
body:has(#exam-view.active) .app-footer,
body.practice-active .app-footer {
display: none;
}
}
.vscode-explorer-panel {
background: var(--bg-editor);
border: 1px solid var(--border-editor);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
display: flex;
flex-direction: column;
height: 100%;
min-height: 290px;
animation: fadeInSlideRight 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fadeInSlideRight {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
.explorer-header {
background: var(--bg-surface);
border-bottom: 1px solid var(--border-subtle);
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
}
.explorer-title {
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 700;
color: var(--text-secondary);
letter-spacing: 0.05em;
display: flex;
align-items: center;
gap: 8px;
}
.explorer-status-badge {
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 600;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 6px;
}
.explorer-status-badge.status-error {
color: var(--text-tertiary);
}
.explorer-status-badge.status-success {
color: var(--text-primary);
}
.explorer-body {
padding: 16px;
flex: 1;
overflow-y: auto;
background: transparent;
}
.explorer-tree {
display: flex;
flex-direction: column;
gap: 6px;
font-family: var(--font-mono);
font-size: 0.85rem;
}
.tree-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.04);
color: var(--text-primary);
transition: all 0.2s ease;
/* Animasi masuk kini opt-in via .is-anim-in (dicegah re-pop pada tiap ketikan) */
}
.tree-item:hover:not(.is-done):not(.is-error-state) {
background: var(--bg-hover);
border-color: var(--border-strong);
color: var(--text-primary);
}
.tree-item.level-indent-1 { margin-left: 0px; }
.tree-item.level-indent-2 { margin-left: 16px; border-left: 2px solid var(--brand-indigo); }
.tree-item.level-indent-3 { margin-left: 32px; border-left: 2px solid var(--brand-cyan); }
.tree-item.is-folder {
color: var(--text-secondary);
font-weight: 600;
}
.tree-item.is-file {
color: var(--text-primary);
}
.tree-item.is-typing-active {
border-color: var(--border-accent);
background: var(--bg-surface);
}
.tree-item.is-error-state {
color: #E64833 !important;
border-color: #E64833 !important;
background: rgba(230, 72, 51, 0.18) !important;
animation: pulseError 0.8s infinite alternate ease-in-out;
}
@keyframes pulseError {
from { box-shadow: 0 0 4px rgba(230, 72, 51, 0.3); }
to { box-shadow: 0 0 14px rgba(230, 72, 51, 0.7); }
}
.tree-item-icon {
font-size: 0.95rem;
width: 18px;
text-align: center;
}
.tree-item-name {
word-break: break-all;
flex: 1;
}
.tree-item-badge {
font-size: 0.68rem;
color: var(--text-tertiary);
font-family: var(--font-mono);
letter-spacing: 0.04em;
}
/* Checklist Explorer seragam (File Name + tahap per level): status selesai/menunggu */
.tree-item.is-done {
background: rgba(79, 138, 114, 0.07);
border-color: rgba(79, 138, 114, 0.18);
}
.tree-item.is-done .tree-item-icon { color: var(--accent-emerald); }
.tree-item.is-pending { opacity: 0.5; }
.tree-item.is-stage .tree-item-icon { color: var(--brand-cyan); }
.explorer-footer {
padding: 10px 16px;
background: var(--bg-surface);
border-top: 1px solid var(--border-subtle);
color: var(--text-tertiary);
font-size: 0.75rem;
}
/* Stage Complete Modal - Tree Preview Box */
.stage-tree-preview-box {
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: 12px;
padding: 14px 16px;
margin: 16px 0;
text-align: left;
}
.stage-tree-head {
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 700;
color: var(--accent-emerald);
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.stage-tree-list {
display: flex;
flex-direction: column;
gap: 6px;
}
/* --- Editor Window (struktur HTML aktual & Visual UI Premium) --- */
.editor-window {
background: var(--bg-editor);
border: 1px solid var(--border-editor);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
position: relative;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.editor-window:hover {
border-color: var(--border-strong);
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
}
.editor-header {
background: var(--bg-surface);
border-bottom: 1px solid var(--border-subtle);
padding: 10px 18px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 14px;
}
.editor-dots {
display: flex;
gap: 7px;
align-items: center;
justify-self: start;
}
.editor-dots .dot {
width: 11px;
height: 11px;
border-radius: 50%;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.editor-dots:hover .dot { opacity: 0.85; }
.editor-dots .dot.red { background: #E64833; box-shadow: 0 0 6px rgba(230, 72, 51, 0.4); }
.editor-dots .dot.yellow { background: #C98A3D; box-shadow: 0 0 6px rgba(201, 138, 61, 0.4); }
.editor-dots .dot.green { background: #4F8A72; box-shadow: 0 0 6px rgba(79, 138, 114, 0.4); }
.editor-title {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: rgba(0, 0, 0, 0.15);
padding: 5px 16px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.06);
justify-self: center;
max-width: 100%;
}
[data-theme="light"] .editor-title, [data-theme="minimal"] .editor-title, [data-theme="chatgpt"] .editor-title, [data-theme="sakura-light"] .editor-title {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.08);
}
.editor-actions {
display: flex;
gap: 10px;
align-items: center;
justify-self: end;
}
.soal-progress-badge {
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 600;
color: var(--text-secondary);
}
.editor-btn {
box-sizing: border-box;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
height: 32px;
padding: 0 12px;
border-radius: var(--radius-sm);
font-size: 12px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all 0.2s ease, transform 0.15s ease;
}
.editor-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
border-color: var(--border-strong);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transform: translateY(-1px);
}
.editor-btn:active {
transform: translateY(0);
}
.editor-body {
position: relative;
display: flex;
flex-direction: column;
padding: 0;
min-height: 0;
flex: 1 1 auto;
height: 100%;
overflow: hidden;
cursor: text;
color: var(--text-primary);
background: var(--bg-editor);
}
/* Scroll vertikal & horizontal ala VS Code: hanya editor yang scroll, gutter nomor baris sticky */
.code-scroll {
flex: 1 1 auto;
min-height: 0;
height: 100%;
display: flex;
overflow-x: auto;
overflow-y: auto;
scrollbar-width: thin;
padding: 18px 24px 20px 0;
}
/* Scrollbar vertikal & horizontal TIPIS & TERLIHAT di editor latihan (Mode Ujian & Belajar) */
.code-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.code-scroll::-webkit-scrollbar-thumb { background: rgba(127, 137, 146, 0.25); border-radius: 4px; }
.code-scroll::-webkit-scrollbar-thumb:hover { background: rgba(127, 137, 146, 0.40); }
.code-scroll::-webkit-scrollbar-track { background: transparent; }
[data-theme="light"] .code-scroll::-webkit-scrollbar-thumb, [data-theme="minimal"] .code-scroll::-webkit-scrollbar-thumb, [data-theme="chatgpt"] .code-scroll::-webkit-scrollbar-thumb, [data-theme="sakura-light"] .code-scroll::-webkit-scrollbar-thumb { background: rgba(36, 72, 85, 0.20); }
[data-theme="light"] .code-scroll::-webkit-scrollbar-thumb:hover, [data-theme="minimal"] .code-scroll::-webkit-scrollbar-thumb:hover, [data-theme="chatgpt"] .code-scroll::-webkit-scrollbar-thumb:hover, [data-theme="sakura-light"] .code-scroll::-webkit-scrollbar-thumb:hover { background: rgba(36, 72, 85, 0.38); }
/* Gutter nomor baris ala VS Code */
.editor-inner {
flex: 0 0 auto;
display: flex;
align-items: stretch;
width: max-content; /* melebar mengikuti isi kode tanpa wrap */
min-width: 100%; /* minimal selebar editor - empty state tetap terpusat */
}
.editor-linenums {
position: sticky;
left: 0;
z-index: 1;
flex-shrink: 0;
width: 52px;
padding: 0 12px 0 0;
text-align: right;
font-family: var(--font-mono);
font-size: 12px;
line-height: calc(18px * 1.85); /* selaras dengan .code-container */
color: var(--text-muted);
background: var(--bg-editor); /* tetap terbaca saat kode digulung ke kanan */
opacity: 0.6;
user-select: none;
}
.editor-linenums .linenum {
display: block;
}
.editor-empty {
height: 100%; /* memenuhi editor agar ikon & teks terpusat sempurna */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 56px 16px;
text-align: center;
color: var(--text-secondary);
font-family: var(--font-ui), sans-serif;
}
.editor-empty i {
font-size: 36px;
color: var(--text-tertiary);
opacity: 0.85;
}
.editor-empty p {
max-width: 420px;
margin: 0;
font-size: 13.5px;
line-height: 1.6;
}
/* Pesan "Belum ada snippet" - terpusat di seluruh editor.
Dipicu class .is-empty (dipasang PracticeView.showEmptyEditor,
dilepas renderCode).
Strategi: sembunyikan code-scroll sepenuhnya, buat editor-body
menjadi flex centering container dengan tinggi tetap, dan tampilkan
.editor-empty sebagai flex-child langsung (bukan nested di code-scroll). */
.editor-body.is-empty {
min-height: 360px;
padding: 0;
justify-content: center;
align-items: center;
}
/* Sembunyikan gutter & scroll wrapper saat kosong */
.editor-body.is-empty .editor-linenums,
.editor-body.is-empty .code-scroll {
display: none;
}
/* .editor-empty menjadi flex-child langsung dari .editor-body */
.editor-body.is-empty .editor-empty {
position: static;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: auto;
padding: 48px 32px;
}
.code-container {
flex: 1 0 auto; /* mengisi sisa lebar saat kosong, tidak menyusut saat kode panjang */
font-family: var(--font-mono);
font-size: 18px;
line-height: 1.85;
letter-spacing: 0.02em;
white-space: pre; /* tanpa wrap - nomor baris selalu selaras, scroll horizontal */
user-select: none;
}
/* Karakter Pengetikan - warna font mengikuti sintaks (ala VS Code) */
.char {
position: relative;
border-radius: 3px;
color: inherit;
transition: color 0.1s ease, background-color 0.1s ease;
}
/* Warna token sintaks per bahasa - Sketch Dark (Chalk & Slate) - kontras tinggi */
.char.tok-keyword { color: #82AAFF; font-weight: 600; }
.char.tok-string { color: #FFAB70; }
.char.tok-number { color: #A8E88C; }
.char.tok-comment { color: #8FAE7F; font-style: italic; opacity: 0.9; }
.char.tok-function { color: #FFD880; }
.char.tok-type { color: #6FE0D0; }
.char.tok-variable { color: #A9E0F8; }
.char.tok-operator { color: #E2DCD0; }
.char.tok-punctuation { color: #A69E90; }
.char.tok-plain { color: #F0EDE4; }
/* Warna token sintaks per bahasa - Sketch Light (Graphite & Draft Paper) - kontras tinggi */
[data-theme="light"] .char.tok-keyword, [data-theme="minimal"] .char.tok-keyword, [data-theme="chatgpt"] .char.tok-keyword, [data-theme="sakura-light"] .char.tok-keyword { color: #1D4E89; font-weight: 600; }
[data-theme="light"] .char.tok-string, [data-theme="minimal"] .char.tok-string, [data-theme="chatgpt"] .char.tok-string, [data-theme="sakura-light"] .char.tok-string { color: #B03A2E; }
[data-theme="light"] .char.tok-number, [data-theme="minimal"] .char.tok-number, [data-theme="chatgpt"] .char.tok-number, [data-theme="sakura-light"] .char.tok-number { color: #1E7A45; }
[data-theme="light"] .char.tok-comment, [data-theme="minimal"] .char.tok-comment, [data-theme="chatgpt"] .char.tok-comment, [data-theme="sakura-light"] .char.tok-comment { color: #47744A; font-style: italic; opacity: 0.9; }
[data-theme="light"] .char.tok-function, [data-theme="minimal"] .char.tok-function, [data-theme="chatgpt"] .char.tok-function, [data-theme="sakura-light"] .char.tok-function { color: #94691F; }
[data-theme="light"] .char.tok-type, [data-theme="minimal"] .char.tok-type, [data-theme="chatgpt"] .char.tok-type, [data-theme="sakura-light"] .char.tok-type { color: #156276; }
[data-theme="light"] .char.tok-variable, [data-theme="minimal"] .char.tok-variable, [data-theme="chatgpt"] .char.tok-variable, [data-theme="sakura-light"] .char.tok-variable { color: #123F68; }
[data-theme="light"] .char.tok-operator, [data-theme="minimal"] .char.tok-operator, [data-theme="chatgpt"] .char.tok-operator, [data-theme="sakura-light"] .char.tok-operator { color: #211E19; }
[data-theme="light"] .char.tok-punctuation, [data-theme="minimal"] .char.tok-punctuation, [data-theme="chatgpt"] .char.tok-punctuation, [data-theme="sakura-light"] .char.tok-punctuation { color: #5A5346; }
[data-theme="light"] .char.tok-plain, [data-theme="minimal"] .char.tok-plain, [data-theme="chatgpt"] .char.tok-plain, [data-theme="sakura-light"] .char.tok-plain { color: #191612; }
/* Status ketikan: belum diketik = "ghost" redup, sudah diketik = warna penuh */
.char.untyped { opacity: 0.45; }
.char.typed { opacity: 1; }
/* Baris terminal L2/L3 (perintah buat file/direktori) tetap terbaca meski belum diketik */
.char.shell-prompt.untyped { opacity: 1; }
.char.shell-cmd.untyped { opacity: 0.95; }
.char.incorrect {
color: var(--code-incorrect) !important;
background-color: var(--code-incorrect-bg);
text-decoration: underline wavy var(--code-incorrect);
}
.char.current {
border-left: 2.5px solid var(--caret-color, #E6AC4B);
box-shadow: -2px 0 8px rgba(230, 172, 75, 0.4);
animation: smooth-caret 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
scroll-margin: 36px 24px;
}
[data-theme="light"] .char.current {
border-left-color: var(--caret-color, #C2412D);
box-shadow: -2px 0 8px rgba(194, 65, 45, 0.35);
}
[data-theme="sakura-light"] .char.current {
border-left-color: var(--caret-color, #B33791);
box-shadow: -2px 0 8px rgba(179, 55, 145, 0.35);
}
[data-theme="chatgpt"] .char.current {
border-left-color: var(--caret-color, #10a37f);
box-shadow: -2px 0 8px rgba(16, 163, 127, 0.30);
}
[data-theme="chatgpt-dark"] .char.current {
border-left-color: var(--caret-color, #10a37f);
box-shadow: -2px 0 8px rgba(16, 163, 127, 0.35);
}
@keyframes smooth-caret {
0%, 100% { opacity: 1; }
50% { opacity: 0.2; }
}
.focus-overlay {
position: absolute;
inset: 0;
background: rgba(11, 13, 18, 0.88);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
cursor: pointer;
transition: all 0.25s ease;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
[data-theme="light"] .focus-overlay, [data-theme="minimal"] .focus-overlay, [data-theme="chatgpt"] .focus-overlay, [data-theme="sakura-light"] .focus-overlay { background: rgba(248, 250, 252, 0.88); }
.focus-overlay .overlay-content {
background: var(--bg-surface);
border: 1px solid var(--border-strong);
padding: 24px 32px;
border-radius: 16px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
transition: transform 0.2s ease;
}
.focus-overlay:hover .overlay-content {
transform: scale(1.02);
}
.overlay-sub { font-size: 12px; color: var(--text-tertiary); }
/* Overlay Kunci Soal - hasil sudah dinilai & dikunci, editor tidak bisa diakses */
.lock-overlay {
position: absolute;
inset: 0;
z-index: 20; /* di atas focus-overlay (10) */
background: rgba(11, 13, 18, 0.92);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
border-radius: var(--radius-lg);
animation: fadeInLock 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fadeInLock {
from { opacity: 0; transform: scale(0.98); }
to { opacity: 1; transform: scale(1); }
}
[data-theme="light"] .lock-overlay, [data-theme="minimal"] .lock-overlay, [data-theme="chatgpt"] .lock-overlay, [data-theme="sakura-light"] .lock-overlay {
background: rgba(248, 250, 252, 0.94);
}
.lock-overlay-content {
background: var(--bg-surface);
border: 1px solid var(--border-strong);
padding: 32px 40px;
border-radius: 20px;
box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05);
text-align: center;
max-width: 460px;
width: 92%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.lock-overlay-icon {
width: 58px;
height: 58px;
border-radius: 18px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
font-size: 26px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
box-shadow: 0 8px 20px rgba(201, 138, 61, 0.2);
}
.lock-overlay-content h3 {
margin: 0 0 8px;
font-size: 1.35rem;
font-weight: 800;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.lock-overlay-content p {
color: var(--text-secondary);
font-size: 0.88rem;
line-height: 1.6;
margin: 0 0 22px;
}
#lock-overlay-home-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 26px;
border-radius: 999px;
font-weight: 700;
font-size: 0.9rem;
margin: 0 auto;
box-shadow: 0 6px 18px rgba(36, 72, 85, 0.28);
}
/* BUGFIX (Level 2 / Soal Terkunci): saat overlay kunci tampil, beri editor tinggi
cukup agar konten overlay (ikon + pesan + tombol) tidak terpotong oleh
.editor-window { overflow: hidden } - kode tahap 1 Level 2 pendek membuat
.editor-body menciut ke min-height 290px sedangkan overlay ~340px. */
.editor-body.lock-active {
min-height: 400px;
}
/* Chip tahap pada judul editor (Level 2/3) - sebelumnya tanpa styling sehingga
header editor tampak berantakan. Chip "Soal Terkunci" memakai varian lock-chip. */
.stage-chip {
font-family: var(--font-ui), sans-serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--brand-cyan);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
padding: 2px 9px;
border-radius: 999px;
white-space: nowrap;
flex-shrink: 0;
}
.stage-chip.lock-chip {
color: var(--text-tertiary);
}
/* Nama file pada judul editor: ellipsis agar judul panjang tidak merusak header */
.editor-title-filename {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.char.newline { color: var(--text-muted); }
.char.space { border-bottom: 1px dashed rgba(255, 255, 255, 0.18); }
[data-theme="light"] .char.space, [data-theme="minimal"] .char.space, [data-theme="chatgpt"] .char.space, [data-theme="sakura-light"] .char.space { border-bottom-color: rgba(15, 23, 42, 0.2); }
/* --- History View --- */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.section-title h2 { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.section-title p { color: var(--text-secondary); font-size: 13px; margin-top: 4px; }
.history-total-text { color: var(--brand-cyan); font-family: var(--font-mono); font-size: 12px; }
.btn-danger-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 38px;
padding: 0 14px;
background: transparent;
border: 1px solid rgba(230, 72, 51, 0.4);
border-radius: var(--radius-sm);
color: var(--accent-rose);
font-size: 13.5px;
font-weight: 600;
line-height: 1;
cursor: pointer;
user-select: none;
white-space: nowrap;
flex: none;
box-sizing: border-box;
}
.btn-danger-ghost:hover { background: rgba(230, 72, 51, 0.12); }
/* Tombol aksi bahaya (hapus) - dipakai tombol Hapus History Progress */
.btn-danger {
background: rgba(230, 72, 51, 0.12);
border: 1px solid rgba(230, 72, 51, 0.45);
color: var(--accent-rose, #E64833);
cursor: pointer;
border-radius: 8px;
padding: 7px 14px;
font-weight: 600;
transition: all 0.15s ease;
}
.btn-danger:hover:not(:disabled) {
background: rgba(230, 72, 51, 0.2);
border-color: var(--accent-rose, #E64833);
}
.btn-danger:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.summary-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-tertiary);
}
.history-table-container {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
overflow: hidden;
}
.history-table-wrap { position: relative; }
.history-level-tag {
font-size: 11px;
color: var(--text-tertiary);
margin-left: 6px;
font-family: var(--font-mono);
}
.modal-dialog {
background: var(--bg-surface);
border: 1px solid var(--border-strong);
border-radius: 20px;
padding: 24px;
width: max-content;
min-width: min(440px, 92vw);
max-width: 92vw;
max-height: calc(100vh - 40px);
overflow-y: auto;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
position: relative;
animation: resultModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes resultModalPop {
from { opacity: 0; transform: translateY(12px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header-badge {
display: flex;
justify-content: center;
margin-bottom: 12px;
}
.modal-header-top .modal-header-badge {
margin-bottom: 0;
}
.trophy-icon {
width: 60px;
height: 60px;
border-radius: 18px;
background: rgba(201, 138, 61, 0.12);
border: 1px solid rgba(201, 138, 61, 0.4);
color: var(--accent-amber);
font-size: 26px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(201, 138, 61, 0.25);
}
.modal-dialog h2 {
text-align: center;
font-size: 1.45rem;
font-weight: 800;
color: var(--text-primary);
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.modal-sub {
text-align: center;
color: var(--text-tertiary);
font-size: 0.86rem;
margin: 0 0 14px;
}
.modal-snippet-title {
text-align: center;
font-family: var(--font-mono);
font-size: 0.82rem;
font-weight: 600;
color: var(--brand-cyan);
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: 999px;
padding: 6px 16px;
margin: 0 auto 20px;
display: table;
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.result-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 16px;
}
.res-box {
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: 12px;
padding: 12px 14px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.res-value {
font-size: 1.5rem;
font-weight: 800;
font-family: var(--font-mono);
color: var(--brand-cyan);
line-height: 1.2;
display: block;
}
.res-label {
font-size: 0.76rem;
font-weight: 600;
color: var(--text-tertiary);
margin-top: 2px;
}
.res-box.highlighted {
border-color: rgba(201, 138, 61, 0.4);
background: rgba(201, 138, 61, 0.08);
}
.res-box.highlighted .res-value {
color: var(--accent-amber);
}
/* --- Admin & misc helpers --- */
.empty-cell {
text-align: center;
color: var(--text-tertiary);
padding: 32px 16px !important;
}
.badge-tag {
font-size: 11px;
color: var(--text-secondary);
font-family: var(--font-mono);
}
.wpm-value { color: var(--text-primary); font-family: var(--font-mono); }
.acc-badge { font-size: 11px; font-family: var(--font-mono); color: var(--text-secondary); }
.acc-high { color: var(--text-primary); }
.acc-medium { color: var(--text-secondary); }
/* Panduan skema pengetikan per level pada form snippet (Level 2/3) */
.snippet-level-guide {
margin: 2px 0 16px;
padding: 10px 12px;
border-radius: var(--radius-sm);
background: rgba(144, 174, 173, 0.06);
border: 1px solid rgba(144, 174, 173, 0.25);
font-size: 12px;
color: var(--text-secondary);
line-height: 1.55;
}
.snippet-guide-head {
color: var(--text-primary);
margin-bottom: 4px;
}
.snippet-guide-head i {
color: var(--caret-color);
margin-right: 4px;
}
.snippet-level-guide p {
margin: 0;
}
.snippet-guide-example {
margin: 8px 0 0;
padding: 8px 10px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid var(--border-subtle);
overflow-x: auto;
font-size: 11px;
line-height: 1.6;
white-space: pre;
}
[data-theme="light"] .snippet-guide-example, [data-theme="minimal"] .snippet-guide-example, [data-theme="chatgpt"] .snippet-guide-example, [data-theme="sakura-light"] .snippet-guide-example {
background: rgba(15, 23, 42, 0.05);
}
/* Pengaturan Jumlah Soal Default per Level (tab Bahasa & Context) */
.settings-soal-card {
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 16px;
margin-bottom: 20px;
}
.settings-soal-head .admin-sub {
margin: 0;
font-size: 12px;
}
.settings-soal-grid,
.sesi-soal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
max-width: 560px;
}
.settings-soal-field,
.sesi-soal-field {
display: flex;
flex-direction: column;
gap: 6px;
background: var(--bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 10px 12px;
}
.settings-soal-field label,
.sesi-soal-field label {
margin: 0;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
}
.settings-soal-field input,
.sesi-soal-field input {
height: 34px;
width: 70px;
box-sizing: border-box;
padding: 0 8px;
font-family: var(--font-mono);
font-size: 13.5px;
text-align: center;
background: var(--bg-elevated);
color: var(--text-primary);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.settings-soal-field input:focus,
.sesi-soal-field input:focus {
border-color: var(--brand-indigo);
box-shadow: 0 0 0 3px var(--brand-indigo-glow);
background: var(--bg-surface);
}
.settings-soal-field .text-tertiary,
.sesi-soal-field .text-tertiary {
font-size: 11.5px;
white-space: nowrap;
}
.sesi-soal-field.disabled-field {
opacity: 0.45;
filter: grayscale(0.6);
pointer-events: none;
user-select: none;
}
/* Waktu Tahap 1 pada riwayat (snippet dua tahap Level 2/3) */
.stage1-time-tag {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
}
/* Nilai Akhir (acuan penilaian praktik) */
.final-score-badge {
display: inline-block;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
min-width: 34px;
text-align: center;
}
.final-score-badge.score-high {
color: var(--text-primary);
}
.final-score-badge.score-mid {
color: var(--text-primary);
}
.final-score-badge.score-low {
color: var(--text-secondary);
}
/* Banner Nilai Akhir di modal hasil */
.res-final-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 16px 0;
padding: 16px 20px;
border-radius: 14px;
background: rgba(201, 138, 61, 0.08);
border: 1px solid rgba(201, 138, 61, 0.35);
}
.res-final-left {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.res-final-icon {
width: 42px;
height: 42px;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 12px;
background: rgba(201, 138, 61, 0.18);
color: var(--accent-amber);
font-size: 19px;
}
.res-final-label {
display: block;
font-weight: 700;
font-size: 0.9rem;
color: var(--text-primary);
}
.res-final-user {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.8rem;
font-weight: 600;
color: var(--accent-amber);
margin: 2px 0;
}
.res-final-user .user-npm-badge {
display: inline-block;
padding: 1px 6px;
border-radius: 4px;
background: rgba(201, 138, 61, 0.15);
border: 1px solid rgba(201, 138, 61, 0.3);
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--accent-amber);
}
.res-final-sub {
display: block;
font-size: 0.76rem;
color: var(--text-tertiary);
margin-top: 1px;
}
.res-final-value {
font-family: var(--font-mono);
font-size: 2.2rem;
font-weight: 800;
line-height: 1;
color: var(--accent-amber);
flex-shrink: 0;
}
.result-details-box {
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: 14px;
padding: 14px 18px;
display: flex;
flex-direction: column;
gap: 10px;
font-size: 0.86rem;
margin-bottom: 20px;
}
.section-title-wrap {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.section-title-wrap h3 { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.margin-top-md { margin-top: 20px; }
.margin-top-sm { margin-top: 12px; }
.divider { border: none; border-top: 1px solid var(--border-subtle); margin: 20px 0; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.color-success { color: var(--accent-emerald); }
.color-amber { color: var(--accent-amber); }
.lang-card.disabled { opacity: 0.55; }
/* --- Toolbar Manajemen Bahasa (Admin Context) --- */
.lang-manager-toolbar {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
background: var(--bg-elevated);
padding: 10px 16px;
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
min-height: 54px;
}
.lang-toolbar-badge {
display: inline-flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid var(--border-subtle);
background: var(--bg-hover);
color: var(--text-secondary);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
flex-shrink: 0;
user-select: none;
}
.lang-toolbar-badge i {
font-size: 13px;
color: var(--brand-primary);
}
.lang-toolbar-list {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
flex: 1;
}
/* Item kartu bahasa pill - simetris, proporsional, rapi */
span.lang-round {
display: inline-flex;
align-items: center;
height: 34px;
padding: 0 4px 0 10px;
gap: 6px;
border-radius: 999px;
border: 1px solid var(--border-subtle);
background: var(--bg-surface);
transition: all 0.2s ease;
user-select: none;
box-sizing: border-box;
}
span.lang-round.is-active {
border-color: rgba(59, 130, 246, 0.38);
background: rgba(59, 130, 246, 0.08);
}
span.lang-round.is-active:hover {
border-color: var(--brand-primary);
background: rgba(59, 130, 246, 0.14);
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}
span.lang-round.is-inactive {
border-color: var(--border-subtle);
background: var(--bg-base);
opacity: 0.65;
}
span.lang-round.is-inactive:hover {
opacity: 0.9;
border-color: var(--border-strong);
}
.lang-label {
font-size: 12.5px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
line-height: 1;
}
span.lang-round.is-active .lang-label {
color: var(--brand-primary);
}
span.lang-round.is-inactive .lang-label {
color: var(--text-tertiary);
}
/* Badge status centang/silang bulat */
.lang-status-dot {
width: 18px;
height: 18px;
min-width: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
color: #ffffff;
line-height: 1;
transition: transform 0.2s ease, background 0.2s ease;
flex-shrink: 0;
}
.lang-status-dot.active {
background: var(--accent-emerald, #10b981);
box-shadow: 0 1px 4px rgba(16, 185, 129, 0.35);
}
.lang-status-dot.inactive {
background: var(--text-tertiary, #94a3b8);
}
button.btn-toggle-lang:hover .lang-status-dot {
transform: scale(1.15);
}
/* --- Icon Picker (Form Bahasa) --- */
.icon-picker-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.icon-picker-preview {
font-family: var(--font-mono);
font-size: 13px;
color: var(--brand-cyan);
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xs);
padding: 4px 10px;
}
.icon-picker-search {
width: 100%;
}
.icon-picker-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 8px;
max-height: 176px;
overflow-y: auto;
padding: 4px;
}
.icon-option {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
font-size: 18px;
color: var(--text-secondary);
cursor: pointer;
transition: var(--transition);
}
.icon-option:hover {
background: var(--bg-hover);
border-color: var(--border-strong);
transform: translateY(-1px);
}
.icon-option.active {
background: var(--brand-indigo-glow);
border-color: var(--brand-indigo);
color: var(--brand-indigo);
box-shadow: 0 0 0 2px var(--brand-indigo-glow);
}
.icon-option.active i {
color: inherit;
}
/* --- Sound Menu (Pengaturan Suara & Profil Switch) --- */
.nav-btn-wrap {
position: relative;
display: flex;
align-items: center;
gap: 4px;
}
/* Kontrol suara/tema sebagai dua tombol seragam dengan jarak proporsional
(bukan split button menempel) agar posisinya rapi & rata */
.nav-btn-wrap > .nav-btn:first-child {
border-radius: var(--radius-sm);
}
.nav-btn-wrap .nav-btn.sound-menu-btn {
width: 36px;
font-size: 12px;
border-radius: var(--radius-sm);
}
/* --- Dropdown Menu System: Sound Menu --- */
.sound-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 280px;
background: var(--bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--border-subtle);
padding: 8px;
z-index: 130;
display: flex;
flex-direction: column;
gap: 6px;
animation: menuFadeIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.sound-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 8px 10px;
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
border-bottom: 1px dashed var(--color-divider);
margin-bottom: 4px;
}
.sound-menu-close {
background: transparent;
border: none;
color: var(--text-tertiary);
font-size: 18px;
line-height: 1;
cursor: pointer;
padding: 2px 4px;
border-radius: 4px;
transition: color var(--transition-fast), background var(--transition-fast);
}
.sound-menu-close:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.sound-menu-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 40px;
padding: 6px 10px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 13px;
text-align: left;
cursor: pointer;
box-sizing: border-box;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.sound-menu-item:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.sound-menu-item.active {
background: var(--bg-elevated);
border-color: var(--color-border);
font-weight: 600;
}
.sound-menu-icon {
width: 18px;
text-align: center;
color: var(--text-secondary);
flex: none;
}
.sound-menu-label {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.sound-menu-label small {
font-size: 11px;
color: var(--text-tertiary);
margin-top: 1px;
}
.profile-check {
margin-left: auto;
color: var(--brand-indigo);
opacity: 0;
transition: opacity 0.15s ease;
}
.sound-menu-item.active .profile-check { opacity: 1; }
.profile-dot {
width: 12px;
height: 12px;
border-radius: 50%;
flex: none;
box-shadow: 0 0 0 2px var(--bg-surface);
}
.profile-blue { background: #3D688E; }
.profile-brown { background: #8C5835; }
.profile-red { background: #C2412D; }
.sound-menu-divider {
border-top: 1px dashed var(--color-divider);
margin: 4px 0;
}
.sound-menu-subhead {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-tertiary);
padding: 6px 10px 2px;
}
/* --- Theme Menu (Pemilih Tema Warna: Dark / Light / Minimal) --- */
.theme-menu-btn {
width: 36px;
font-size: 12px;
border-radius: var(--radius-sm);
}
.theme-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 280px;
background: var(--bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--border-subtle);
padding: 8px;
z-index: 130;
display: flex;
flex-direction: column;
gap: 6px;
animation: menuFadeIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes menuFadeIn {
from { opacity: 0; transform: translateY(-5px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.theme-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 8px 10px;
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
border-bottom: 1px dashed var(--color-divider);
margin-bottom: 4px;
}
.theme-menu-close {
background: transparent;
border: none;
color: var(--text-tertiary);
font-size: 18px;
line-height: 1;
cursor: pointer;
padding: 2px 4px;
border-radius: 4px;
transition: color var(--transition-fast), background var(--transition-fast);
}
.theme-menu-close:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.theme-menu-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 40px;
padding: 6px 10px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 13px;
text-align: left;
cursor: pointer;
box-sizing: border-box;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.theme-menu-item:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.theme-menu-item.active {
background: var(--bg-elevated);
border-color: var(--color-border);
font-weight: 600;
}
.theme-swatch {
width: 28px;
height: 28px;
border-radius: 6px;
border: 1px solid var(--color-border);
flex: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.theme-swatch-dark { background: #161615; color: #E6AC4B; border-color: #3D3A35; }
.theme-swatch-light { background: #F4F0E8; color: #23527C; border-color: #CDC4B5; }
.theme-swatch-minimal{ background: #F5F3EE; color: #181715; border-color: #D0C8B8; }
.theme-swatch-navy { background: #16233A; color: #8AB4D6; border-color: #2C4260; }
.theme-swatch-chatgpt{ background: #ffffff; color: #10a37f; border-color: #e5e5e5; }
.theme-swatch-chatgpt-dark{ background: #212121; color: #10a37f; border-color: #4d4d4f; }
.theme-swatch-sakura { background: #1A0E1A; color: #C562AF; border-color: #4A2E4A; }
.theme-swatch-sakura-light { background: #FDF5FC; color: #B33791; border-color: #E0B8DA; }
.theme-menu-label {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.theme-menu-label strong {
font-size: 13px;
color: var(--text-primary);
}
.theme-menu-label small {
font-size: 11px;
color: var(--text-tertiary);
margin-top: 1px;
}
.theme-check {
margin-left: auto;
color: var(--brand-indigo);
opacity: 0;
transition: opacity 0.15s ease;
}
.theme-menu-item.active .theme-check { opacity: 1; }
.sound-switch {
position: relative;
width: 34px;
height: 18px;
border-radius: 10px;
background: var(--accent-emerald);
transition: background 0.2s ease;
flex: none;
}
.sound-switch .sound-switch-knob {
position: absolute;
top: 2px;
left: 18px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
transition: left 0.2s ease;
}
.sound-switch.off { background: var(--bg-active); }
.sound-switch.off .sound-switch-knob { left: 2px; }
/* Volume slider */
.sound-volume-item { cursor: default; }
.sound-volume-item:hover { background: transparent; }
.sound-volume-control {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
gap: 6px;
}
.sound-volume-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
background: var(--bg-active);
border-radius: 2px;
outline: none;
cursor: pointer;
}
.sound-volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-indigo);
border: 2px solid var(--bg-surface);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
cursor: grab;
transition: transform 0.15s ease;
}
.sound-volume-slider::-webkit-slider-thumb:hover {
transform: scale(1.15);
}
.sound-volume-slider::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brand-indigo);
border: 2px solid var(--bg-surface);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
cursor: grab;
}
.sound-volume-slider::-moz-range-track {
background: var(--bg-active);
border-radius: 2px;
height: 4px;
}
.sound-volume-slider::-moz-range-progress {
background: var(--brand-indigo);
border-radius: 2px;
height: 4px;
}
.sound-volume-value {
font-family: var(--font-mono);
font-size: 11px;
color: var(--brand-cyan);
min-width: 36px;
text-align: right;
flex: none;
}
/* --------------------------------------------------------------------------
97. Blokir Sesi Praktikum (mahasiswa di luar sesi kelasnya)
-------------------------------------------------------------------------- */
.welcome-sesi-block {
margin-top: 24px;
text-align: center;
background: rgba(201, 138, 61, 0.06);
border: 1px solid rgba(201, 138, 61, 0.35);
border-radius: var(--radius-md);
padding: 22px 24px;
max-width: 560px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.welcome-sesi-icon {
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(201, 138, 61, 0.15);
border: 1px solid rgba(201, 138, 61, 0.4);
color: var(--accent-amber);
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
}
.welcome-sesi-block h3 {
font-size: 17px;
font-weight: 700;
color: var(--accent-amber);
}
.welcome-sesi-block p {
color: var(--text-secondary);
font-size: 13px;
max-width: 420px;
}
.welcome-sesi-kelas {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-secondary);
}
.welcome-sesi-kelas strong {
color: var(--text-primary);
font-family: var(--font-mono);
}
/* --------------------------------------------------------------------------
98. Halaman Profil Mahasiswa
-------------------------------------------------------------------------- */
.profile-section {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 640px;
margin: 0 auto;
padding: 12px 0 40px;
}
.profile-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 24px;
}
.profile-info-card {
display: flex;
align-items: center;
gap: 18px;
background: var(--bg-elevated);
}
.profile-avatar {
width: 64px;
height: 64px;
flex: none;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
color: #FFF;
background: var(--brand-indigo);
box-shadow: 0 6px 18px var(--brand-indigo-glow);
}
.profile-info h2 {
font-size: 20px;
font-weight: 700;
margin-bottom: 6px;
}
.profile-meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.profile-username {
font-size: 13px;
color: var(--text-secondary);
font-family: var(--font-mono);
}
.profile-sub {
font-size: 13px;
color: var(--text-tertiary);
line-height: 1.5;
}
.profile-form input:disabled {
opacity: 0.6;
cursor: not-allowed;
}
@media (max-width: 560px) {
.profile-info-card {
flex-direction: column;
text-align: center;
}
.profile-meta {
justify-content: center;
}
}
/* Profile: kelas terkunci saat sesi aktif */
.profile-kelas-locked {
display: flex;
flex-direction: column;
gap: 6px;
}
.profile-kelas-value {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
font-weight: 600;
color: var(--text-secondary);
cursor: not-allowed;
opacity: 0.85;
}
.profile-kelas-value i {
color: var(--accent-warn, #C98A3D);
font-size: 0.85rem;
}
.form-hint-warn {
color: var(--accent-warn, #C98A3D) !important;
opacity: 0.9;
}
.input-disabled {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
}
/* --------------------------------------------------------------------------
99. Welcome / Beranda Landing View
-------------------------------------------------------------------------- */
.badge-role-asisten {
color: var(--text-secondary);
}
.color-asisten {
color: var(--text-secondary);
}
.role-asisten {
color: var(--text-secondary);
}
.form-hint {
font-size: 11px;
color: var(--text-tertiary);
margin-top: 6px;
display: flex;
align-items: center;
gap: 5px;
}
/* Panel aturan role pada form tambah/edit pengguna - rapi & mudah dibaca */
.role-rules {
margin-top: 8px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.role-rules-title {
display: flex;
align-items: center;
gap: 7px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--text-secondary);
}
.role-rules-title i {
color: var(--accent-amber);
font-size: 11px;
}
.role-rules-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.role-rule {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 10px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
}
.rule-icon {
width: 28px;
height: 28px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
flex: none;
margin-top: 1px;
}
.rule-icon-edit {
color: var(--accent-blue);
background: color-mix(in srgb, var(--accent-blue) 14%, transparent);
}
.rule-icon-crown {
color: var(--accent-amber);
background: color-mix(in srgb, var(--accent-amber) 14%, transparent);
}
.rule-icon-user {
color: var(--accent-indigo);
background: color-mix(in srgb, var(--accent-indigo) 14%, transparent);
}
.rule-icon-pending {
color: var(--accent-emerald);
background: color-mix(in srgb, var(--accent-emerald) 14%, transparent);
}
.rule-text {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.rule-title {
display: block;
font-size: 12px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.3;
}
.rule-desc {
display: block;
font-size: 11.5px;
line-height: 1.45;
color: var(--text-secondary);
}
.rule-desc strong {
color: var(--text-primary);
font-weight: 600;
}
:root {
--glass-frost: 0.15;
--glass-saturation: 1.25;
--filter-id: url(#glass-filter-_r_b_);
}
.glass-surface__filter {
pointer-events: none;
opacity: 0;
z-index: -1;
width: 0;
height: 0;
position: absolute;
inset: 0;
}
#welcome-view.active {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: calc(100vh - 120px);
width: 100%;
}
/* Card Beranda - Liquid Glassmorphism Effect */
.welcome-hero {
text-align: center;
padding: 38px 32px;
background: color-mix(in srgb, var(--bg-surface) 75%, hsl(0 0% 0% / var(--glass-frost, 0.15)));
-webkit-backdrop-filter: var(--filter-id, url(#glass-filter)) saturate(var(--glass-saturation, 1.25)) blur(18px);
backdrop-filter: var(--filter-id, url(#glass-filter)) saturate(var(--glass-saturation, 1.25)) blur(18px);
box-shadow:
inset 0 0 2px 1px #ffffff59,
inset 0 0 10px 4px #ffffff26,
inset 0 4px 16px #11111a0d,
inset 0 8px 24px #11111a0d,
inset 0 6px 56px #11111a0d,
0 24px 60px rgba(0, 0, 0, 0.45);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--radius-lg);
position: relative;
z-index: 2;
overflow: hidden;
width: 100%;
max-width: 800px;
margin: 0 auto;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.welcome-hero-icon {
width: 72px;
height: 72px;
margin: 0 auto 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
border-radius: 36px;
background: var(--bg-card);
color: var(--brand-indigo);
box-shadow: 0 8px 24px var(--brand-indigo-glow);
position: relative;
overflow: hidden;
}
/* Logo RPL (assets/logos/logo.png) menutupi ikon saat berhasil dimuat.
Jika file belum ada, onerror menyembunyikan ![]()
sehingga ikon tampil. */
.welcome-hero-icon .welcome-hero-logo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
padding: 0px;
z-index: 1;
}
.welcome-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--text-secondary);
margin-bottom: 16px;
}
.welcome-title {
font-size: clamp(24px, 4vw, 36px);
font-weight: 700;
line-height: 1.25;
margin: 0 0 14px;
}
.welcome-tagline {
max-width: 640px;
margin: 0 auto 28px;
color: var(--text-secondary);
font-size: 15px;
line-height: 1.6;
}
.welcome-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.welcome-cta-btn {
box-sizing: border-box;
height: 44px;
padding: 0 24px;
border-radius: var(--radius-sm);
font-size: 14.5px;
font-weight: 700;
letter-spacing: 0.2px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border: none;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.welcome-cta-btn.btn-primary {
background: var(--brand-indigo);
color: #FFF;
box-shadow: 0 4px 16px var(--brand-indigo-glow);
}
.welcome-cta-btn.btn-primary:hover {
background: var(--color-primary-dark);
transform: translateY(-2px);
box-shadow: 0 8px 22px var(--brand-indigo-glow);
}
.welcome-cta-btn.btn-primary:active {
transform: translateY(0);
}
.welcome-cta-btn.btn-secondary {
background: var(--bg-elevated);
color: var(--text-primary);
border: 1px solid var(--border-strong);
}
.welcome-cta-btn.btn-secondary:hover {
background: var(--bg-hover);
transform: translateY(-2px);
border-color: var(--border-accent);
}
.welcome-cta-btn.btn-secondary:active {
transform: translateY(0);
}
/* Catatan di bawah tombol (guest & blok sesi) - baris sendiri, rapi & seimbang */
.welcome-note {
flex-basis: 100%;
justify-content: center;
font-size: 12.5px;
color: var(--text-tertiary);
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 2px;
}
/* Kartu sapaan - avatar lingkaran, nama besar, badge role, lalu grid capaian */
.welcome-greeting {
margin-top: 28px;
text-align: left;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 22px 24px 20px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
box-shadow: var(--box-shadow-editor);
}
.welcome-greeting-top {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid var(--border-subtle);
}
.welcome-greeting-avatar {
width: 52px;
height: 52px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
border-radius: 50%;
color: var(--brand-indigo);
background: var(--brand-indigo-glow);
border: 1px solid var(--border-accent);
}
.welcome-greeting-id {
min-width: 0;
}
.welcome-greeting-hello {
display: block;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.4px;
color: var(--text-tertiary);
margin-bottom: 2px;
}
.welcome-greeting-name {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.welcome-greeting-name strong {
font-size: 19px;
font-weight: 700;
line-height: 1.3;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Grid capaian - 2x2 kartu statistik yang rapi & profesional */
.welcome-stat-chips {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.welcome-stat-chip {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
padding: 12px 14px;
background: var(--bg-hover);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.welcome-stat-chip:hover {
transform: translateY(-2px);
border-color: var(--border-accent);
background: var(--bg-active);
}
.welcome-stat-chip i {
width: 38px;
height: 38px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
border-radius: var(--radius-sm);
background: var(--brand-indigo-glow);
color: var(--brand-indigo);
}
/* Ikon per metrik - satu warna netral, konsisten */
.welcome-stat-chip.chip-wpm i,
.welcome-stat-chip.chip-trophy i,
.welcome-stat-chip.chip-acc i {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
}
.welcome-stat-info {
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.welcome-stat-info strong {
font-size: 19px;
font-weight: 700;
line-height: 1.2;
color: var(--text-primary);
}
.welcome-stat-info span {
font-size: 12px;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.welcome-empty-hint {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 13px;
color: var(--text-secondary);
background: var(--bg-hover);
border: 1px dashed var(--border-strong);
border-radius: var(--radius-sm);
padding: 12px 14px;
text-align: center;
}
.welcome-empty-hint i {
color: var(--brand-cyan);
}
/* Beranda Admin Panel - ringkasan manajemen praktikum (role admin/asisten) */
.welcome-admin-panel {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--bg-hover);
padding: 14px 16px;
}
.welcome-admin-head {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
}
.welcome-admin-head-icon {
width: 42px;
height: 42px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
border-radius: var(--radius-sm);
color: var(--brand-indigo);
background: var(--brand-indigo-glow);
border: 1px solid var(--border-accent);
}
.welcome-admin-head-text {
min-width: 0;
}
.welcome-admin-head-text h4 {
font-size: 14.5px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 3px;
}
.welcome-admin-head-text p {
font-size: 12.5px;
line-height: 1.55;
color: var(--text-secondary);
margin: 0;
}
.welcome-admin-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.welcome-admin-item {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
padding: 9px 11px;
font-size: 12.5px;
font-weight: 500;
color: var(--text-primary);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.welcome-admin-item i {
width: 26px;
height: 26px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
border-radius: 6px;
color: var(--text-secondary);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
}
.welcome-admin-item span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.welcome-admin-item:hover {
transform: translateY(-1px);
border-color: var(--border-accent);
background: var(--bg-active);
}
@media (max-width: 640px) {
.welcome-hero {
padding: 32px 16px 24px;
}
.welcome-greeting {
padding: 18px 16px 16px;
}
.welcome-greeting-top {
justify-content: center;
}
.welcome-greeting-name {
justify-content: center;
}
.welcome-stat-chips {
grid-template-columns: 1fr; /* kartu capaian bertumpuk di layar kecil */
}
.welcome-stat-chip {
justify-content: center;
}
.welcome-admin-grid {
grid-template-columns: 1fr; /* modul manajemen bertumpuk agar label tak terpotong */
}
}
/* --------------------------------------------------------------------------
100. Pemetaan User & Role (NPM/Kelas, ubah role langsung)
-------------------------------------------------------------------------- */
.form-optional {
font-size: 11px;
color: var(--text-tertiary);
font-weight: 400;
}
.text-tertiary {
color: var(--text-tertiary);
font-size: 11px;
}
/* --------------------------------------------------------------------------
101. Rekap Nilai per Kelas
-------------------------------------------------------------------------- */
.kelas-recap-row {
cursor: pointer;
transition: background 0.12s ease;
}
.kelas-recap-row:hover {
background: var(--bg-hover);
}
.kelas-recap-row.recap-active {
background: var(--brand-indigo-glow);
box-shadow: inset 3px 0 0 var(--brand-indigo);
}
.kelas-recap-row.recap-active td:first-child strong {
color: var(--brand-indigo);
}
/* --------------------------------------------------------------------------
Top Nav - Responsif (menyesuaikan lebar layar monitor)
-------------------------------------------------------------------------- */
@media (max-width: 1180px) {
.brand-tag { display: none; }
.top-nav { gap: 8px; }
}
@media (max-width: 1120px) {
/* Tab cukup ikon (label disembunyikan), badge admin tetap tampil */
.nav-tab { padding: 8px 11px; gap: 6px; }
.nav-tab > span:not(.tab-badge):not(.badge-tag-admin) { display: none; }
.nav-tab .tab-badge { display: none; }
.brand-name { font-size: 17px; }
}
@media (max-width: 720px) {
.brand-info { display: none; }
.btn-auth { padding: 0 10px; max-width: 40px; }
.btn-auth > span,
.btn-auth .user-identity,
.btn-auth .badge-role { display: none; }
.nav-btn { width: 34px; height: 34px; }
.nav-btn-wrap .nav-btn.sound-menu-btn,
.nav-btn-wrap .nav-btn.theme-menu-btn { width: 34px; }
.top-nav { height: 60px; }
}
/* --------------------------------------------------------------------------
Rekap per Level - kartu ringkas + detail hasil per level
-------------------------------------------------------------------------- */
.history-level-grid,
.admin-level-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 16px;
}
.admin-level-grid {
margin-bottom: 4px;
}
.level-recap-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md, 12px);
padding: 18px 20px;
cursor: pointer;
transition: var(--transition);
display: flex;
flex-direction: column;
gap: 16px;
}
.level-recap-card:hover {
border-color: var(--brand-indigo);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.level-recap-card.is-empty {
opacity: 0.55;
cursor: default;
}
.level-recap-card.is-empty:hover {
border-color: var(--border-subtle);
transform: none;
box-shadow: none;
}
.level-card-all {
border-color: var(--brand-indigo);
background: var(--bg-surface);
}
.level-card-all-icon {
color: var(--brand-cyan);
font-size: 15px;
}
.level-card-head {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
padding-bottom: 4px;
}
.level-card-head strong {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
}
.level-card-count {
margin-left: auto;
flex: none;
font-size: 12px;
color: var(--text-tertiary);
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
.level-card-empty {
font-size: 13px;
color: var(--text-tertiary);
padding: 10px 0;
}
.level-card-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 16px;
padding: 2px 0;
}
.level-card-stats > div {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.level-card-stats span {
font-size: 11px;
font-weight: 500;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.level-card-stats strong {
font-size: 17px;
font-weight: 600;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
color: var(--text-primary);
}
/* Warna skor nilai akhir pada kartu level (standalone, tanpa badge) */
.level-card-stats strong.score-high { color: var(--accent-emerald); }
.level-card-stats strong.score-mid { color: var(--accent-amber); }
.level-card-stats strong.score-low { color: var(--accent-rose); }
.level-card-open {
margin-top: auto;
font-size: 12px;
font-weight: 600;
color: var(--brand-indigo);
display: flex;
align-items: center;
gap: 6px;
opacity: 0.85;
transition: opacity 0.15s ease;
}
.level-recap-card:hover .level-card-open {
opacity: 1;
}
.level-recap-empty-msg {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 28px 16px;
color: var(--text-tertiary);
border: 1px dashed var(--border-strong);
border-radius: var(--radius-md);
text-align: center;
}
.level-recap-empty-msg i {
font-size: 26px;
opacity: 0.6;
}
.level-recap-empty-msg p {
font-size: 13px;
}
/* Toolbar detail per level */
.level-detail-toolbar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.level-detail-title {
font-size: 13px;
color: var(--text-secondary);
}
.level-detail-title strong {
color: var(--text-primary);
font-family: var(--font-mono);
}
/* Rekap per Mahasiswa */
.student-recap-toolbar {
margin-bottom: 12px;
justify-content: space-between;
gap: 10px;
}
.student-recap-toolbar .search-box {
max-width: 360px;
}
.student-recap-row {
cursor: pointer;
transition: background 0.12s ease;
}
.student-recap-row:hover {
background: var(--bg-hover);
}
.student-recap-row.student-active {
background: var(--brand-indigo-glow);
box-shadow: inset 3px 0 0 var(--brand-indigo);
}
@media (max-width: 520px) {
.history-level-grid,
.admin-level-grid {
grid-template-columns: 1fr;
}
.student-recap-toolbar {
flex-direction: column;
align-items: stretch;
}
.student-recap-toolbar .search-box {
max-width: none;
}
}
/* ============================================================================
PENJELASAN SINTASKS (mahasiswa) & PENILAIAN (admin/asisten)
============================================================================ */
/* --- Modal penjelasan 7 pilar --- */
.modal-dialog-explanation {
max-width: 680px;
}
.explain-badge {
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
box-shadow: none;
}
/* --- Panel kode yang diketik --- */
/* ============================================================================
Explain Code Panel - VS Code window feel
============================================================================ */
.explain-code-panel {
background: #1e1e2e;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255,255,255,0.04);
display: flex;
flex-direction: column;
}
[data-theme="light"] .explain-code-panel, [data-theme="minimal"] .explain-code-panel, [data-theme="chatgpt"] .explain-code-panel, [data-theme="sakura-light"] .explain-code-panel {
background: var(--bg-elevated);
border-color: rgba(0,0,0,0.12);
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
/* Title bar: dots + tab aktif */
.explain-code-head {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 12px;
background: #16162a;
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: 0 14px;
min-height: 38px;
}
[data-theme="light"] .explain-code-head, [data-theme="minimal"] .explain-code-head, [data-theme="chatgpt"] .explain-code-head, [data-theme="sakura-light"] .explain-code-head {
background: #E9E3DA;
border-bottom-color: rgba(0,0,0,0.08);
}
/* Dots group di dalam head */
.explain-code-head-dots {
display: flex;
gap: 6px;
align-items: center;
}
.explain-code-head-dots .ec-dot {
width: 11px;
height: 11px;
border-radius: 50%;
flex-shrink: 0;
}
.ec-dot-red { background: #E64833; box-shadow: 0 0 5px rgba(230, 72, 51,0.5); }
.ec-dot-yellow { background: #C98A3D; box-shadow: 0 0 5px rgba(201, 138, 61,0.5); }
.ec-dot-green { background: #4F8A72; box-shadow: 0 0 5px rgba(79, 138, 114,0.5); }
/* Tab aktif */
.explain-code-tab {
display: inline-flex;
align-items: center;
gap: 7px;
height: 38px;
padding: 0 14px;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
color: var(--text-primary);
border-bottom: 2px solid var(--brand-indigo);
border-right: 1px solid rgba(255,255,255,0.05);
white-space: nowrap;
background: #1e1e2e;
}
[data-theme="light"] .explain-code-tab, [data-theme="minimal"] .explain-code-tab, [data-theme="chatgpt"] .explain-code-tab, [data-theme="sakura-light"] .explain-code-tab {
color: var(--text-primary);
background: var(--bg-elevated);
border-bottom-color: var(--brand-indigo);
}
.explain-code-tab i {
font-size: 11px;
color: var(--brand-cyan);
opacity: 0.85;
}
/* Kode area */
.explain-code {
margin: 0;
padding: 14px 16px;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.75;
color: var(--text-secondary);
white-space: pre;
background: #1e1e2e;
overflow-x: auto;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.1) transparent;
text-align: left;
counter-reset: line-num;
}
[data-theme="light"] .explain-code, [data-theme="minimal"] .explain-code, [data-theme="chatgpt"] .explain-code, [data-theme="sakura-light"] .explain-code {
color: var(--text-primary);
background: var(--bg-elevated);
}
.explain-code::-webkit-scrollbar { width: 5px; height: 5px; }
.explain-code::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
[data-theme="light"] .explain-code::-webkit-scrollbar-thumb, [data-theme="minimal"] .explain-code::-webkit-scrollbar-thumb, [data-theme="chatgpt"] .explain-code::-webkit-scrollbar-thumb, [data-theme="sakura-light"] .explain-code::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); }
/* --- Bar progres kelengkapan penjelasan --- */
.explanation-progress {
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: 12px;
padding: 10px 14px;
}
.explanation-progress-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.explanation-progress-label {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.82rem;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.explanation-progress-label i {
color: var(--brand-indigo);
}
.explanation-progress-text {
font-size: 0.82rem;
font-weight: 700;
color: var(--brand-cyan);
font-family: var(--font-mono);
}
.explanation-progress-track {
height: 6px;
background: var(--bg-hover);
border-radius: 999px;
overflow: hidden;
}
.explanation-progress-fill {
height: 100%;
width: 0%;
border-radius: 999px;
background: var(--brand-indigo);
transition: width 0.3s ease;
}
.explanation-progress-fill.complete {
background: var(--accent-emerald);
}
.explanation-fields {
display: grid;
gap: 12px;
max-height: 44vh;
overflow-y: auto;
padding: 4px 6px 4px 2px;
text-align: left;
scrollbar-width: thin;
}
.explain-field {
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: 12px;
padding: 12px 14px;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.explain-field:focus-within {
border-color: var(--brand-indigo);
box-shadow: 0 0 0 3px var(--brand-indigo-glow);
}
/* Kartu pilar yang sudah terisi lengkap */
.explain-field.is-filled {
background: rgba(79, 138, 114, 0.05);
border-color: rgba(79, 138, 114, 0.35);
}
/* Pilar kosong / terlalu pendek saat mencoba menyimpan */
.explain-field.is-empty,
.explain-field.is-short {
border-color: rgba(230, 72, 51, 0.55);
box-shadow: 0 0 0 3px rgba(230, 72, 51, 0.12);
}
.explain-field-top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.explain-num {
flex: 0 0 auto;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--bg-hover);
border: 1px solid var(--border-strong);
color: var(--text-secondary);
font-size: 0.75rem;
font-weight: 700;
font-family: var(--font-mono);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
/* Override untuk bugfix: "Kode 01" lebih panjang, pakai pill bukan bulat */
.bugfix-field .explain-num {
width: auto;
height: auto;
border-radius: 999px;
padding: 2px 10px;
font-size: 0.72rem;
letter-spacing: 0.04em;
white-space: nowrap;
background: rgba(36, 72, 85, 0.12);
border-color: rgba(36, 72, 85, 0.35);
color: var(--brand-indigo);
}
.explain-field.is-filled .explain-num,
.bugfix-field.is-filled .explain-num {
background: rgba(79, 138, 114, 0.15);
border-color: rgba(79, 138, 114, 0.5);
color: var(--accent-emerald);
}
.explain-field label {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: var(--text-primary);
font-size: 0.92rem;
}
.explain-field label i {
color: var(--brand-indigo);
width: 18px;
text-align: center;
}
.explain-required {
color: var(--accent-rose);
font-weight: 700;
}
.explain-field.is-filled .explain-required {
color: var(--accent-emerald);
}
.explain-char-count {
margin-left: auto;
font-size: 0.72rem;
font-family: var(--font-mono);
color: var(--text-tertiary);
background: var(--bg-hover);
border-radius: 999px;
padding: 2px 8px;
flex: 0 0 auto;
}
.explain-field.is-filled .explain-char-count {
color: var(--accent-emerald);
}
.explain-field textarea {
width: 100%;
resize: vertical;
min-height: 62px;
background: var(--bg-editor);
border: 1px solid var(--border-editor);
border-radius: 10px;
color: var(--text-primary);
padding: 10px 12px;
font-family: inherit;
font-size: 0.9rem;
line-height: 1.5;
outline: none;
transition: border-color 0.15s ease;
}
.explain-field textarea:focus {
border-color: var(--brand-indigo);
}
.explain-field textarea::placeholder {
color: var(--text-muted);
}
.btn-block {
width: 100%;
}
/* ==========================================================================
Bugfix Modal - Kartu soal, field jawaban, badge jumlah kode
========================================================================== */
/* Kartu per sub-soal */
.bugfix-question-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: 14px;
transition: border-color 0.2s ease;
}
.bugfix-question-card:last-child { margin-bottom: 0; }
.bugfix-question-card:focus-within {
border-color: rgba(36, 72, 85, 0.4);
}
/* Header kartu: "Soal 1" + badge jumlah kode */
.bugfix-question-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 14px;
background: var(--bg-elevated);
border-bottom: 1px solid var(--border-subtle);
}
.bugfix-question-num {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.82rem;
font-weight: 700;
color: var(--text-primary);
font-family: var(--font-mono);
}
.bugfix-question-num i {
color: var(--brand-indigo);
font-size: 0.85rem;
}
.bugfix-question-blanks {
font-size: 0.72rem;
font-weight: 700;
font-family: var(--font-mono);
letter-spacing: 0.04em;
color: var(--text-tertiary);
white-space: nowrap;
}
/* Area kode + field jawaban di dalam kartu */
.bugfix-question-fields {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px 14px;
}
/* Field jawaban individual */
.bugfix-field {
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
padding: 10px 12px;
transition: border-color 0.15s ease, background 0.15s ease;
}
.bugfix-field:focus-within {
border-color: var(--brand-indigo);
background: var(--bg-surface);
}
.bugfix-field.is-filled {
border-color: rgba(79, 138, 114, 0.4);
background: rgba(79, 138, 114, 0.03);
}
.bugfix-field.is-error {
border-color: rgba(230, 72, 51, 0.45);
background: rgba(230, 72, 51, 0.04);
box-shadow: 0 0 0 3px rgba(230, 72, 51, 0.1);
}
.bugfix-field textarea {
width: 100%;
resize: vertical;
min-height: 58px;
background: var(--bg-editor);
border: 1px solid var(--border-editor);
border-radius: 8px;
color: var(--text-primary);
padding: 9px 11px;
font-family: var(--font-mono);
font-size: 0.88rem;
line-height: 1.55;
outline: none;
transition: border-color 0.15s ease;
}
.bugfix-field textarea:focus {
border-color: var(--brand-indigo);
}
.bugfix-field textarea::placeholder {
color: var(--text-muted);
font-style: italic;
}
/* Kolom penjelasan jawaban (alasan mahasiswa) per soal debugging kode */
.bugfix-explanation-field {
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
padding: 10px 12px;
transition: border-color 0.15s ease;
}
.bugfix-explanation-field:focus-within {
border-color: var(--brand-indigo);
}
.bugfix-explanation-field label {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.8rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 6px;
}
.bugfix-explanation-field textarea {
width: 100%;
resize: vertical;
min-height: 64px;
background: var(--bg-editor);
border: 1px solid var(--border-editor);
border-radius: 8px;
color: var(--text-primary);
padding: 9px 11px;
font-family: inherit;
font-size: 18px;
line-height: 1.55;
outline: none;
transition: border-color 0.15s ease;
}
.bugfix-explanation-field textarea:focus {
border-color: var(--brand-indigo);
}
.bugfix-explanation-field textarea::placeholder {
color: var(--text-muted);
font-style: italic;
}
.bugfix-explanation-field textarea.is-empty {
border-color: rgba(230, 72, 51, 0.6);
box-shadow: 0 0 0 3px rgba(230, 72, 51, 0.12);
}
/* Teks penjelasan mahasiswa di panel penilaian admin/asisten */
.bugfix-explanation-text {
margin: 4px 0 0;
padding: 8px 10px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: 6px;
color: var(--text-primary);
font-size: 18px;
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
}
/* --- Badge status penilaian penjelasan --- */
.badge-graded {
color: var(--text-primary);
}
.badge-pending {
color: var(--text-secondary);
}
/* --- Panel Penilaian Penjelasan (Admin/Asisten) --- */
.explain-toolbar {
gap: 10px;
flex-wrap: wrap;
}
.explain-toolbar .search-box {
max-width: 300px;
}
.explain-count-chips {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
flex-wrap: wrap;
}
.explain-count-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
font-weight: 600;
color: var(--text-secondary);
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: 999px;
padding: 4px 12px;
}
.explain-count-chip i {
color: var(--brand-indigo);
}
.explain-count-pending {
color: var(--accent-amber);
border-color: rgba(201, 138, 61, 0.4);
background: rgba(201, 138, 61, 0.08);
}
.explain-count-pending i {
color: var(--accent-amber);
}
/* Identitas mahasiswa (avatar inisial + nama/NPM) */
.explain-student {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.explain-avatar {
flex: 0 0 auto;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--brand-indigo);
color: #FFF;
font-size: 0.78rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0.02em;
box-shadow: 0 4px 10px rgba(36, 72, 85, 0.3);
}
.explain-student-id {
min-width: 0;
display: flex;
flex-direction: column;
}
.explain-student-id strong {
font-size: 0.92rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.explain-student-id small {
color: var(--text-tertiary);
font-size: 0.75rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Progress mini "dinilai x/y" pada baris ringkasan */
/* --- Daftar Pilar Penjelasan Sintaks (kartu datar, tanpa accordion bertingkat) --- */
.explain-pilar-list {
display: flex;
flex-direction: column;
gap: 10px;
margin: 6px 0;
}
.pilar-grade-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 10px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color 0.15s ease;
}
.pilar-grade-card:focus-within {
border-color: var(--brand-indigo);
}
.pilar-grade-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.pilar-grade-title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 0.9rem;
color: var(--text-primary);
}
.pilar-grade-title i {
color: var(--brand-indigo);
}
/* Accordion lama - tetap dipertahankan utk kompatibilitas CSS lain */
.explain-accordion-list {
display: flex;
flex-direction: column;
gap: 8px;
margin: 10px 0;
}
.explain-accordion-item {
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: 10px;
overflow: hidden;
transition: all 0.2s ease;
}
.explain-accordion-item[open] {
border-color: var(--border-strong);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.explain-accordion-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
font-size: 0.88rem;
font-weight: 600;
color: var(--text-primary);
cursor: pointer;
user-select: none;
list-style: none;
background: var(--bg-surface);
transition: background 0.15s ease;
}
.explain-accordion-header::-webkit-details-marker {
display: none;
}
.explain-accordion-header:hover {
background: var(--bg-hover);
}
.explain-accordion-title {
display: flex;
align-items: center;
gap: 8px;
}
.explain-accordion-title i {
color: var(--brand-indigo);
font-size: 0.95rem;
}
.explain-accordion-arrow {
font-size: 0.8rem;
color: var(--text-tertiary);
transition: transform 0.2s ease;
}
.explain-accordion-item[open] .explain-accordion-arrow {
transform: rotate(180deg);
color: var(--brand-indigo);
}
.explain-accordion-body {
padding: 12px 14px;
border-top: 1px solid var(--border-subtle);
background: var(--bg-surface);
}
.explain-accordion-body p {
margin: 0;
font-size: 0.9rem;
color: var(--text-primary);
line-height: 1.6;
white-space: pre-wrap;
}
/* Kotak penilaian: input + preset + pratinjau Nilai Akhir */
.explain-score-box {
margin-top: 14px;
display: flex;
align-items: stretch;
gap: 14px;
flex-wrap: wrap;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 12px;
padding: 12px 14px;
}
.explain-score-main {
flex: 1 1 320px;
min-width: 260px;
}
.explain-score-box label {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.88rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.explain-score-box label i {
color: var(--accent-amber);
}
.explain-score-input-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.explain-score-input {
box-sizing: border-box;
height: 38px;
width: 88px;
background: var(--bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--text-primary);
padding: 0 10px;
font-size: 14px;
font-family: var(--font-mono);
text-align: center;
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.explain-score-input:focus {
border-color: var(--brand-indigo);
box-shadow: 0 0 0 3px var(--brand-indigo-glow);
background: var(--bg-surface);
}
.explain-score-input.saved-flash {
border-color: var(--accent-emerald);
box-shadow: 0 0 0 3px rgba(94, 184, 134, 0.22);
}
/* Pratinjau Nilai Akhir = Ketikan 60% + Penjelasan 40% */
.explain-final-preview {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
margin-top: 14px;
padding: 12px 18px;
border-radius: 12px;
background: var(--bg-elevated);
border: 1px dashed var(--border-strong);
}
.explain-final-label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-tertiary);
}
.explain-final-value {
font-size: 1.6rem;
font-weight: 800;
font-family: var(--font-mono);
line-height: 1.15;
}
.explain-final-value.score-high { color: var(--accent-emerald); }
.explain-final-value.score-mid { color: var(--accent-amber); }
.explain-final-value.score-low { color: var(--accent-rose); }
.explain-final-preview small {
font-size: 0.68rem;
text-align: center;
}
/* --- Tabel Penilaian Penjelasan (Full Width Auto-Fit) --- */
.explain-full-table {
width: 100%;
}
.explain-grade-modal-card {
max-width: 1100px;
width: 94vw;
max-height: 88vh;
overflow-y: auto;
border-radius: 18px;
border: 1px solid var(--border-strong);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
padding: 24px 28px;
}
/* Layout Komparasi 2 Kolom (Jawaban Mahasiswa vs Kunci Jawaban) */
.explain-compare-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 768px) {
.explain-compare-grid {
grid-template-columns: 1fr;
}
}
.explain-compare-col {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.explain-compare-col.student-side {
border-color: rgba(36, 72, 85, 0.25);
}
.explain-compare-col.reference-side {
border-color: rgba(79, 138, 114, 0.25);
}
.compare-col-header {
padding: 8px 12px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
display: flex;
align-items: center;
gap: 6px;
}
.student-side .compare-col-header {
background: rgba(36, 72, 85, 0.08);
color: var(--brand-indigo);
border-bottom: 1px solid rgba(36, 72, 85, 0.15);
}
.reference-side .compare-col-header {
background: rgba(79, 138, 114, 0.08);
color: var(--accent-emerald);
border-bottom: 1px solid rgba(79, 138, 114, 0.15);
}
.compare-col-content {
padding: 12px 14px;
flex: 1;
}
.compare-col-content p {
margin: 0;
font-size: 0.9rem;
line-height: 1.6;
white-space: pre-wrap;
color: var(--text-primary);
}
.compare-col-content p.reference-text {
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--text-secondary);
}
.pilar-score-chip {
font-size: 0.78rem;
color: var(--text-secondary);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 999px;
padding: 2px 10px;
margin-left: auto;
margin-right: 8px;
}
.pilar-score-chip strong {
color: var(--brand-indigo);
}
.pilar-likert-box {
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: 10px;
padding: 10px 12px;
}
.likert-label-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.likert-label-row label {
font-weight: 700;
font-size: 0.88rem;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
}
.likert-score-badge {
font-size: 0.85rem;
color: var(--text-secondary);
}
.likert-score-badge strong {
color: var(--text-primary);
font-size: 1.05rem;
}
.likert-slider-wrapper {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Range slider utama Langkah 2 - kini DITAMPILKAN (sama seperti slider
Langkah 3 & 4) agar penilai bisa menggeser nilai langsung; tombol 1-10
tetap tersedia sebagai kontrol presisi. */
.pilar-likert-box .likert-slider-wrapper input[type="range"] {
width: 100%;
accent-color: var(--brand-indigo);
}
.likert-ticks {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 5px;
}
.likert-tick-btn {
padding: 5px 0;
font-size: 0.75rem;
border: 1px solid var(--border-subtle);
border-radius: 6px;
background: var(--bg-surface);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.15s ease;
text-align: center;
}
.likert-tick-btn:hover:not(:disabled) {
border-color: var(--brand-indigo);
color: var(--brand-indigo);
}
.likert-tick-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.likert-tick-btn.active {
background: var(--brand-indigo);
border-color: var(--brand-indigo);
color: #FFF;
box-shadow: 0 4px 10px rgba(36, 72, 85, 0.3);
}
.explain-detail-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-bottom: 14px;
margin-bottom: 16px;
border-bottom: 1px solid var(--border-subtle);
position: sticky;
top: -22px;
z-index: 2;
background: var(--bg-surface);
}
.explain-detail-title-wrap {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.explain-avatar {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
color: var(--brand-indigo);
font-size: 0.9rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0.03em;
}
.explain-student-name {
font-size: 1.05rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.25;
}
.explain-student-sub {
color: var(--text-secondary);
font-size: 0.8rem;
margin-top: 2px;
}
.explain-detail-title-wrap strong {
font-size: 1rem;
display: flex;
align-items: center;
gap: 6px;
}
.explain-detail-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
color: var(--text-secondary);
font-size: 0.85rem;
}
/* Navigasi antar mahasiswa */
.explain-nav {
display: flex;
align-items: center;
gap: 4px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 10px;
padding: 3px;
}
.explain-nav .btn {
padding: 5px 9px;
flex: 0 0 auto;
}
.explain-nav-counter {
font-size: 0.75rem;
font-family: var(--font-mono);
color: var(--text-secondary);
padding: 0 4px;
min-width: 44px;
text-align: center;
}
.explain-question-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.explain-question-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 12px;
padding: 12px 14px;
transition: border-color 0.15s ease;
}
.explain-question-card:hover {
border-color: var(--border-strong);
}
.explain-question-head {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px dashed var(--border-subtle);
}
.explain-question-head code {
color: var(--brand-cyan);
font-size: 0.85rem;
}
.explain-q-stats {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.explain-chip {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.74rem;
font-family: var(--font-mono);
color: var(--text-secondary);
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: 999px;
padding: 2px 9px;
}
.explain-chip i {
color: var(--brand-indigo);
}
.explain-q-status {
margin-left: auto;
}
/* Kartu soal penilaian: ciutkan/perluas manual (khusus panel dengan banyak soal) */
.explain-question-card.is-collapsed {
border-color: var(--border-subtle);
background: var(--bg-elevated);
}
.explain-question-card.is-collapsed .explain-card-body {
display: none;
}
.explain-question-head {
cursor: pointer;
}
.explain-card-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
flex: none;
border: 1px solid var(--border-subtle);
border-radius: 7px;
background: var(--bg-surface);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.15s ease;
}
.explain-card-toggle:hover {
color: var(--brand-indigo);
border-color: var(--border-strong);
transform: translateY(-1px);
}
.explain-card-toggle i {
transition: transform 0.2s ease;
}
.explain-question-card:not(.is-collapsed) .explain-card-toggle i {
transform: rotate(180deg);
color: var(--brand-indigo);
}
/* Toolbar panel penilaian: progres + kontrol buka/ciutkan semua */
.explain-detail-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 12px 2px 2px;
}
.explain-progress {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 240px;
}
.explain-progress-track {
flex: 1;
height: 6px;
border-radius: 999px;
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
overflow: hidden;
}
.explain-progress-fill {
height: 100%;
border-radius: 999px;
background: var(--brand-indigo);
transition: width 0.35s ease;
}
.explain-progress-text {
font-size: 0.78rem;
font-family: var(--font-mono);
color: var(--text-secondary);
white-space: nowrap;
}
.explain-progress-text i {
color: var(--brand-indigo);
}
.explain-toolbar-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.explain-toolbar-actions .btn-sm {
padding: 5px 11px;
font-size: 0.78rem;
}
@media (max-width: 900px) {
.explain-master-detail {
grid-template-columns: 1fr;
}
.explain-toolbar .search-box {
max-width: none;
}
}
/* --------------------------------------------------------------------------
Explanation Modal Side-by-Side Horizontal Layout & Assistant Output Panel
-------------------------------------------------------------------------- */
.modal-dialog-horizontal {
max-width: 1100px;
width: 95vw;
}
.modal-header-top {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
margin-bottom: 16px;
}
.modal-header-top > div {
display: flex;
flex-direction: column;
align-items: center;
}
.modal-header-top h2 {
margin-bottom: 4px;
font-size: 1.25rem;
}
.modal-header-top .modal-sub {
text-align: center;
max-width: 560px;
}
.explanation-grid-horizontal {
display: grid;
grid-template-columns: 4fr 5fr;
gap: 24px;
margin: 16px 0;
text-align: left;
align-items: start; /* allow sticky to work by not stretching the flex item */
}
@media (max-width: 820px) {
.explanation-grid-horizontal {
grid-template-columns: 1fr;
}
}
.explanation-left-col,
.explanation-right-col {
min-width: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.explanation-left-col {
position: sticky;
top: 20px;
}
.explanation-left-col .explain-code-panel {
display: flex;
flex-direction: column;
}
.explanation-left-col .explain-code {
flex: 1;
max-height: 60vh;
overflow-y: auto;
}
.explain-output-panel {
background: var(--bg-surface);
border: 1px solid var(--border-strong);
border-radius: 12px;
overflow: hidden;
margin-top: 10px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.explain-output-head {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--bg-elevated);
border-bottom: 1px solid var(--border-subtle);
font-size: 0.85rem;
font-weight: 600;
color: var(--brand-cyan);
}
.explain-output-content {
margin: 0;
padding: 14px;
font-family: var(--font-mono);
font-size: 0.88rem;
color: var(--accent-emerald);
background: var(--bg-editor);
white-space: pre-wrap;
word-break: break-word;
}
/* Panel output kode di modal hasil - ditampilkan hanya SETELAH submit penjelasan */
.res-output-panel {
background: var(--bg-surface);
border: 1px solid var(--border-strong);
border-radius: 12px;
overflow: hidden;
margin-top: 14px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.res-output-head {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--bg-elevated);
border-bottom: 1px solid var(--border-subtle);
font-size: 0.85rem;
font-weight: 600;
color: var(--brand-cyan);
}
.res-output-content {
margin: 0;
padding: 14px;
font-family: var(--font-mono);
font-size: 0.88rem;
color: var(--accent-emerald);
background: var(--bg-editor);
white-space: pre-wrap;
word-break: break-word;
}
/* --------------------------------------------------------------------------
Interactive Pillar Item List Builder & Preset Chips Styling
-------------------------------------------------------------------------- */
.pillars-box-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.pillars-box-actions {
display: flex;
align-items: center;
gap: 8px;
}
.pillars-item-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 16px;
}
.pillar-item-card {
display: flex;
flex-direction: column;
gap: 8px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 10px;
padding: 10px 14px;
transition: all 0.2s ease;
}
.pillar-item-card:hover {
border-color: var(--border-strong);
background: var(--bg-hover);
}
.pillar-item-bottom {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 4px;
padding-top: 8px;
border-top: 1px dashed var(--border-subtle);
}
.pillar-answer-label {
font-size: 0.76rem;
font-weight: 600;
color: var(--accent-emerald);
display: flex;
align-items: center;
gap: 5px;
}
.pillar-item-answer {
width: 100%;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: 6px;
padding: 6px 10px;
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 0.82rem;
resize: vertical;
}
.pillar-item-answer:focus {
outline: none;
border-color: var(--accent-emerald);
box-shadow: 0 0 0 3px rgba(79, 138, 114, 0.2);
}
.pillar-drag-handle {
height: 32px;
box-sizing: border-box;
margin-top: 0;
padding: 0 8px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 600;
color: var(--brand-cyan);
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: 6px;
white-space: nowrap;
user-select: none;
}
.pillar-item-input {
width: 100%;
box-sizing: border-box;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: 6px;
padding: 7px 12px;
color: var(--text-primary);
font-family: var(--font-ui);
font-size: 0.9rem;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
resize: vertical;
}
.pillar-item-input:focus {
outline: none;
border-color: var(--brand-indigo);
box-shadow: 0 0 0 3px var(--brand-indigo-glow);
}
.pillar-item-actions {
width: auto;
margin-top: 0;
display: flex;
align-items: flex-start;
gap: 0;
}
.btn-pillar-move,
.btn-pillar-del {
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
border-radius: 6px;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-pillar-move:hover:not(:disabled) {
background: var(--bg-hover);
color: var(--text-primary);
border-color: var(--border-strong);
}
.btn-pillar-move:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.btn-pillar-del:hover {
background: rgba(230, 72, 51, 0.15);
color: var(--accent-rose);
border-color: var(--accent-rose);
}
.pillars-empty-state {
text-align: center;
padding: 24px;
background: var(--bg-surface);
border: 1px dashed var(--border-strong);
border-radius: 10px;
color: var(--text-tertiary);
}
.pillars-empty-state i {
font-size: 1.8rem;
margin-bottom: 8px;
color: var(--brand-indigo);
}
.preset-chip {
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: 999px;
color: var(--text-primary);
font-size: 0.78rem;
font-weight: 500;
padding: 4px 12px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.15s ease;
}
.preset-chip i {
font-size: 0.7rem;
color: var(--brand-indigo);
}
.preset-chip:hover {
background: var(--brand-indigo);
color: #FFFFFF;
border-color: var(--brand-indigo);
}
.preset-chip:hover i {
color: #FFFFFF;
}
/* ============================================================================
Toast Notifikasi Global (Revamp Sesi 20 - Modern Bouncy Card with Progress)
============================================================================ */
/* Kontainer antrean toast - pojok kanan atas */
.app-toast-container {
position: fixed;
top: calc(24px + env(safe-area-inset-top, 0px));
right: calc(24px + env(safe-area-inset-right, 0px));
z-index: 99999;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
width: min(92vw, 420px);
pointer-events: none;
}
/* Layar kecil: pas di lebar layar dengan padding aman */
@media (max-width: 560px) {
.app-toast-container {
top: calc(14px + env(safe-area-inset-top, 0px));
right: calc(12px + env(safe-area-inset-right, 0px));
left: calc(12px + env(safe-area-inset-left, 0px));
width: auto;
align-items: stretch;
}
}
/* Kartu Toast (mendukung selector .app-toast maupun .toast) */
.app-toast,
.toast {
position: relative;
border-radius: 12px;
background: var(--bg-surface, #ffffff);
border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
padding: 16px 36px 16px 18px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.22), 0 4px 10px rgba(0, 0, 0, 0.08);
overflow: hidden;
width: 100%;
pointer-events: auto;
transform: translateX(calc(100% + 40px));
opacity: 0;
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35), opacity 0.3s ease;
--toast-accent: var(--brand-indigo, #4070f4);
}
.app-toast.show,
.app-toast.active,
.toast.active,
.toast.show {
transform: translateX(0%);
opacity: 1;
}
.app-toast.hide,
.toast.hide {
transform: translateX(calc(100% + 40px));
opacity: 0;
transition: transform 0.35s ease-in, opacity 0.25s ease-in;
}
/* Konten Toast */
.app-toast .toast-content,
.toast .toast-content {
display: flex;
align-items: center;
gap: 14px;
}
/* Badge Ikon Bulat (langsung pada elemen i.check tanpa wrapper div) */
.app-toast .toast-content .check,
.app-toast .toast-content .toast-icon-badge,
.toast .toast-content .check,
.toast .toast-content .toast-icon-badge {
display: inline-flex;
align-items: center;
justify-content: center;
height: 35px;
min-width: 35px;
width: 35px;
background-color: var(--toast-accent);
color: #ffffff !important;
font-size: 16px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 2px 8px color-mix(in srgb, var(--toast-accent) 35%, transparent);
}
/* Bagian Teks & Pesan */
.app-toast .toast-content .message,
.app-toast .toast-content .toast-message,
.toast .toast-content .message,
.toast .toast-content .toast-message {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.app-toast .message .text,
.app-toast .toast-message .text,
.toast .message .text,
.toast .toast-message .text {
font-size: 13.5px;
font-weight: 400;
color: var(--text-secondary, #666666);
line-height: 1.45;
word-break: break-word;
}
.app-toast .message .text.text-1,
.app-toast .toast-message .text-1,
.app-toast .toast-message .toast-title,
.toast .message .text.text-1,
.toast .toast-message .text-1,
.toast .toast-message .toast-title {
font-size: 14.5px;
font-weight: 600;
color: var(--text-primary, #333333);
margin-bottom: 2px;
}
/* Tombol Close (Elemen Ikon Murni) */
.app-toast .close,
.app-toast .toast-close,
.toast .close,
.toast .toast-close,
.app-toast i.close,
.toast i.close {
box-sizing: border-box;
position: absolute;
top: 10px;
right: 12px;
padding: 6px;
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
color: var(--text-tertiary, #94a3b8) !important;
font-size: 16px;
line-height: 1;
cursor: pointer;
opacity: 0.65;
transition: opacity 0.2s ease, color 0.2s ease, transform 0.15s ease;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
user-select: none;
}
.app-toast .close:hover,
.app-toast .toast-close:hover,
.toast .close:hover,
.toast .toast-close:hover,
.app-toast i.close:hover,
.toast i.close:hover {
opacity: 1;
color: var(--text-primary, #1e293b) !important;
background: transparent !important;
box-shadow: none !important;
transform: scale(1.15);
}
.app-toast .close:active,
.toast .close:active,
.app-toast i.close:active,
.toast i.close:active {
transform: scale(0.95);
}
/* Baris Progress Hitung Mundur */
.app-toast .progress,
.app-toast .toast-progress,
.toast .progress,
.toast .toast-progress {
position: absolute;
bottom: 0;
left: 0;
height: 3.5px;
width: 100%;
background: color-mix(in srgb, var(--toast-accent) 15%, transparent);
}
.app-toast .progress:before,
.app-toast .toast-progress:before,
.toast .progress:before,
.toast .toast-progress:before {
content: "";
position: absolute;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
background-color: var(--toast-accent);
}
.app-toast .progress.active:before,
.app-toast .toast-progress.active:before,
.toast .progress.active:before,
.toast .toast-progress.active:before {
animation: toast-progress var(--toast-duration, 4.5s) linear forwards;
}
/* Pause progress saat hover kartu toast atau saat class paused aktif */
.app-toast:hover .progress.active:before,
.app-toast:hover .toast-progress.active:before,
.app-toast.paused .progress.active:before,
.app-toast.paused .toast-progress.active:before,
.toast:hover .progress.active:before,
.toast:hover .toast-progress.active:before,
.toast.paused .progress.active:before,
.toast.paused .toast-progress.active:before {
animation-play-state: paused;
}
@keyframes toast-progress {
100% {
right: 100%;
}
}
@keyframes progress {
100% {
right: 100%;
}
}
/* Variasi Warna Tema Sesuai Tipe */
.app-toast.toast-success,
.toast.toast-success {
--toast-accent: var(--accent-emerald, #10b981);
}
.app-toast.toast-warning,
.toast.toast-warning {
--toast-accent: var(--accent-amber, #f59e0b);
}
.app-toast.toast-error,
.toast.toast-error {
--toast-accent: var(--accent-rose, #f43f5e);
}
.app-toast.toast-info,
.toast.toast-info {
--toast-accent: var(--brand-indigo, #6366f1);
}
/* Aksesibilitas: tanpa animasi bagi pengguna prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.app-toast,
.toast {
transition: none !important;
transform: none !important;
}
.app-toast .progress:before,
.app-toast .toast-progress:before,
.toast .progress:before,
.toast .toast-progress:before {
animation: none !important;
}
}
/* ============================================================================
Popup Sukses Simpan Nilai Penjelasan (di atas modal penilaian, di bawah toast)
============================================================================ */
.grade-success-overlay {
z-index: 1200;
}
.grade-success-card {
max-width: 400px;
text-align: center;
position: relative;
padding: 28px 24px 22px;
}
.grade-success-card .modal-close-btn {
position: absolute;
top: 10px;
right: 12px;
font-size: 22px;
}
.grade-success-icon {
width: 64px;
height: 64px;
margin: 0 auto 14px;
border-radius: 50%;
background: rgba(79, 138, 114, 0.14);
color: var(--accent-emerald);
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
animation: gradeSuccessPop 0.35s ease;
}
@keyframes gradeSuccessPop {
0% { transform: scale(0.5); opacity: 0; }
70% { transform: scale(1.08); }
100% { transform: scale(1); opacity: 1; }
}
.grade-success-card h3 {
margin: 0 0 4px;
font-size: 1.15rem;
}
.grade-success-sub {
color: var(--text-tertiary);
font-size: 0.83rem;
margin: 0 0 16px;
}
.grade-success-summary {
background: var(--bg-elevated);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
padding: 4px 16px;
margin-bottom: 14px;
}
.grade-success-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 9px 0;
font-size: 0.9rem;
color: var(--text-secondary);
}
.grade-success-row + .grade-success-row {
border-top: 1px dashed var(--border-subtle);
}
.grade-success-row strong {
color: var(--text-primary);
font-size: 1rem;
}
.grade-success-row strong small {
font-size: 0.72em;
color: var(--text-tertiary);
font-weight: 400;
}
.grade-success-row strong.score-high { color: var(--accent-emerald); }
.grade-success-row strong.score-mid { color: var(--accent-amber); }
.grade-success-row strong.score-low { color: var(--accent-rose); }
.grade-success-note {
font-size: 0.78rem;
color: var(--text-tertiary);
margin: 0 0 16px;
}
.grade-success-card .btn-primary {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ============================================================================
Mode Pengerjaan: Ujian (1 tes per soal) vs Belajar (Demo, tidak disimpan)
============================================================================ */
.mode-toggle-section {
/* Susun vertikal: tombol Mode di atas, indikator status sesi di bawahnya
(baris status tipis, rata tengah) agar proporsional dengan kedua tombol. */
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin: 8px 0 8px;
}
/* Indikator status sesi untuk Admin/Asisten (perspektif mahasiswa):
hijau = sesi sedang berjalan sesuai jadwal; kuning = belum ada sesi berjalan.
Berbentuk baris status tipis - tidak menyaingi ukuran tombol Mode. */
.sesi-status-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
max-width: min(100%, 520px);
padding: 5px 14px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.35;
border: 1px solid var(--border-subtle);
background: var(--bg-elevated);
color: var(--text-secondary);
white-space: normal;
text-align: center;
}
.sesi-status-pill strong { color: inherit; font-weight: 700; }
.sesi-status-dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex-shrink: 0;
background: var(--text-secondary);
}
.sesi-status-pill.sesi-running {
color: var(--text-primary);
}
.sesi-status-pill.sesi-running .sesi-status-dot {
background: var(--text-secondary);
}
.sesi-status-pill.sesi-idle {
color: var(--text-tertiary);
}
.sesi-status-pill.sesi-idle .sesi-status-dot {
background: var(--text-tertiary);
}
.mode-toggle {
display: inline-flex;
gap: 6px;
padding: 5px;
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.mode-chip {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 9px 16px;
border: none;
border-radius: var(--radius-md);
background: transparent;
color: var(--text-secondary);
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.mode-chip-label {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.25;
}
.mode-chip-sub {
font-weight: 400;
font-size: 0.72rem;
color: var(--text-tertiary);
}
.mode-chip:hover { color: var(--text-primary); background: var(--bg-hover); }
.mode-chip.active {
color: #fff;
background: var(--brand-indigo);
box-shadow: 0 4px 14px rgba(36, 72, 85, 0.35);
}
.mode-chip.active .mode-chip-sub { color: rgba(255, 255, 255, 0.85); }
.mode-chip.mode-belajar.active {
background: var(--brand-cyan);
box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
}
/* BUGFIX: utility global .hidden hilang - tanpa rule ini semua elemen ber-
class "hidden" (modal-overlay, lock-overlay, sound-menu, panel login/register,
dll.) tidak pernah disembunyikan sehingga tampil bersamaan (mis. form login
& register tergabung). !important menjamin menang atas display lain. */
.hidden { display: none !important; }
/* ============================================================================
PERBAIKAN BUG (Langkah 3 - Level 1): lengkapi kode yang di-errorkan
============================================================================ */
/* Badge header modal perbaikan bug */
.modal-header-badge.bugfix-badge {
background: #C98A3D;
box-shadow: 0 6px 18px rgba(201, 138, 61, 0.35);
}
/* Kode soal dengan marker ___ disorot */
.bugfix-code {
white-space: pre-wrap;
word-break: break-word;
}
.bugfix-marker {
display: inline-block;
background: rgba(201, 138, 61, 0.18);
color: #C98A3D;
border: 1px dashed rgba(251, 191, 36, 0.55);
border-radius: 4px;
padding: 0 4px;
font-weight: 700;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
letter-spacing: 0.05em;
}
/* Blank INLINE di dalam kode soal - placeholder "___" adalah TEKS ASLI di
dalam span (bukan pseudo-element) sehingga mengetik langsung menggantikannya:
saat fokus teks placeholder otomatis terseleksi → hilang seketika saat input.
Kelas status: .is-placeholder (belum diisi) / tanpa kelas (terisi) / .is-empty. */
.bugfix-code-editable {
padding: 12px 14px;
}
.bugfix-inline-blank {
display: inline-block;
min-width: 3ch;
background: rgba(201, 138, 61, 0.14);
color: #C98A3D;
border-bottom: 1px dashed rgba(251, 191, 36, 0.55);
border-radius: 4px;
padding: 0 4px;
margin: 0 2px;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: inherit;
line-height: 1.5;
font-weight: 700;
letter-spacing: 0.04em;
outline: none;
vertical-align: baseline;
white-space: pre-wrap;
word-break: break-word;
transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.bugfix-inline-blank:focus {
background: rgba(201, 138, 61, 0.26);
box-shadow: 0 0 0 3px rgba(201, 138, 61, 0.14);
}
/* Terisi: jawaban tampil hijau menyatu dengan kode (placeholder sudah hilang) */
.bugfix-inline-blank:not(.is-placeholder) {
background: rgba(79, 138, 114, 0.13);
color: #4F8A72;
border-bottom-color: rgba(79, 138, 114, 0.5);
}
.bugfix-inline-blank.is-empty {
border-bottom-color: rgba(230, 72, 51, 0.6);
background: rgba(230, 72, 51, 0.08);
box-shadow: 0 0 0 3px rgba(230, 72, 51, 0.12);
}
/* Jawaban mahasiswa terisi inline (panel penilaian & dokumentasi unduhan) */
.bugfix-answer-inline {
display: inline-block;
background: rgba(79, 138, 114, 0.14);
color: #4F8A72;
border-radius: 4px;
padding: 0 3px;
font-weight: 700;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.bugfix-code-answer {
margin: 6px 0 0;
background: #18181b;
border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
border-radius: 8px;
font-size: 13.5px;
font-weight: 500;
color: var(--text-primary, #F5F2EB);
}
[data-theme="light"] .bugfix-code-answer,
[data-theme="minimal"] .bugfix-code-answer,
[data-theme="chatgpt"] .bugfix-code-answer,
[data-theme="sakura-light"] .bugfix-code-answer {
background: #f8fafc;
color: #0f172a;
border-color: #e2e8f0;
}
/* Blok "Kode Mahasiswa - bagian yang diisi disorot" */
.bugfix-compare-side .bugfix-code-answer,
.bugfix-compare-side .bugfix-code-answer code {
background: #18181b;
color: var(--text-primary, #F5F2EB);
font-size: 13.5px;
font-weight: 500;
}
[data-theme="light"] .bugfix-compare-side .bugfix-code-answer,
[data-theme="light"] .bugfix-compare-side .bugfix-code-answer code {
background: #f8fafc;
color: #0f172a;
}
/* "Kunci Jawaban (acuan penilaian)": blok code/pre */
.bugfix-compare-side.reference-side code,
.bugfix-compare-side.reference-side pre {
background: #18181b;
color: var(--text-primary, #F5F2EB);
border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
border-radius: 8px;
font-size: 13.5px;
font-weight: 500;
}
[data-theme="light"] .bugfix-compare-side.reference-side code,
[data-theme="light"] .bugfix-compare-side.reference-side pre {
background: #f8fafc;
color: #0f172a;
border-color: #e2e8f0;
}
.bugfix-hint {
margin-top: 10px;
padding: 8px 10px;
background: rgba(201, 138, 61, 0.08);
border: 1px solid rgba(201, 138, 61, 0.2);
border-radius: var(--radius-md, 8px);
}
.bugfix-hint code { color: #C98A3D; }
/* Chip komposisi nilai akhir (Ketikan / Penjelasan / Perbaikan Bug) */
.bugfix-score-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.bugfix-score-chip {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 500;
color: var(--text-secondary);
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: 999px;
padding: 3px 10px;
white-space: nowrap;
}
.bugfix-score-chip strong {
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 11px;
}
.bugfix-score-chip:last-child {
color: #C98A3D;
border-color: rgba(201, 138, 61, 0.4);
background: rgba(201, 138, 61, 0.12);
}
.bugfix-score-chip:last-child strong {
color: #C98A3D;
}
/* Scrollbar TIPIS & TERLIHAT pada modal perbaikan bug - sebelumnya disembunyikan
total sehingga pengguna tidak tahu konten bisa di-scroll */
#bugfix-modal .modal-dialog,
#bugfix-modal .explain-code,
#bugfix-modal .bugfix-fields {
scrollbar-width: thin; /* Firefox */
scrollbar-color: rgba(127, 137, 146, 0.22) transparent;
}
#bugfix-modal .modal-dialog::-webkit-scrollbar,
#bugfix-modal .explain-code::-webkit-scrollbar,
#bugfix-modal .bugfix-fields::-webkit-scrollbar {
width: 8px;
height: 8px;
}
#bugfix-modal .modal-dialog::-webkit-scrollbar-thumb,
#bugfix-modal .explain-code::-webkit-scrollbar-thumb,
#bugfix-modal .bugfix-fields::-webkit-scrollbar-thumb {
background: rgba(127, 137, 146, 0.16);
border-radius: 4px;
}
#bugfix-modal .modal-dialog::-webkit-scrollbar-thumb:hover,
#bugfix-modal .explain-code::-webkit-scrollbar-thumb:hover,
#bugfix-modal .bugfix-fields::-webkit-scrollbar-thumb:hover {
background: rgba(127, 137, 146, 0.30);
}
#bugfix-modal .modal-dialog::-webkit-scrollbar-track,
#bugfix-modal .explain-code::-webkit-scrollbar-track,
#bugfix-modal .bugfix-fields::-webkit-scrollbar-track {
background: transparent;
}
/* Daftar field per blank */
.bugfix-fields {
display: flex;
flex-direction: column;
gap: 10px;
}
.bugfix-field {
background: var(--bg-card, var(--bg-hover));
border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
border-radius: var(--radius-md, 10px);
padding: 10px 12px;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.bugfix-field:focus-within {
border-color: rgba(201, 138, 61, 0.55);
box-shadow: 0 0 0 3px rgba(201, 138, 61, 0.12);
}
.bugfix-field.is-filled {
border-color: rgba(79, 138, 114, 0.45);
background: rgba(79, 138, 114, 0.06);
}
.bugfix-field.is-empty {
border-color: rgba(230, 72, 51, 0.55);
background: rgba(230, 72, 51, 0.06);
}
.bugfix-field textarea {
width: 100%;
min-height: 44px;
padding: 8px 10px;
margin-top: 6px;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 0.82rem;
line-height: 1.5;
color: var(--text-primary, #F0F4F3);
background: rgba(0, 0, 0, 0.25);
border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
border-radius: 6px;
resize: vertical;
outline: none;
}
.bugfix-field textarea:focus {
border-color: rgba(201, 138, 61, 0.6);
}
/* Panel hasil pencocokan bug fix di modal hasil */
.res-bugfix-panel {
margin-top: 14px;
border: 1px solid rgba(201, 138, 61, 0.3);
border-radius: var(--radius-md, 10px);
background: rgba(201, 138, 61, 0.05);
overflow: hidden;
}
.res-bugfix-head {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
font-size: 0.85rem;
font-weight: 700;
color: #C98A3D;
background: rgba(201, 138, 61, 0.12);
border-bottom: 1px solid rgba(201, 138, 61, 0.2);
}
.res-bugfix-summary {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 10px 14px;
}
.bugfix-summary-item {
font-size: 0.78rem;
padding: 4px 10px;
border-radius: 100px;
background: var(--bg-hover, rgba(255, 255, 255, 0.06));
border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}
.bugfix-summary-item strong { font-size: 0.85rem; }
.bugfix-summary-item.is-correct { color: #4F8A72; border-color: rgba(79, 138, 114, 0.35); background: rgba(79, 138, 114, 0.08); }
.bugfix-summary-item.is-wrong { color: #E64833; border-color: rgba(230, 72, 51, 0.35); background: rgba(230, 72, 51, 0.08); }
.res-bugfix-list {
display: flex;
flex-direction: column;
gap: 6px;
padding: 0 14px 14px;
max-height: 220px;
overflow-y: auto;
}
.bugfix-result-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 8px;
font-size: 0.8rem;
border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}
.bugfix-result-item.is-correct { background: rgba(79, 138, 114, 0.08); border-color: rgba(79, 138, 114, 0.25); }
.bugfix-result-item.is-wrong { background: rgba(230, 72, 51, 0.08); border-color: rgba(230, 72, 51, 0.25); }
.bugfix-result-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
font-size: 0.7rem;
color: #fff;
flex-shrink: 0;
}
.bugfix-result-item.is-correct .bugfix-result-icon { background: #4F8A72; }
.bugfix-result-item.is-wrong .bugfix-result-icon { background: #E64833; }
.bugfix-result-label { font-weight: 700; flex-shrink: 0; }
.bugfix-result-answer { margin-left: auto; color: var(--text-secondary, #A9B8B6); }
.bugfix-result-answer code {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
color: #C98A3D;
background: rgba(0, 0, 0, 0.3);
padding: 2px 6px;
border-radius: 4px;
font-size: 0.75rem;
}
.bugfix-badge-table { margin-top: 2px; }
/* ============================================================================
PERBAIKAN BUG v2 - Multi-Soal (form admin, modal mahasiswa, panel penilaian)
============================================================================ */
/* --- Form Admin: daftar soal perbaikan bug --- */
.bugfix-admin-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 10px;
}
/* Info ringkas cara mengisi soal perbaikan bug (lebih rapi dari teks panjang) */
.bugfix-help {
display: flex;
flex-direction: column;
gap: 8px;
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 10px 12px;
margin-top: 4px;
}
.bugfix-help-tip {
font-size: 12px;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 6px;
}
.bugfix-help-tip i {
color: var(--brand-cyan);
font-size: 12px;
}
.bugfix-help-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
padding: 0;
margin: 0;
}
.bugfix-help-list li {
position: relative;
font-size: 12px;
line-height: 1.45;
color: var(--text-secondary);
padding-left: 16px;
}
.bugfix-help-list li::before {
content: "";
position: absolute;
left: 4px;
top: 7px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--brand-indigo);
opacity: 0.7;
}
.bugfix-help-list code {
font-family: var(--font-mono);
font-size: 11px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: 4px;
padding: 0 4px;
color: var(--accent-amber);
}
.bugfix-help-note {
display: flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
color: var(--text-tertiary);
border-top: 1px dashed var(--border-subtle);
padding-top: 8px;
}
.bugfix-help-note i {
color: var(--accent-emerald);
font-size: 11px;
}
.bugfix-question-editor {
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: 10px;
padding: 14px;
margin-bottom: 12px;
background: rgba(148, 163, 184, 0.06);
}
.bugfix-editor-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.bugfix-editor-num {
font-weight: 700;
font-size: 0.85rem;
color: var(--text-primary, var(--text-primary));
}
.bugfix-editor-num i {
color: #C98A3D;
margin-right: 6px;
}
.form-label-sm {
display: block;
font-size: 0.78rem;
font-weight: 600;
color: var(--text-secondary, var(--text-muted));
margin-bottom: 5px;
}
.form-label-sm i {
margin-right: 5px;
color: var(--brand-cyan);
}
.bugfix-editor .code-textarea {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 0.8rem;
}
/* --- Modal Mahasiswa: kartu per soal --- */
.bugfix-question-card {
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 10px;
padding: 14px;
margin-bottom: 14px;
background: rgba(148, 163, 184, 0.05);
}
.bugfix-question-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.bugfix-question-num {
font-weight: 700;
font-size: 0.85rem;
color: #C98A3D;
}
.bugfix-question-num i {
margin-right: 6px;
}
.bugfix-question-blanks {
font-size: 0.75rem;
color: var(--text-tertiary);
}
.bugfix-question-fields {
margin-top: 10px;
}
/* --- Blok TAHAP di dalam kartu penilaian (Tahap 2 pilar & Tahap 3 bug fix) --- */
.explain-stage-block {
border: 1px solid var(--border-subtle);
border-radius: 10px;
margin: 10px 0;
overflow: hidden;
background: var(--bg-surface);
transition: border-color 0.15s ease;
}
.explain-stage-block:hover {
border-color: var(--border-strong);
}
.explain-stage-block.is-collapsed {
background: var(--bg-elevated);
}
.explain-stage-block.is-collapsed .explain-stage-body {
display: none;
}
.explain-stage-head {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 9px 12px;
cursor: pointer;
user-select: none;
}
.explain-stage-head:hover {
background: var(--bg-hover);
}
/* Langkah 2 (pilar): head statis - pilar penilaian selalu tampil tanpa ciutkan */
.explain-stage-head-static {
cursor: default;
user-select: text;
}
.explain-stage-head-static:hover {
background: transparent;
}
.explain-stage-pillars-open .explain-stage-head-static {
background: var(--bg-surface);
border-bottom: 1px solid var(--border-subtle);
}
.explain-stage-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex: none;
border: 1px solid var(--border-subtle);
border-radius: 6px;
background: var(--bg-elevated);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.15s ease;
}
.explain-stage-toggle:hover {
color: var(--brand-indigo);
border-color: var(--border-strong);
}
.explain-stage-toggle i {
transition: transform 0.2s ease;
}
.explain-stage-block:not(.is-collapsed) .explain-stage-toggle i {
transform: rotate(180deg);
color: var(--brand-indigo);
}
.explain-stage-title {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
font-weight: 700;
color: var(--text-primary);
font-size: 0.88rem;
}
.explain-stage-title i {
color: var(--brand-indigo);
}
.explain-stage-title small {
font-weight: 400;
color: var(--text-tertiary);
font-size: 0.72rem;
}
/* Badge status Tahap 3 (class lama dipertahankan utk kompatibilitas handler) */
.explain-stage-head .explain-stage3-status {
margin-left: auto;
}
/* Status Tahap 4 - sejajar dengan Tahap 3: di kanan blok */
.explain-stage-head .explain-stage4-status {
margin-left: auto;
}
.explain-stage-body {
padding: 10px 12px;
border-top: 1px dashed var(--border-subtle);
}
/* Aksen khusus Tahap 3 - Perbaikan Bug */
.explain-stage-block.explain-stage-bugfix {
border-color: rgba(201, 138, 61, 0.3);
background: rgba(201, 138, 61, 0.04);
}
.explain-stage-block.explain-stage-bugfix .explain-stage-title i {
color: #C98A3D;
}
.explain-stage-block.explain-stage-bugfix.is-collapsed {
background: rgba(201, 138, 61, 0.06);
}
/* Aksen khusus Tahap 4 - Koding Studi Kasus */
.explain-stage-block.explain-stage-s4 {
border-color: rgba(36, 72, 85, 0.35);
background: rgba(36, 72, 85, 0.04);
}
.explain-stage-block.explain-stage-s4 .explain-stage-title i {
color: var(--brand-indigo);
}
.explain-stage-block.explain-stage-s4.is-collapsed {
background: rgba(36, 72, 85, 0.06);
}
.stage4-case-ref {
display: flex;
gap: 8px;
align-items: flex-start;
background: rgba(36, 72, 85, 0.08);
border: 1px dashed rgba(36, 72, 85, 0.35);
border-radius: 8px;
padding: 10px 12px;
font-size: 0.85rem;
line-height: 1.5;
margin-bottom: 12px;
}
.stage4-case-ref i {
color: var(--brand-indigo);
margin-top: 2px;
}
/* ==========================================================================
Stage4 Badge (Langkah 4 - Koding Studi Kasus)
========================================================================== */
.modal-header-badge.stage4-badge {
background: var(--color-primary);
box-shadow: 0 10px 28px rgba(53, 30, 28, 0.2);
color: #fff;
width: 56px;
height: 56px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
/* Stage4 score chip khusus */
.bugfix-score-chip.stage4-chip {
background: rgba(36, 72, 85, 0.14);
border-color: rgba(36, 72, 85, 0.35);
color: var(--brand-indigo);
}
/* ==========================================================================
Stage4 - Kotak Studi Kasus (case-box)
========================================================================== */
.stage4-case-box {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 16px 18px;
font-size: 0.9rem;
line-height: 1.7;
color: var(--text-primary);
position: relative;
overflow: hidden;
margin-bottom: 4px;
}
.stage4-case-box:empty {
display: none;
}
/* ==========================================================================
Stage4 - VS Code Window (Editor Wrap)
========================================================================== */
.stage4-editor-wrap {
background: #1e1e2e;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
display: flex;
flex-direction: column;
margin-bottom: 12px;
transition: box-shadow 0.3s ease;
}
.stage4-editor-wrap:focus-within {
box-shadow: 0 20px 56px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(36, 72, 85, 0.4), 0 0 20px rgba(36, 72, 85, 0.1);
}
[data-theme="light"] .stage4-editor-wrap, [data-theme="minimal"] .stage4-editor-wrap, [data-theme="chatgpt"] .stage4-editor-wrap, [data-theme="sakura-light"] .stage4-editor-wrap {
background: var(--bg-elevated);
border-color: rgba(0,0,0,0.12);
}
/* --- Title Bar (dots + tabs + lang) --- */
.stage4-titlebar {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
background: #16162a;
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: 0 14px;
min-height: 38px;
gap: 12px;
}
[data-theme="light"] .stage4-titlebar, [data-theme="minimal"] .stage4-titlebar, [data-theme="chatgpt"] .stage4-titlebar, [data-theme="sakura-light"] .stage4-titlebar {
background: #E9E3DA;
border-bottom-color: rgba(0,0,0,0.1);
}
/* Dots macOS */
.stage4-titlebar-dots {
display: flex;
gap: 7px;
align-items: center;
padding: 10px 0;
}
.s4-dot {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
transition: opacity 0.15s;
}
.s4-dot-red { background: #E64833; box-shadow: 0 0 6px rgba(230, 72, 51,0.5); }
.s4-dot-yellow { background: #C98A3D; box-shadow: 0 0 6px rgba(201, 138, 61,0.5); }
.s4-dot-green { background: #4F8A72; box-shadow: 0 0 6px rgba(79, 138, 114,0.5); }
.stage4-titlebar:hover .s4-dot { opacity: 0.85; }
/* Tab bar */
.stage4-tabs {
display: flex;
align-items: stretch;
height: 38px;
overflow: hidden;
}
.stage4-tab {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 0 16px;
font-family: var(--font-mono);
font-size: 12.5px;
font-weight: 500;
color: var(--text-muted);
border-right: 1px solid rgba(255,255,255,0.05);
cursor: default;
position: relative;
transition: color 0.15s, background 0.15s;
white-space: nowrap;
}
.stage4-tab.active {
background: #1e1e2e;
color: var(--text-primary);
border-bottom: 2px solid var(--brand-indigo);
}
[data-theme="light"] .stage4-tab.active, [data-theme="minimal"] .stage4-tab.active, [data-theme="chatgpt"] .stage4-tab.active, [data-theme="sakura-light"] .stage4-tab.active {
background: var(--bg-elevated);
color: var(--text-primary);
}
.stage4-tab-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--brand-indigo);
flex-shrink: 0;
opacity: 0.8;
}
/* Ikon file per bahasa */
.stage4-tab-icon { color: var(--text-tertiary); font-size: 12px; }
.stage4-tab[data-lang="cpp"] .stage4-tab-icon { color: #659ad2; }
.stage4-tab[data-lang="python"] .stage4-tab-icon { color: #4b8bbe; }
.stage4-tab[data-lang="js"] .stage4-tab-icon,
.stage4-tab[data-lang="javascript"] .stage4-tab-icon { color: #f7df1e; }
.stage4-tab[data-lang="php"] .stage4-tab-icon { color: #8993be; }
.stage4-titlebar-right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
/* Language tag badge */
.stage4-lang-tag {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--brand-indigo);
background: var(--brand-indigo-glow);
border: 1px solid color-mix(in srgb, var(--brand-indigo) 30%, transparent);
padding: 2px 9px;
border-radius: 999px;
}
/* --- CodeMirror mount area --- */
.stage4-editor {
flex: 1;
min-height: 280px;
overflow: hidden;
}
/* Override CodeMirror container untuk mengisi penuh */
.stage4-editor .cm-editor {
height: 100%;
min-height: 280px;
font-family: var(--font-mono) !important;
font-size: 14px !important;
}
.stage4-editor .cm-scroller {
min-height: 280px;
font-family: var(--font-mono) !important;
}
/* Pastikan tema oneDark tidak di-override theme global */
.stage4-editor .cm-editor.cm-focused { outline: none !important; }
/* --- Status Bar ala VS Code --- */
.stage4-statusbar {
display: flex;
align-items: center;
gap: 14px;
padding: 3px 14px;
font-size: 11px;
font-family: var(--font-mono);
color: var(--text-tertiary);
background: #0f0f1a;
border-top: 1px solid rgba(255,255,255,0.04);
user-select: none;
min-height: 24px;
}
[data-theme="light"] .stage4-statusbar, [data-theme="minimal"] .stage4-statusbar, [data-theme="chatgpt"] .stage4-statusbar, [data-theme="sakura-light"] .stage4-statusbar {
background: #E9E3DA;
color: var(--text-secondary);
border-top-color: rgba(0,0,0,0.08);
}
.stage4-status-item {
display: inline-flex;
align-items: center;
gap: 5px;
white-space: nowrap;
opacity: 0.85;
}
.stage4-status-spacer { flex: 1; }
.stage4-status-lang { color: var(--brand-indigo); opacity: 1; }
/* ==========================================================================
Stage4 - Terminal Panel (Output)
========================================================================== */
.stage4-terminal-wrap {
background: #0d0d1a;
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: 16px;
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
[data-theme="light"] .stage4-terminal-wrap, [data-theme="minimal"] .stage4-terminal-wrap, [data-theme="chatgpt"] .stage4-terminal-wrap, [data-theme="sakura-light"] .stage4-terminal-wrap {
background: var(--bg-elevated);
border-color: rgba(0,0,0,0.1);
}
.stage4-terminal-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: #16162a;
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: 0 14px;
min-height: 34px;
}
[data-theme="light"] .stage4-terminal-bar, [data-theme="minimal"] .stage4-terminal-bar, [data-theme="chatgpt"] .stage4-terminal-bar, [data-theme="sakura-light"] .stage4-terminal-bar {
background: var(--bg-elevated);
border-bottom-color: rgba(0,0,0,0.08);
}
.stage4-terminal-tabs {
display: flex;
align-items: stretch;
height: 34px;
}
.stage4-terminal-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 14px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
font-family: var(--font-mono);
color: var(--text-muted);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: color 0.15s;
}
.stage4-terminal-tab.active {
color: #4F8A72;
border-bottom-color: #4F8A72;
}
.stage4-terminal-hint {
font-size: 11px;
font-family: var(--font-mono);
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 5px;
opacity: 0.75;
}
.stage4-terminal-input {
display: block;
width: 100%;
background: transparent;
border: none;
outline: none;
resize: vertical;
padding: 12px 14px;
font-family: var(--font-mono);
font-size: 13.5px;
color: #4F8A72;
line-height: 1.65;
caret-color: #4F8A72;
scrollbar-width: thin;
}
.stage4-terminal-input::placeholder {
color: rgba(94, 184, 134, 0.55);
font-style: italic;
}
[data-theme="light"] .stage4-terminal-input, [data-theme="minimal"] .stage4-terminal-input, [data-theme="chatgpt"] .stage4-terminal-input, [data-theme="sakura-light"] .stage4-terminal-input {
color: #2F6B4F;
caret-color: #2F6B4F;
}
[data-theme="light"] .stage4-terminal-input::placeholder, [data-theme="minimal"] .stage4-terminal-input::placeholder, [data-theme="chatgpt"] .stage4-terminal-input::placeholder, [data-theme="sakura-light"] .stage4-terminal-input::placeholder {
color: rgba(42, 123, 84, 0.7);
}
/* ---- Panel Terminal ↔ Struktur File/Direktori (side-by-side) ---- */
.stage4-fs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
min-height: 220px;
}
.stage4-fs-terminal {
display: flex;
flex-direction: column;
border-right: 1px solid rgba(255,255,255,0.07);
}
[data-theme="light"] .stage4-fs-terminal, [data-theme="minimal"] .stage4-fs-terminal, [data-theme="chatgpt"] .stage4-fs-terminal, [data-theme="sakura-light"] .stage4-fs-terminal {
border-right-color: rgba(0,0,0,0.1);
}
.stage4-fs-terminal .stage4-terminal-input {
/* Tinggi DINAMIS: basis = tinggi isi (diatur JS auto-grow), lalu tumbuh
mengisi baris bila panel tree di kanan lebih tinggi (flex-grow).
Tidak lagi terkunci di min-height tetap → jawaban panjang tidak
terpotong/scroll di dalam field. */
flex: 1 1 auto;
resize: none;
min-height: 220px;
height: auto;
overflow-y: hidden;
}
.stage4-fs-tree {
display: flex;
flex-direction: column;
background: rgba(255,255,255,0.02);
min-width: 0;
}
[data-theme="light"] .stage4-fs-tree, [data-theme="minimal"] .stage4-fs-tree, [data-theme="chatgpt"] .stage4-fs-tree, [data-theme="sakura-light"] .stage4-fs-tree {
background: rgba(0,0,0,0.015);
}
.stage4-fs-tree-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 12px;
border-bottom: 1px solid rgba(255,255,255,0.06);
background: rgba(255,255,255,0.03);
}
[data-theme="light"] .stage4-fs-tree-head, [data-theme="minimal"] .stage4-fs-tree-head, [data-theme="chatgpt"] .stage4-fs-tree-head, [data-theme="sakura-light"] .stage4-fs-tree-head {
border-bottom-color: rgba(0,0,0,0.08);
background: rgba(0,0,0,0.02);
}
.stage4-fs-tree-title {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.04em;
font-family: var(--font-mono);
color: var(--text-secondary);
}
.stage4-fs-tree-hint {
font-size: 10px;
font-family: var(--font-mono);
color: var(--text-muted);
opacity: 0.75;
white-space: nowrap;
}
.stage4-fs-tree-body {
flex: 1;
overflow: auto;
padding: 10px 8px 12px;
font-family: var(--font-mono);
font-size: 12.5px;
line-height: 1.7;
/* Dinamis: tinggi mengikuti isi tree (tidak terkunci scroll internal) */
max-height: none;
}
/* ---- Preview live struktur file/direktori acuan di form pengaturan soal ---- */
.snip-s4-preview-head {
display: flex;
align-items: center;
gap: 6px;
margin-top: 10px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.04em;
font-family: var(--font-mono);
color: var(--text-secondary);
}
.snip-s4-preview-head i {
color: #C98A3D;
}
.snip-s4-preview-head small {
font-weight: 400;
opacity: 0.7;
}
.snip-s4-preview-tree {
margin-top: 6px;
}
/* ---- Tree struktur file/direktori di penilaian Admin/Asisten (Langkah 4) ---- */
.stage4-fs-tree-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.stage4-fs-tree-col {
min-width: 0;
}
.stage4-fs-tree-panel {
background: #101418;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 6px;
overflow: auto;
/* Dinamis: panel ikut tumbuh sesuai isi tree (preview & penilaian) */
max-height: none;
padding: 8px 6px;
font-family: var(--font-mono);
font-size: 12.5px;
line-height: 1.7;
}
[data-theme="light"] .stage4-fs-tree-panel, [data-theme="minimal"] .stage4-fs-tree-panel, [data-theme="chatgpt"] .stage4-fs-tree-panel, [data-theme="sakura-light"] .stage4-fs-tree-panel {
background: #1B1615;
border-color: rgba(0,0,0,0.12);
}
.stage4-fs-tree-panel .stage4-fs-row,
.stage4-fs-tree-panel .stage4-fs-empty {
color: #F2EDE7;
}
.stage4-fs-tree-panel .stage4-fs-name {
color: #F2EDE7;
}
.stage4-fs-tree-panel .stage4-fs-badge {
color: #B5ACA6;
background: rgba(255,255,255,0.08);
}
.stage4-fs-tree-panel .stage4-fs-icon {
color: #B5ACA6;
}
@media (max-width: 860px) {
.stage4-fs-tree-grid {
grid-template-columns: 1fr;
}
}
.stage4-fs-empty {
color: var(--text-muted);
font-size: 11.5px;
padding: 12px;
opacity: 0.75;
}
.stage4-fs-empty code {
font-family: var(--font-mono);
color: #A0C9CB;
}
.stage4-fs-empty kbd {
font-family: var(--font-mono);
background: rgba(160,201,203,0.15);
border: 1px solid rgba(160,201,203,0.35);
border-radius: 4px;
padding: 0 5px;
font-size: 10.5px;
color: #A0C9CB;
}
/* Di tema terang, tree mahasiswa berlatar terang → cyan terang tak terbaca.
Khusus view mahasiswa (.stage4-fs-tree-body) - panel penilaian admin
(.stage4-fs-tree-panel) tetap gelap dan memakai warna terangnya. */
[data-theme="light"] .stage4-fs-tree-body .stage4-fs-empty code, [data-theme="minimal"] .stage4-fs-tree-body .stage4-fs-empty code, [data-theme="chatgpt"] .stage4-fs-tree-body .stage4-fs-empty code, [data-theme="sakura-light"] .stage4-fs-tree-body .stage4-fs-empty code,
[data-theme="light"] .stage4-fs-tree-body .stage4-fs-empty kbd, [data-theme="minimal"] .stage4-fs-tree-body .stage4-fs-empty kbd, [data-theme="chatgpt"] .stage4-fs-tree-body .stage4-fs-empty kbd,
[data-theme="sakura-light"] .stage4-fs-tree-body .stage4-fs-empty kbd {
color: var(--brand-cyan);
}
[data-theme="light"] .stage4-fs-tree-body .stage4-fs-empty kbd, [data-theme="minimal"] .stage4-fs-tree-body .stage4-fs-empty kbd, [data-theme="chatgpt"] .stage4-fs-tree-body .stage4-fs-empty kbd, [data-theme="sakura-light"] .stage4-fs-tree-body .stage4-fs-empty kbd {
background: rgba(46, 107, 130, 0.12);
border-color: rgba(46, 107, 130, 0.3);
}
.stage4-fs-row {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
padding: 1px 6px;
border-radius: 5px;
transition: background-color 0.15s ease;
}
.stage4-fs-row.is-cwd {
background: rgba(160,201,203,0.12);
}
/* Baris folder bisa diklik untuk memindahkan posisi terminal (CWD) */
.stage4-fs-row[data-fs-type="dir"] {
cursor: pointer;
}
.stage4-fs-row[data-fs-type="dir"]:hover {
background: rgba(160,201,203,0.08);
}
/* Folder/file BARU beranimasi pop-in saat muncul (mkdir/touch/mv) */
.stage4-fs-row.is-new {
animation: stage4-fs-pop-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes stage4-fs-pop-in {
from { opacity: 0; transform: translateX(-10px) scale(0.98); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
/* Posisi CWD berpindah → baris folder tujuan berdenyut singkat */
.stage4-fs-row.is-cwd-pop {
animation: stage4-fs-cwd-pop 0.7s ease;
}
/* Folder baru yang sekaligus menjadi CWD (mkdir → auto-cd): jalankan kedua animasi */
.stage4-fs-row.is-new.is-cwd-pop {
animation: stage4-fs-pop-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both, stage4-fs-cwd-pop 0.7s ease;
}
@keyframes stage4-fs-cwd-pop {
0% { background: rgba(160,201,203,0.45); box-shadow: inset 2px 0 0 #A0C9CB; }
100% { background: rgba(160,201,203,0.12); box-shadow: inset 2px 0 0 rgba(160,201,203,0); }
}
/* Baris CWD di terminal berkilat saat posisi terminal berpindah */
.stage4-fs-cwd-line.cwd-changed {
animation: stage4-fs-cwd-line-flash 0.7s ease;
}
@keyframes stage4-fs-cwd-line-flash {
0% { background: rgba(160,201,203,0.3); }
100% { background: rgba(160,201,203,0.06); }
}
.stage4-fs-row .fs-indent {
display: inline-block;
flex: none;
}
.stage4-fs-icon {
flex: none;
width: 16px;
text-align: center;
color: var(--text-muted);
}
.stage4-fs-icon.is-dir {
color: #C98A3D;
}
.stage4-fs-icon.is-file {
color: #90AEAD;
}
/* View mahasiswa: di tema terang icon file memakai teal gelap agar kontras. */
[data-theme="light"] .stage4-fs-tree-body .stage4-fs-icon.is-file, [data-theme="minimal"] .stage4-fs-tree-body .stage4-fs-icon.is-file, [data-theme="chatgpt"] .stage4-fs-tree-body .stage4-fs-icon.is-file, [data-theme="sakura-light"] .stage4-fs-tree-body .stage4-fs-icon.is-file {
color: var(--brand-cyan);
}
.stage4-fs-name {
overflow: hidden;
text-overflow: ellipsis;
color: var(--text-primary);
}
.stage4-fs-name.is-dir {
font-weight: 600;
}
.stage4-fs-badge {
flex: none;
font-size: 9px;
letter-spacing: 0.06em;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
}
.stage4-fs-badge.is-dir {
color: var(--text-tertiary);
}
.stage4-fs-badge.is-file {
color: var(--text-tertiary);
}
.stage4-fs-cwd-line {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-bottom: 1px dashed rgba(255,255,255,0.07);
font-family: var(--font-mono);
font-size: 11.5px;
color: #A0C9CB;
background: rgba(160,201,203,0.06);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-theme="light"] .stage4-fs-cwd-line, [data-theme="minimal"] .stage4-fs-cwd-line, [data-theme="chatgpt"] .stage4-fs-cwd-line, [data-theme="sakura-light"] .stage4-fs-cwd-line {
border-bottom-color: rgba(0,0,0,0.1);
background: rgba(160,201,203,0.05);
}
/* Teks CWD memakai aksen tema: di tema terang terminal berlatar terang,
jadi cyan terang (#A0C9CB) tidak terbaca → pakai --brand-cyan yang gelap. */
[data-theme="light"] .stage4-fs-cwd-line, [data-theme="minimal"] .stage4-fs-cwd-line, [data-theme="chatgpt"] .stage4-fs-cwd-line, [data-theme="sakura-light"] .stage4-fs-cwd-line,
[data-theme="light"] .stage4-fs-cwd-line > i, [data-theme="minimal"] .stage4-fs-cwd-line > i, [data-theme="chatgpt"] .stage4-fs-cwd-line > i, [data-theme="sakura-light"] .stage4-fs-cwd-line > i,
[data-theme="light"] .stage4-fs-cwd-path, [data-theme="minimal"] .stage4-fs-cwd-path, [data-theme="chatgpt"] .stage4-fs-cwd-path, [data-theme="sakura-light"] .stage4-fs-cwd-path,
[data-theme="light"] .stage4-fs-cwd-prompt, [data-theme="minimal"] .stage4-fs-cwd-prompt, [data-theme="chatgpt"] .stage4-fs-cwd-prompt,
[data-theme="sakura-light"] .stage4-fs-cwd-prompt {
color: var(--brand-cyan);
}
.stage4-fs-cwd-line > i {
flex: none;
color: #A0C9CB;
font-size: 10px;
}
.stage4-fs-cwd-label {
flex: none;
font-weight: 700;
letter-spacing: 0.06em;
font-size: 10px;
opacity: 0.7;
}
.stage4-fs-cwd-path {
flex: none;
font-weight: 600;
color: #A0C9CB;
}
.stage4-fs-cwd-prompt {
flex: none;
font-weight: 700;
color: rgba(160,201,203,0.85);
}
.stage4-fs-cwd-line.is-root {
background: transparent;
}
.stage4-fs-cwd-line.is-root .stage4-fs-cwd-path {
/* Tetap terbaca di terminal gelap (dark) maupun terang (light) */
color: #90AEAD;
}
[data-theme="light"] .stage4-fs-cwd-line.is-root .stage4-fs-cwd-path, [data-theme="minimal"] .stage4-fs-cwd-line.is-root .stage4-fs-cwd-path, [data-theme="chatgpt"] .stage4-fs-cwd-line.is-root .stage4-fs-cwd-path, [data-theme="sakura-light"] .stage4-fs-cwd-line.is-root .stage4-fs-cwd-path {
color: var(--brand-cyan);
}
@media (max-width: 860px) {
.stage4-fs-grid {
grid-template-columns: 1fr;
}
.stage4-fs-terminal {
border-right: none;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
[data-theme="light"] .stage4-fs-terminal, [data-theme="minimal"] .stage4-fs-terminal, [data-theme="chatgpt"] .stage4-fs-terminal, [data-theme="sakura-light"] .stage4-fs-terminal {
border-bottom-color: rgba(0,0,0,0.1);
}
}
.stage4-compare-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 768px) {
.stage4-compare-grid {
grid-template-columns: 1fr;
}
}
.stage4-code,
.stage4-out {
max-height: 260px;
overflow: auto;
margin: 0;
}
.stage4-out code {
color: #4F8A72;
}
.bugfix-grade-question {
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 8px;
padding: 10px;
margin-top: 10px;
background: rgba(148, 163, 184, 0.05);
}
.bugfix-grade-question-head {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}
.bugfix-grade-qnum {
font-weight: 700;
font-size: 0.8rem;
color: var(--text-primary, var(--text-primary));
}
.bugfix-grade-qnum i {
color: #C98A3D;
margin-right: 5px;
}
.bugfix-grade-qscore {
font-size: 0.75rem;
font-weight: 600;
padding: 2px 10px;
border-radius: 20px;
}
.bugfix-grade-qscore.is-high { background: rgba(34, 197, 94, 0.15); color: #4F8A72; }
.bugfix-grade-qscore.is-mid { background: rgba(201, 138, 61, 0.15); color: #C98A3D; }
.bugfix-grade-qscore.is-low { background: rgba(230, 72, 51, 0.15); color: #E64833; }
.bugfix-compare-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.bugfix-compare-row {
display: grid;
grid-template-columns: 26px 1fr 1fr;
gap: 8px;
align-items: start;
border: 1px solid rgba(148, 163, 184, 0.15);
border-radius: 8px;
padding: 8px 10px;
}
/* Penilaian manual: baris netral tanpa tanda benar/salah otomatis */
.bugfix-compare-row.is-neutral {
grid-template-columns: 1fr;
border-color: rgba(148, 163, 184, 0.18);
background: rgba(148, 163, 184, 0.05);
}
.bugfix-compare-row.is-neutral.is-reference {
border-color: rgba(36, 72, 85, 0.28);
background: rgba(36, 72, 85, 0.06);
}
.bugfix-pending-note {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-radius: var(--radius-sm);
background: rgba(201, 138, 61, 0.08);
border: 1px solid rgba(201, 138, 61, 0.25);
color: var(--text-primary);
font-size: 13.5px;
line-height: 1.55;
text-align: left;
}
.bugfix-pending-note i { font-size: 20px; color: var(--accent-amber); margin-top: 2px; }
.bugfix-likert-box {
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed var(--border-color);
}
.bf-grade-btn-row {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--border-color);
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.bugfix-compare-row.is-correct { border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.05); }
.bugfix-compare-row.is-wrong { border-color: rgba(230, 72, 51, 0.4); background: rgba(230, 72, 51, 0.05); }
.bugfix-compare-row.is-correct .bugfix-compare-status { color: #4F8A72; }
.bugfix-compare-row.is-wrong .bugfix-compare-status { color: #E64833; }
.bugfix-compare-side code {
display: block;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 0.78rem;
color: var(--text-primary, var(--text-primary));
background: rgba(15, 23, 42, 0.6);
border-radius: 6px;
padding: 6px 8px;
margin-top: 4px;
white-space: pre-wrap;
word-break: break-word;
}
.bugfix-compare-label {
font-size: 0.7rem;
color: var(--text-tertiary, var(--text-tertiary));
}
.bugfix-compare-label i {
margin-right: 4px;
}
/* --- Modal Hasil Mahasiswa: rincian per soal --- */
.bugfix-result-question {
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 8px;
padding: 10px;
margin-bottom: 10px;
}
.bugfix-result-question-head {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 6px;
}
.bugfix-result-qnum {
font-weight: 700;
font-size: 0.8rem;
}
.bugfix-result-qnum i {
color: #C98A3D;
margin-right: 5px;
}
.bugfix-result-qscore {
font-size: 0.75rem;
font-weight: 600;
padding: 2px 10px;
border-radius: 20px;
}
.bugfix-result-qscore.is-correct { background: rgba(34, 197, 94, 0.15); color: #4F8A72; }
.bugfix-result-qscore.is-partial { background: rgba(201, 138, 61, 0.15); color: #C98A3D; }
.bugfix-result-qscore.is-wrong { background: rgba(230, 72, 51, 0.15); color: #E64833; }
/* ==========================================================================
UX POLISH - Animasi per Level
L1 (Dasar): editor fokus pada ketikan - karet cyan, pop karakter halus.
L2 (Menengah): explorer pembuatan file - aksen emerald, item muncul serempak.
L3 (Lanjutan): explorer struktur proyek - aksen violet, item reveal berurutan.
========================================================================== */
/* Karakter baru diketik: umpan balik taktil singkat (hanya char terakhir) */
.char.just-typed { animation: char-pop 0.16s ease-out; }
@keyframes char-pop {
0% { opacity: 0.3; }
40% { opacity: 1; }
70% { opacity: 0.75; }
100% { opacity: 1; }
}
/* Transisi masuk saat snippet / level baru dimuat */
.editor-body.snippet-in { animation: editor-in 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes editor-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Kilau sukses singkat saat satu tahap / seluruh sesi selesai.
Pakai shadow INSET - .editor-window memiliki overflow:hidden sehingga
glow ke luar (outset) akan terpotong dan tidak terlihat. */
.editor-body.stage-complete { animation: editor-success-flash 0.7s ease; }
@keyframes editor-success-flash {
0% { box-shadow: inset 0 0 0 0 rgba(79, 138, 114, 0); }
35% { box-shadow: inset 0 0 0 4px rgba(79, 138, 114, 0.28), inset 0 0 36px rgba(79, 138, 114, 0.22); }
100% { box-shadow: inset 0 0 0 0 rgba(79, 138, 114, 0); }
}
/* Explorer: animasi hanya saat STATUS berubah (bukan tiap ketikan) */
.tree-item.is-anim-in {
animation: tree-item-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
animation-delay: var(--tree-delay, 0ms);
}
@keyframes tree-item-in {
from { opacity: 0; transform: translateY(6px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Level 3: reveal berurutan (slide) - kesan membangun struktur proyek */
.vscode-explorer-panel[data-level="3"] .tree-item.is-anim-in {
animation-name: tree-item-slide;
}
@keyframes tree-item-slide {
from { opacity: 0; transform: translateX(10px); }
to { opacity: 1; transform: translateX(0); }
}
/* Item yang baru selesai: pop hijau singkat.
Prefix .vscode-explorer-panel agar specificity sama dengan aturan level-3
(0,4,0) & ditulis setelahnya, sehingga pop hijau menang di L2 maupun L3. */
.vscode-explorer-panel .tree-item.is-done.is-anim-in {
animation-name: tree-item-done;
}
@keyframes tree-item-done {
0% { opacity: 0; transform: scale(0.94); }
55% { opacity: 1; transform: scale(1.02); box-shadow: 0 0 16px rgba(79, 138, 114, 0.4); }
100% { opacity: 1; transform: scale(1); box-shadow: none; }
}
/* Aksen warna panel explorer per level (base badge - error/success tetap menang) */
.vscode-explorer-panel[data-level="2"] { border-color: var(--border-strong); }
.vscode-explorer-panel[data-level="2"] .explorer-status-badge:not(.status-error):not(.status-success) {
color: var(--text-secondary);
}
.vscode-explorer-panel[data-level="3"] { border-color: var(--border-strong); }
.vscode-explorer-panel[data-level="3"] .explorer-status-badge:not(.status-error):not(.status-success) {
color: var(--text-secondary);
}
/* Aksesibilitas: matikan animasi dekoratif bila pengguna meminta gerakan minimal */
@media (prefers-reduced-motion: reduce) {
.char.just-typed,
.char.current,
.editor-body.snippet-in,
.editor-body.stage-complete,
.tree-item.is-anim-in,
.vscode-explorer-panel {
animation: none !important;
transition: none !important;
}
}
/* ==========================================================================
PERBAIKAN BUG PER LEVEL - terminal highlight, fokus tes, contoh pola admin
========================================================================== */
/* Sorotan baris perintah shell ($ ...) pada template soal - L2 pembuatan file */
.bugfix-shell-line .bugfix-shell-prompt {
color: var(--accent-emerald);
font-weight: 700;
}
.bugfix-shell-line .bugfix-shell-cmd {
color: #7dd3fc;
}
[data-theme="light"] .bugfix-shell-line .bugfix-shell-cmd, [data-theme="minimal"] .bugfix-shell-line .bugfix-shell-cmd, [data-theme="chatgpt"] .bugfix-shell-line .bugfix-shell-cmd, [data-theme="sakura-light"] .bugfix-shell-line .bugfix-shell-cmd {
color: #4F8A72;
}
/* Strip fokus tes per level di modal mahasiswa (L2 = pembuatan file, L3 = modular) */
.bugfix-focus-hint {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 10px;
padding: 8px 12px;
border-radius: 8px;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-secondary);
background: rgba(144, 174, 173, 0.08);
border: 1px dashed rgba(144, 174, 173, 0.35);
}
.bugfix-focus-hint i { color: var(--brand-cyan); margin-top: 1px; }
.bugfix-focus-hint code { color: var(--brand-cyan); }
/* Contoh pola soal per level di form Admin (Langkah 3) */
.bugfix-example-wrap { margin-top: 10px; }
.bugfix-example-label {
font-size: 12px;
font-weight: 600;
color: var(--text-tertiary);
margin-bottom: 6px;
}
.bugfix-example-label i { color: var(--accent-amber); }
.bugfix-example {
font-family: var(--font-mono);
font-size: 12.5px;
line-height: 1.6;
color: var(--text-secondary);
background: var(--bg-base);
border: 1px dashed var(--border-strong);
border-radius: 8px;
padding: 10px 14px;
white-space: pre;
overflow-x: auto;
margin: 0;
}
/* ==========================================================================
DOKUMENTASI RIWAYAT JAWABAN - modal, kartu, unduh PNG, cetak/PDF
========================================================================== */
/* Tombol Dokumentasi di tabel riwayat */
.btn-doc-row {
background: rgba(144, 174, 173, 0.08);
border: 1px solid rgba(144, 174, 173, 0.3);
color: var(--brand-cyan);
font-size: 11.5px;
font-weight: 600;
padding: 4px 10px;
border-radius: 6px;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s ease;
}
.btn-doc-row:hover {
background: rgba(144, 174, 173, 0.18);
transform: translateY(-1px);
}
.btn-doc-result {
color: var(--brand-cyan);
border-color: rgba(144, 174, 173, 0.3);
}
.btn-doc-result:hover {
background: rgba(144, 174, 173, 0.15);
color: var(--brand-cyan);
}
/* Modal dokumentasi (dinamis) */
.doc-modal-backdrop {
position: fixed;
inset: 0;
z-index: 1100;
background: rgba(11, 13, 18, 0.72);
backdrop-filter: blur(5px);
display: flex;
align-items: flex-start;
justify-content: center;
padding: 32px 16px;
overflow-y: auto;
}
.doc-modal-backdrop.hidden { display: none; }
.doc-modal-dialog {
width: min(900px, 100%);
background: #ffffff;
border-radius: 16px;
padding: 18px;
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
}
.doc-modal-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.doc-modal-title {
font-weight: 700;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
}
.doc-modal-title i { color: var(--brand-cyan); }
.doc-modal-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.doc-scroll { max-height: calc(100vh - 160px); overflow-y: auto; border-radius: 12px; }
/* ==========================================================================
Kartu dokumentasi - Professional Academic Assessment Report
Editorial, restrained; hierarchy dibangun dari tipografi & whitespace.
========================================================================== */
.doc-card {
background: #ffffff;
color: #1F2937;
border-radius: 10px;
padding: 0;
font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
font-size: 13px;
}
/* ---- Header editorial (putih bersih, hanya tulisan & garis) ---- */
.doc-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 32px;
background: #ffffff;
padding: 28px 40px 26px;
margin: 0;
border-radius: 0;
border-bottom: 1px solid #D1D5DB;
}
.doc-brand-name {
font-size: 11px;
font-weight: 700;
color: #1F2937;
letter-spacing: 0.22em;
}
.doc-title {
font-size: 23px;
font-weight: 700;
color: #1F2937;
margin: 6px 0 4px;
letter-spacing: -0.01em;
}
.doc-head-sub {
font-size: 11.5px;
color: #6B7280;
margin: 0;
}
.doc-identity {
text-align: right;
flex: none;
}
.doc-id-row {
display: flex;
gap: 14px;
align-items: baseline;
justify-content: flex-end;
padding: 2px 0;
}
.doc-id-row span {
font-size: 9.5px;
font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.doc-id-row strong {
font-size: 13px;
color: #1F2937;
font-weight: 600;
}
/* ---- Ringkasan: metadata + performa (tanpa card) ---- */
.doc-overview {
padding: 20px 40px 18px;
border-bottom: 1px solid #D1D5DB;
}
.doc-overview-meta {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 18px;
padding-bottom: 14px;
border-bottom: 1px dashed #D1D5DB;
}
.doc-meta-item span {
display: block;
font-size: 9.5px;
font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.doc-meta-item strong {
display: block;
font-size: 12.5px;
color: #1F2937;
font-weight: 600;
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.doc-perf {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 18px;
padding-top: 14px;
}
.doc-perf-item span {
display: block;
font-size: 9.5px;
font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.doc-perf-item strong {
display: block;
font-size: 19px;
color: #1F2937;
font-weight: 700;
margin-top: 1px;
font-variant-numeric: tabular-nums;
}
/* Nilai akhir - sama dengan teks utama (tanpa aksen warna) */
.doc-perf-item.doc-perf-score strong {
color: #1F2937;
}
.doc-stage-times {
margin-top: 12px;
font-size: 11px;
color: #6B7280;
font-weight: 500;
}
/* ---- Section editorial (nomor + judul + sub) ---- */
.doc-sec {
padding: 22px 40px 0;
}
.doc-sec-head {
display: flex;
align-items: baseline;
gap: 14px;
border-bottom: 1px solid #D1D5DB;
padding-bottom: 8px;
margin-bottom: 14px;
background: none;
border-radius: 0;
}
.doc-sec-no {
font-size: 12px;
font-weight: 700;
color: #1F2937;
font-variant-numeric: tabular-nums;
flex: none;
}
.doc-sec-title-wrap {
flex: 1;
min-width: 0;
}
.doc-sec-title {
font-size: 14px;
font-weight: 700;
color: #1F2937;
margin: 0;
letter-spacing: 0.01em;
}
.doc-sec-sub {
font-size: 11px;
color: #6B7280;
margin: 1px 0 0;
}
.doc-sec-body {
padding-bottom: 2px;
}
/* ---- Kode block (putih, hanya tulisan & garis) ---- */
.doc-code {
background: #ffffff;
color: #1F2937;
font-family: 'JetBrains Mono', 'IBM Plex Mono', Consolas, 'Courier New', monospace;
font-size: 12px;
line-height: 1.65;
padding: 14px 16px;
border-radius: 6px;
border: 1px solid #D1D5DB;
overflow-x: auto;
white-space: pre;
margin: 0;
}
.doc-code-out {
background: #ffffff;
color: #4B5563;
border: 1px solid #D1D5DB;
border-radius: 6px;
}
.doc-code-key {
background: #ffffff;
color: #4B5563;
border: 1px solid #D1D5DB;
}
/* Sesi ketikan per level (Typing Code 01, 02, ...) di bagian 01 Kode Program */
.doc-typing-block {
margin-bottom: 14px;
}
.doc-typing-block:last-child {
margin-bottom: 0;
}
.doc-typing-label {
display: flex;
align-items: center;
gap: 7px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: #1F2937;
margin-bottom: 7px;
}
.doc-typing-label i {
color: #4B5563;
font-size: 11px;
}
/* Kotak Output mahasiswa (bagian 02): kosong, diisi setelah download docs */
.doc-output-blank {
border: 1.5px dashed #9CA3AF;
border-radius: 6px;
background: #ffffff;
min-height: 130px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 20px;
text-align: center;
}
.doc-output-blank-icon {
font-size: 20px;
color: #9CA3AF;
}
.doc-output-blank-text {
margin: 0;
font-size: 13px;
color: #6B7280;
font-style: italic;
}
.doc-shell-prompt { color: #1F2937; font-weight: 700; }
/* Monokrom: perintah terminal memakai teks utama, tanpa warna */
.doc-shell-cmd { color: #4B5563; }
.bugfix-marker {
background: #F3F4F6;
color: #1F2937;
border: 1px solid #D1D5DB;
border-radius: 3px;
padding: 0 3px;
font-weight: 700;
}
/* ---- QA (soal & jawaban) editorial ---- */
.doc-qa {
padding: 12px 0;
border-bottom: 1px solid #E9E3DA;
}
.doc-qa:last-child {
border-bottom: none;
}
.doc-qa-head {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 8px;
}
.doc-qa-no {
font-size: 12px;
font-weight: 700;
color: #1F2937;
font-variant-numeric: tabular-nums;
flex: none;
}
.doc-qa-title {
font-size: 13px;
font-weight: 700;
color: #1F2937;
margin: 0;
}
.doc-qa-label {
font-size: 10.5px;
font-weight: 600;
color: #7C898B;
text-transform: uppercase;
letter-spacing: 0.07em;
margin: 10px 0 4px;
}
.doc-qa-text {
margin: 0 0 4px;
font-size: 12.5px;
color: #5F6F72;
white-space: pre-wrap;
word-break: break-word;
}
.doc-qa-question {
color: #5F6F72;
}
.doc-qa-answer {
background: #ffffff;
border: 1px solid #D1D5DB;
border-radius: 6px;
padding: 10px 12px;
font-size: 12.5px;
color: #1F2937;
white-space: pre-wrap;
word-break: break-word;
}
.doc-blank {
font-size: 10px;
font-weight: 600;
color: #7C898B;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-right: 6px;
}
/* ---- Studi kasus: soft accent block ---- */
.doc-case {
background: #ffffff;
border: 1px solid #D1D5DB;
border-radius: 8px;
padding: 14px 16px;
}
.doc-case .doc-qa-label {
color: #6B7280;
}
.doc-case-desc {
margin: 0 0 10px;
font-size: 12.5px;
color: #1F2937;
white-space: pre-wrap;
}
/* ---- Rincian penilaian (assessment summary) ---- */
.doc-score-table {
max-width: 420px;
}
.doc-score-row {
display: flex;
align-items: baseline;
gap: 12px;
padding: 7px 0;
border-bottom: 1px solid #E9E3DA;
}
.doc-score-name {
font-size: 12.5px;
color: #5F6F72;
flex: none;
}
.doc-score-line {
flex: 1;
border-bottom: 1px dotted #D8D1C7;
}
.doc-score-val {
font-size: 15px;
font-weight: 700;
color: #1F2937;
font-variant-numeric: tabular-nums;
}
.doc-score-total {
border-bottom: none;
padding-top: 10px;
}
.doc-score-total .doc-score-name {
font-weight: 700;
color: #1F2937;
}
.doc-score-total .doc-score-val {
font-size: 19px;
color: #1F2937;
}
/* Rincian penilaian RINGKAS satu baris - dokumentasi simpel Level 1 mahasiswa */
.doc-score-simple {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-end;
gap: 8px 22px;
}
.doc-score-simple span {
font-size: 12.5px;
color: #5F6F72;
}
.doc-score-simple span strong {
color: #1F2937;
font-weight: 700;
margin-left: 3px;
}
.doc-score-simple .doc-score-final strong {
font-size: 19px;
}
/* ---- Bagian 03 Debugging gaya "Error Sintaks" (dokumentasi simpel L1) ----
Label chip melayang di tepi kotak + jawaban sebagai token di dalam kode. */
.doc-syntax-card {
margin-bottom: 28px;
}
.doc-syntax-card:last-child {
margin-bottom: 0;
}
.doc-syntax-header {
border-bottom: 1px solid #E5E7EB;
padding-bottom: 10px;
margin-bottom: 28px;
}
.doc-syntax-header h3 {
margin: 0;
font-size: 17px;
font-weight: 700;
letter-spacing: -0.01em;
color: #1F2937;
}
.doc-field-group {
position: relative;
margin-bottom: 26px;
}
.doc-field-group:last-child {
margin-bottom: 0;
}
.doc-field-label {
position: absolute;
top: -11px;
left: 14px;
background: #fff;
padding: 4px 12px;
border: 1px solid #D8D8D8;
border-radius: 10px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #666;
z-index: 1;
}
.doc-field-box {
background: #fff;
border: 1px solid #D8D8D8;
border-radius: 14px;
min-height: 74px;
padding: 22px 18px 14px;
font-size: 13px;
line-height: 2.05;
color: #222;
}
.doc-field-box.doc-code-box {
font-family: 'JetBrains Mono', 'IBM Plex Mono', Consolas, monospace;
}
.doc-code-box .doc-code-seg {
white-space: pre-wrap;
}
.doc-token {
display: inline-block;
padding: 2px 10px;
margin: 0 2px;
border: 1px solid #D5D5D5;
border-radius: 8px;
background: #FAFAFA;
font-weight: 600;
vertical-align: baseline;
}
.doc-token-empty {
color: #888;
letter-spacing: 2px;
}
.doc-text-box {
white-space: pre-wrap;
line-height: 1.7;
}
/* ==========================================================================
DOKUMEN PRAKTIKUM A4 - gaya akademik serif (dokumentasi simpel L1)
Adopsi template "TypeCode Practicum Report": Times New Roman, halaman
putih A4, section bergaris atas, tabel penilaian berbingkai.
========================================================================== */
.doc-card.docx-host {
background: none;
box-shadow: none;
}
.docx-page {
width: 210mm;
max-width: 100%;
min-height: 297mm;
margin: 0 auto;
background: #FFF;
padding: 18mm;
box-shadow: 0 0 12px rgba(0, 0, 0, .08);
font-family: "Times New Roman", Georgia, serif;
color: #000;
line-height: 1.6;
font-size: 14px;
}
.docx-page * {
color: #000;
}
.docx-topbar {
display: flex;
justify-content: space-between;
font-size: 13px;
padding-bottom: 6px;
border-bottom: 1px solid #BBB;
}
.docx-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
margin: 22px 0 18px;
}
.docx-title h1 {
font-size: 24px;
letter-spacing: .5px;
text-transform: uppercase;
margin: 0 0 6px;
}
.docx-title p {
color: #555;
font-style: italic;
font-size: 14px;
margin: 0;
}
.docx-identity {
border-collapse: collapse;
font-size: 14px;
}
.docx-identity td {
padding: 2px 8px;
}
.docx-identity td:first-child {
font-weight: bold;
}
.docx-section {
margin-top: 18px;
}
.docx-section-header {
border-top: 1px solid #BBB;
padding-top: 12px;
margin-bottom: 12px;
}
.docx-section-header h2 {
font-size: 17px;
margin: 0;
}
.docx-section-header p {
color: #555;
font-size: 14px;
margin: 0;
}
.docx-sub-title {
font-weight: bold;
margin: 12px 0 8px;
font-size: 15px;
}
.docx-code-box {
border: 0;
background: #FFFFFF;
padding: 14px 18px;
font-family: "Courier New", monospace;
font-size: 14px;
white-space: pre-wrap;
word-break: break-word;
}
.docx-note-box {
border: 1px dashed #999;
text-align: center;
padding: 18px;
font-style: italic;
color: #666;
}
.docx-question {
margin-bottom: 18px;
}
.docx-question h3 {
font-size: 15px;
margin: 0 0 8px;
}
.docx-answer-field {
border: 1px solid #AAA;
padding: 10px 12px;
min-height: 42px;
margin-top: 4px;
white-space: pre-wrap;
word-break: break-word;
}
.docx-label {
font-size: 13px;
font-weight: bold;
}
.docx-report-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.docx-report-table th,
.docx-report-table td {
border: 1px solid #000;
padding: 10px;
vertical-align: top;
text-align: left;
}
.docx-report-table th {
background: #FFFFFF;
width: 180px;
}
.docx-code-inline {
font-family: "Courier New", monospace;
white-space: pre-wrap;
word-break: break-word;
}
.docx-file-name {
font-weight: bold;
margin-bottom: 8px;
}
.docx-blank {
color: #888;
letter-spacing: 2px;
}
.docx-score {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
margin-top: 20px;
}
.docx-score span {
font-size: 16px;
}
.docx-score strong {
font-size: 34px;
}
.docx-footer {
margin-top: 28px;
border-top: 1px solid #BBB;
padding-top: 10px;
display: flex;
justify-content: space-between;
font-size: 13px;
color: #555;
}
@media print {
.doc-card.docx-host {
background: none;
}
.docx-page {
width: 100%;
min-height: auto;
box-shadow: none;
padding: 0;
}
}
/* ==========================================================================
DOKUMEN PEGANGAN ASISTEN/ADMIN - Dokumentasi Level 1 (kunci jawaban)
Serif A4 + tabel meta, kunci per tahap, rincian metrik penilaian.
========================================================================== */
.doca-page {
width: 210mm;
max-width: 100%;
min-height: 297mm;
margin: 0 auto;
background: #FFF;
padding: 18mm;
box-shadow: 0 0 10px rgba(0, 0, 0, .08);
font-family: "Times New Roman", Georgia, serif;
color: #222;
line-height: 1.55;
font-size: 14px;
}
.doca-topbar {
display: flex;
justify-content: space-between;
font-size: 13px;
border-bottom: 1px solid #444;
padding-bottom: 6px;
}
.doca-header {
display: flex;
justify-content: space-between;
gap: 24px;
margin: 18px 0;
}
.doca-title h1 {
font-size: 25px;
text-transform: uppercase;
margin: 0 0 5px;
}
.doca-title p {
font-size: 14px;
color: #555;
font-style: italic;
margin: 0;
}
.doca-identity {
border-collapse: collapse;
font-size: 14px;
}
.doca-identity td {
padding: 2px 8px;
}
.doca-identity td:first-child {
font-weight: bold;
}
.doca-meta {
width: 100%;
border-collapse: collapse;
margin: 10px 0 25px;
font-size: 13px;
}
.doca-meta td {
border: 1px solid #BFBFBF;
padding: 8px 10px;
}
.doca-meta td:first-child {
width: 140px;
font-weight: bold;
background: #FAFAFA;
}
.doca-section {
margin-top: 18px;
}
.doca-section-header {
border-top: 1px solid #777;
padding-top: 10px;
margin-bottom: 12px;
}
.doca-section-header h2 {
font-size: 18px;
margin: 0;
}
.doca-section-header p {
color: #555;
font-size: 14px;
margin: 0;
}
.doca-sub {
font-weight: bold;
margin: 12px 0 8px;
font-size: 15px;
}
.doca-code {
border: 1px solid #777;
background: #FCFCFC;
padding: 14px;
font-family: "Courier New", monospace;
font-size: 14px;
white-space: pre-wrap;
word-break: break-word;
}
.doca-answer-box {
border: 1px solid #AAA;
padding: 12px;
min-height: 46px;
margin-top: 4px;
white-space: pre-wrap;
word-break: break-word;
}
.doca-question {
margin-bottom: 18px;
}
.doca-question h3 {
font-size: 16px;
margin: 0 0 8px;
}
.doca-label {
font-size: 13px;
font-weight: bold;
margin-top: 8px;
}
.doca-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.doca-table th,
.doca-table td {
border: 1px solid #999;
padding: 10px;
vertical-align: top;
text-align: left;
}
.doca-table th {
width: 210px;
background: #FAFAFA;
}
.doca-mono {
font-family: "Courier New", monospace;
white-space: pre-wrap;
word-break: break-word;
}
.doca-file-name {
font-weight: bold;
margin-bottom: 8px;
}
.doca-blank {
color: #888;
letter-spacing: 2px;
}
.doca-score-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
font-size: 14px;
}
.doca-score-table td {
border: 1px solid #999;
padding: 8px 10px;
}
.doca-score-table td:nth-child(odd) {
width: 150px;
font-weight: bold;
background: #FAFAFA;
}
.doca-score-final-label {
text-align: right;
font-weight: bold;
}
.doca-score-final-val {
font-size: 24px;
font-weight: bold;
text-align: center;
}
.doca-footer {
margin-top: 28px;
border-top: 1px solid #777;
padding-top: 10px;
display: flex;
justify-content: space-between;
font-size: 12px;
color: #555;
}
@media print {
.doca-page {
width: 100%;
min-height: auto;
box-shadow: none;
padding: 0;
}
}
/* ==========================================================================
DOKUMEN MAHASISWA LEVEL 2 - A4 serif; kode per sesi + kotak penjelasan,
debugging tabel, studi kasus terminal/workspace, rincian metrik.
========================================================================== */
.docb-report {
width: 210mm;
max-width: 100%;
min-height: 297mm;
margin: 0 auto;
background: #FFF;
padding: 18mm;
box-shadow: 0 0 8px rgba(0, 0, 0, .08);
font-family: "Times New Roman", Georgia, serif;
color: #222;
line-height: 1.6;
font-size: 14px;
}
.docb-topbar {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #444;
padding-bottom: 6px;
font-size: 13px;
}
.docb-header {
display: flex;
justify-content: space-between;
gap: 24px;
margin: 18px 0 24px;
}
.docb-title h1 {
font-size: 25px;
text-transform: uppercase;
letter-spacing: .5px;
margin: 0 0 4px;
}
.docb-title p {
font-size: 14px;
color: #555;
font-style: italic;
margin: 0;
}
.docb-identity {
border-collapse: collapse;
font-size: 14px;
}
.docb-identity td {
padding: 3px 8px;
}
.docb-identity td:first-child {
font-weight: bold;
}
.docb-section {
margin-top: 26px;
}
.docb-section-header {
border-top: 1px solid #777;
padding-top: 10px;
margin-bottom: 14px;
}
.docb-section-header h2 {
font-size: 18px;
margin: 0;
}
.docb-section-header p {
color: #555;
font-size: 14px;
margin: 0;
}
.docb-sub-title {
font-size: 15px;
font-weight: bold;
margin: 18px 0 8px;
}
.docb-code-box {
border: 1px solid #777;
background: #FCFCFC;
padding: 12px 14px;
font-family: "Courier New", monospace;
font-size: 14px;
white-space: pre-wrap;
word-break: break-word;
}
.docb-explanation {
border: 1px solid #BDBDBD;
border-top: none;
padding: 12px 14px;
margin-bottom: 16px;
}
.docb-exp-label {
font-size: 13px;
font-weight: bold;
margin-bottom: 6px;
}
.docb-explanation p {
font-size: 14px;
text-align: justify;
margin: 0;
}
.docb-hint {
color: #888;
font-style: italic;
text-align: center;
}
.docb-question {
margin-bottom: 22px;
}
.docb-question h3 {
font-size: 16px;
margin: 0 0 8px;
}
.docb-label {
font-size: 13px;
font-weight: bold;
margin-bottom: 5px;
}
.docb-answer {
border: 1px solid #AAA;
padding: 10px;
min-height: 44px;
white-space: pre-wrap;
word-break: break-word;
}
.docb-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.docb-table th,
.docb-table td {
border: 1px solid #999;
padding: 10px;
vertical-align: top;
text-align: left;
}
.docb-table th {
width: 190px;
background: #F7F7F7;
}
.docb-mono {
font-family: "Courier New", monospace;
white-space: pre-wrap;
word-break: break-word;
}
.docb-file-name {
font-weight: bold;
margin-bottom: 6px;
}
.docb-file-block {
margin-bottom: 14px;
}
.docb-footer {
margin-top: 30px;
border-top: 1px solid #777;
padding-top: 10px;
display: flex;
justify-content: space-between;
font-size: 12px;
color: #555;
}
@media print {
.docb-report {
width: 100%;
min-height: auto;
margin: 0;
box-shadow: none;
padding: 0;
}
}
/* ==========================================================================
DOKUMEN MAHASISWA LEVEL 3 - variasi dari gaya Level 2 (docb-*):
kolom label lebih lebar, baris perintah run, nilai akhir tampil besar.
========================================================================== */
.docd-l3 .docb-table th {
width: 210px;
}
.docd-final-score {
display: flex;
justify-content: flex-end;
align-items: flex-end;
gap: 18px;
padding: 34px 0 18px;
border-bottom: 1px solid #777;
}
.docd-score-label {
font-size: 18px;
color: #222;
}
.docd-score-value {
font-size: 58px;
font-weight: 700;
line-height: 1;
color: #222;
}
@media print {
.docd-l3 {
width: 100%;
min-height: auto;
margin: 0;
box-shadow: none;
padding: 0;
}
}
/* ==========================================================================
DOKUMEN PEGANGAN ASISTEN/ADMIN LEVEL 2 - mahasiswa + kunci jawaban per
tahap (blok "assistant" berlatar abu), debugging + solusi, studi kasus
dengan workspace/output acuan, metrik penilaian.
========================================================================== */
.docc-report {
width: 210mm;
max-width: 100%;
min-height: 297mm;
margin: 0 auto;
background: #fff;
padding: 18mm;
box-shadow: 0 0 8px rgba(0, 0, 0, .08);
font-family: "Times New Roman", Georgia, serif;
color: #222;
line-height: 1.6;
font-size: 14px;
}
.docc-topbar {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #444;
padding-bottom: 6px;
font-size: 13px;
}
.docc-header {
display: flex;
justify-content: space-between;
gap: 24px;
margin: 18px 0 24px;
}
.docc-title h1 {
font-size: 24px;
margin: 0 0 4px;
}
.docc-title p {
font-size: 14px;
color: #555;
font-style: italic;
margin: 0;
}
.docc-identity {
border-collapse: collapse;
font-size: 14px;
}
.docc-identity td {
padding: 3px 8px;
}
.docc-identity td:first-child {
font-weight: bold;
}
.docc-section-header {
border-top: 1px solid #777;
padding-top: 10px;
margin-top: 28px;
margin-bottom: 12px;
}
.docc-section-header h2 {
font-size: 18px;
margin: 0;
}
.docc-section-header p {
color: #555;
font-size: 14px;
margin: 0;
}
.docc-question h3,
.docc-session h3 {
font-size: 15px;
margin: 18px 0 10px;
}
.docc-label {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
margin: 10px 0 5px;
}
.docc-box {
border: 1px solid #aaa;
padding: 12px;
background: #fcfcfc;
white-space: pre-wrap;
word-break: break-word;
}
.docc-code {
font-family: "Courier New", monospace;
white-space: pre-wrap;
word-break: break-word;
}
.docc-assistant {
border: 1px solid #666;
background: #fafafa;
padding: 12px;
margin-top: 8px;
}
.docc-assistant .docc-assistant-title {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 6px;
}
.docc-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
font-size: 14px;
}
.docc-table th,
.docc-table td {
border: 1px solid #999;
padding: 9px;
vertical-align: top;
text-align: left;
}
.docc-table th {
width: 210px;
background: #f7f7f7;
}
.docc-file-name {
font-weight: bold;
margin-bottom: 6px;
}
.docc-footer {
margin-top: 30px;
border-top: 1px solid #777;
padding-top: 10px;
display: flex;
justify-content: space-between;
font-size: 12px;
color: #555;
}
@media print {
.docc-report {
width: 100%;
min-height: auto;
margin: 0;
box-shadow: none;
padding: 0;
}
}
/* ---- Footer ---- */
.doc-footer {
margin-top: 28px;
padding: 14px 40px 18px;
border-top: 1px solid #D8D1C7;
font-size: 10.5px;
color: #7C898B;
display: flex;
justify-content: space-between;
gap: 12px;
}
.doc-footer-date {
color: #A0AAAC;
}
/* Cetak / PDF - hanya kartu dokumentasi yang tampil */
@media print {
body * { visibility: hidden; }
#doc-modal, #doc-modal * { visibility: visible; }
#doc-modal {
position: absolute !important;
inset: 0;
padding: 0;
background: #ffffff;
overflow: visible;
backdrop-filter: none;
}
#doc-modal .doc-modal-actions,
#doc-modal .doc-modal-title,
#doc-modal .doc-modal-btns { display: none !important; }
#doc-modal .doc-modal-dialog {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
border-radius: 0;
box-shadow: none;
background: #ffffff;
}
#doc-modal .doc-scroll { max-height: none; overflow: visible; border-radius: 0; }
.doc-card { border-radius: 0; box-shadow: none; }
.doc-modal-backdrop { display: block !important; position: static; }
}
/* ==========================================================================
ANTI COPY-PASTE (MODE UJIAN) - modal disqualify, toggle admin, badge
========================================================================== */
/* Hasil tidak sah (pelanggaran copy-paste) di tabel Admin & riwayat */
.badge-tag.badge-disqualified {
color: var(--text-primary);
font-weight: 700;
white-space: nowrap;
}
/* ========================================================================
Detil Pelanggaran Ujian (Admin) - kolom & modal di tabel Nilai & Capaian
======================================================================== */
.violation-badges {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
margin-bottom: 4px;
}
#violation-detail-modal .modal-card {
max-width: 560px;
}
.violation-detail-body {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 18px;
}
.violation-summary {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.violation-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.violation-item {
display: flex;
align-items: center;
gap: 12px;
background: rgba(148, 163, 184, 0.06);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md, 12px);
padding: 12px 14px;
transition: border-color 0.2s ease, background 0.2s ease;
}
.violation-item.violation-hit {
border-color: rgba(230, 72, 51, 0.45);
background: rgba(230, 72, 51, 0.06);
}
.violation-icon {
width: 38px;
height: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(148, 163, 184, 0.14);
color: var(--text-tertiary);
font-size: 15px;
flex-shrink: 0;
transition: background 0.2s ease, color 0.2s ease;
}
.violation-item.violation-hit .violation-icon {
background: rgba(230, 72, 51, 0.14);
color: var(--accent-rose, #E64833);
}
.violation-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
text-align: left;
}
.violation-info small {
color: var(--text-tertiary);
font-size: 12px;
}
.violation-count {
font-family: var(--font-mono);
font-weight: 700;
font-size: 15px;
color: var(--text-tertiary);
white-space: nowrap;
}
.violation-item.violation-hit .violation-count {
color: var(--accent-rose, #E64833);
}
.violation-note {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12.5px;
color: var(--text-tertiary);
background: rgba(201, 138, 61, 0.08);
border: 1px solid rgba(201, 138, 61, 0.25);
border-radius: var(--radius-md, 12px);
padding: 10px 12px;
line-height: 1.5;
}
.violation-note i {
color: var(--accent-amber, #C98A3D);
margin-top: 2px;
}
.violation-meta {
margin-top: 2px;
}
.violation-meta td {
padding: 6px 10px;
}
.violation-meta td:first-child {
color: var(--text-tertiary);
white-space: nowrap;
}
/* Modal Ujian Diberhentikan */
#disqualify-modal .modal-dialog-disqualify {
max-width: 460px;
text-align: center;
border: 1px solid rgba(230, 72, 51, 0.35);
box-shadow: 0 24px 60px rgba(230, 72, 51, 0.22);
}
#disqualify-modal .disqualify-badge {
width: 64px;
height: 64px;
margin: 0 auto 14px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
color: #fff;
background: #E64833;
box-shadow: 0 10px 24px rgba(230, 72, 51, 0.35);
}
#disqualify-modal h2 {
color: var(--accent-rose, #E64833);
letter-spacing: 1px;
}
#disqualify-modal .disqualify-note {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 18px 0 6px;
padding: 12px 14px;
border-radius: 10px;
background: rgba(230, 72, 51, 0.08);
border: 1px solid rgba(230, 72, 51, 0.25);
font-size: 13px;
line-height: 1.55;
color: var(--text-secondary);
text-align: left;
}
#disqualify-modal .disqualify-note i {
color: var(--accent-rose, #E64833);
font-size: 15px;
margin-top: 2px;
}
/* Kartu pengaturan Anti Copy-Paste di Panel Admin */
#settings-anticheat-card {
padding: 18px;
}
.settings-anticheat-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.settings-anticheat-label {
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.settings-anticheat-label i {
color: var(--accent-emerald, #4F8A72);
}
.settings-anticheat-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed var(--border-subtle);
}
/* Toggle switch (Admin) */
.admin-switch {
position: relative;
display: inline-block;
width: 52px;
height: 28px;
flex-shrink: 0;
cursor: pointer;
}
.admin-switch input {
opacity: 0;
width: 0;
height: 0;
}
.admin-switch-slider {
position: absolute;
inset: 0;
border-radius: 28px;
background: var(--border-subtle, var(--text-secondary));
transition: background 0.25s ease;
}
.admin-switch-slider::before {
content: "";
position: absolute;
width: 22px;
height: 22px;
left: 3px;
top: 3px;
border-radius: 50%;
background: #fff;
transition: transform 0.25s ease;
}
.admin-switch input:checked + .admin-switch-slider {
background: var(--accent-rose, #E64833);
}
.admin-switch input:checked + .admin-switch-slider::before {
transform: translateX(24px);
}
/* Toggle kecil untuk tabel snippet (Mode Ujian / Mode Belajar) */
.admin-switch-sm {
width: 38px;
height: 20px;
}
.admin-switch-sm .admin-switch-slider::before {
width: 16px;
height: 16px;
left: 2px;
top: 2px;
}
.admin-switch-sm input:checked + .admin-switch-slider::before {
transform: translateX(18px);
}
/* Aksesibilitas: tanpa animasi bagi pengguna gerakan minimal */
@media (prefers-reduced-motion: reduce) {
.admin-switch-slider,
.admin-switch-slider::before {
transition: none !important;
}
}
/* Status Bar ala VS Code di bawah editor ketik */
.editor-statusbar {
display: flex;
align-items: center;
gap: 16px;
padding: 5px 16px;
font-size: 11px;
font-family: var(--font-ui), sans-serif;
color: var(--text-tertiary);
background: var(--bg-editor);
border-top: 1px solid var(--border-editor);
user-select: none;
}
.editor-statusbar .status-item {
display: inline-flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
.editor-statusbar .status-spacer { flex: 1; }
.editor-statusbar .status-lang {
color: var(--brand-cyan);
font-weight: 700;
}
[data-theme="light"] .editor-statusbar, [data-theme="minimal"] .editor-statusbar, [data-theme="chatgpt"] .editor-statusbar, [data-theme="sakura-light"] .editor-statusbar {
background: var(--bg-elevated);
}
[data-theme="light"] .editor-statusbar .status-lang, [data-theme="minimal"] .editor-statusbar .status-lang, [data-theme="chatgpt"] .editor-statusbar .status-lang, [data-theme="sakura-light"] .editor-statusbar .status-lang {
color: var(--brand-indigo);
}
/* ==========================================================================
Responsive: Halaman Pengerjaan Soal (Practice View)
========================================================================== */
/* Stats Grid - layar sedang: 2 kolom (3 kartu + 1 kartu progress di bawah) */
@media (max-width: 820px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.stat-card-progress {
grid-column: 1 / -1;
}
}
/* Stats Grid - layar kecil: 2 kolom tetap, progress full-width */
@media (max-width: 560px) {
.stats-grid {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.stat-value {
font-size: 26px;
}
.stat-card {
padding: 14px 16px;
min-height: 90px;
}
}
/* Toolbar - layar kecil: wrap ke dua baris, divider hilang */
@media (max-width: 720px) {
.toolbar-section {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
}
.toolbar-section .toolbar-group + .toolbar-group {
padding-left: 0;
border-left: none;
padding-top: 12px;
border-top: 1px solid var(--border-subtle);
width: 100%;
}
}
/* Mode toggle - layar kecil: chip melebar penuh */
@media (max-width: 640px) {
.mode-toggle {
flex-direction: column;
width: 100%;
max-width: 420px;
}
.mode-chip {
width: 100%;
justify-content: flex-start;
}
}
/* ============================================================================
ABOUT / TENTANG TIM (dashboard setelah login)
============================================================================ */
.about-page {
max-width: 1080px;
margin: 0 auto;
padding: 32px 20px 48px;
color: var(--text-primary);
}
/* --- HERO --- */
.about-hero {
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: 20px;
padding: 48px 32px;
text-align: center;
margin-bottom: 40px;
position: relative;
overflow: hidden;
}
.about-hero-inner { position: relative; z-index: 1; }
.about-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: .78rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--brand-cyan);
background: rgba(144, 174, 173, 0.1);
border: 1px solid rgba(144, 174, 173, 0.25);
padding: 6px 14px;
border-radius: 999px;
margin-bottom: 18px;
}
.about-title {
font-size: clamp(1.7rem, 3.6vw, 2.6rem);
font-weight: 800;
line-height: 1.15;
margin: 0 0 12px;
color: var(--text-primary);
}
.about-subtitle {
max-width: 620px;
margin: 0 auto 26px;
color: var(--text-secondary);
font-size: 1rem;
line-height: 1.65;
}
.about-hero-stats {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 28px;
}
.about-stat-chip { text-align: center; }
.about-stat-chip strong {
display: block;
font-size: 1.55rem;
font-weight: 800;
color: var(--text-primary);
line-height: 1.1;
}
.about-stat-chip span { font-size: .75rem; color: var(--text-secondary); }
.about-stat-divider { width: 1px; height: 34px; background: var(--border-strong); }
.about-cta-btn {
display: inline-flex;
align-items: center;
gap: 9px;
background: var(--brand-indigo);
color: #ffffff;
font-weight: 700;
font-size: .92rem;
padding: 11px 26px;
border-radius: 12px;
text-decoration: none;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
box-shadow: 0 8px 22px var(--brand-indigo-glow);
}
.about-cta-btn:hover {
filter: brightness(1.12);
transform: translateY(-2px);
box-shadow: 0 12px 28px var(--brand-indigo-glow);
}
/* --- TEAM OVERVIEW --- */
.about-overview {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-bottom: 48px;
}
.about-overview-card {
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: 16px;
padding: 22px;
text-align: center;
transition: transform .18s ease, border-color .18s ease;
}
.about-overview-card:hover { transform: translateY(-3px); border-color: var(--border-accent); }
.about-overview-card i {
font-size: 1.35rem;
color: var(--brand-cyan);
margin-bottom: 10px;
}
.about-overview-card strong {
display: block;
font-size: 1.5rem;
font-weight: 800;
color: var(--text-primary);
}
.about-overview-card span { font-size: .82rem; color: var(--text-secondary); }
/* --- SECTION HEAD --- */
.about-section { margin-bottom: 52px; }
.about-section-head {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 26px;
}
.about-section-num {
font-size: .85rem;
font-weight: 800;
color: var(--brand-cyan);
background: rgba(144, 174, 173, 0.1);
border: 1px solid rgba(144, 174, 173, 0.25);
padding: 4px 10px;
border-radius: 8px;
line-height: 1.3;
flex-shrink: 0;
}
.about-section-head h2 { margin: 0 0 4px; font-size: 1.35rem; font-weight: 700; color: var(--text-primary); }
.about-section-head p { margin: 0; font-size: .88rem; color: var(--text-secondary); }
/* --- QA GRID --- */
.about-team-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 18px;
}
.about-team-card {
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: 16px;
padding: 24px 18px;
text-align: center;
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.about-team-card:hover {
transform: translateY(-4px);
border-color: var(--border-accent);
box-shadow: var(--box-shadow-editor);
}
.about-avatar { margin-bottom: 12px; }
.avatar-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 66px;
height: 66px;
border-radius: 50%;
color: #ffffff;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: .02em;
box-shadow: 0 4px 14px rgba(0,0,0,.35);
overflow: hidden;
position: relative;
border: 2px solid var(--border-subtle);
background: var(--bg-hover);
}
.about-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 50%;
transition: transform .25s ease;
}
.about-team-card:hover .about-avatar-img,
.about-dev-card:hover .about-avatar-img {
transform: scale(1.08);
}
.avatar-fallback {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.about-team-card h3 {
margin: 0 0 6px;
font-size: .95rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.35;
}
.about-role {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .74rem;
font-weight: 600;
color: var(--text-secondary);
}
/* --- DEVELOPER CARD --- */
.about-dev-card {
display: flex;
align-items: center;
gap: 20px;
background: var(--bg-surface);
border: 1px solid var(--border-strong);
border-radius: 18px;
padding: 26px 28px;
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease;
}
.about-dev-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px var(--brand-indigo-glow);
}
.about-dev-avatar .avatar-circle { width: 76px; height: 76px; font-size: 1.6rem; }
.about-dev-info h3 { margin: 0 0 6px; font-size: 1.2rem; font-weight: 800; color: var(--text-primary); }
.about-dev-role {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: .85rem;
font-weight: 700;
color: var(--brand-cyan);
margin-bottom: 4px;
}
.about-dev-focus { display: block; font-size: .82rem; color: var(--text-secondary); }
/* --- TEAM COLLABORATION FLOW --- */
.about-flow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: 16px;
padding: 24px 20px;
}
.about-flow-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
background: rgba(144, 174, 173, 0.08);
border: 1px solid rgba(144, 174, 173, 0.22);
border-radius: 12px;
padding: 14px 18px;
min-width: 120px;
flex: 1;
}
.about-flow-step i { font-size: 1.2rem; color: var(--brand-cyan); }
.about-flow-step span { font-size: .8rem; font-weight: 600; color: var(--text-primary); text-align: center; }
.about-flow-arrow { color: var(--text-tertiary); font-size: 1rem; }
/* --- FOOTER --- */
.about-footer {
border-top: 1px solid var(--border-subtle);
padding-top: 26px;
text-align: center;
color: var(--text-secondary);
}
.about-footer-brand {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
color: var(--text-primary);
font-weight: 700;
margin-bottom: 6px;
}
.about-footer-brand i { color: var(--brand-cyan); }
.about-footer p { margin: 0 0 6px; font-size: .85rem; }
.about-footer-copy { font-size: .76rem; color: var(--text-tertiary); }
/* --- SCROLL REVEAL --- */
#about-view .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
#about-view .reveal.reveal-visible { opacity: 1; transform: none; }
/* --- MODAL DETAIL ANGGOTA --- */
.about-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(2, 6, 23, 0.6);
backdrop-filter: blur(3px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1200;
padding: 20px;
}
[data-theme="light"] .about-modal-backdrop, [data-theme="minimal"] .about-modal-backdrop, [data-theme="chatgpt"] .about-modal-backdrop, [data-theme="sakura-light"] .about-modal-backdrop { background: rgba(15, 23, 42, 0.4); }
.about-modal {
background: var(--bg-elevated);
border: 1px solid var(--border-strong);
border-radius: 18px;
padding: 34px 30px;
text-align: center;
max-width: 380px;
width: 100%;
position: relative;
box-shadow: var(--box-shadow-modal);
}
.about-modal-close {
position: absolute;
top: 12px;
right: 12px;
background: var(--bg-hover);
border: none;
color: var(--text-secondary);
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
font-size: .95rem;
transition: background .15s ease, color .15s ease;
}
.about-modal-close:hover { background: var(--bg-active); color: var(--text-primary); }
.about-modal-avatar { margin-bottom: 14px; }
.about-modal-avatar .avatar-circle { width: 72px; height: 72px; font-size: 1.5rem; }
.about-modal h3 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 800; color: var(--text-primary); }
.about-modal-role {
display: inline-block;
font-size: .8rem;
font-weight: 700;
color: var(--brand-cyan);
margin-bottom: 10px;
}
.about-modal-detail { margin: 0; font-size: .86rem; color: var(--text-secondary); line-height: 1.6; }
/* --- RESPONSIVE --- */
@media (max-width: 640px) {
.about-hero { padding: 36px 20px; }
.about-hero-stats { gap: 12px; }
.about-overview { grid-template-columns: 1fr; }
.about-flow { flex-direction: column; }
.about-flow-arrow { transform: rotate(90deg); }
.about-dev-card { flex-direction: column; text-align: center; }
}
/* ==========================================================================
LANGKAH 4 - EMBEDDED ASSESSMENT FORM (tertanam di halaman, bukan popup)
========================================================================== */
.stage4-embedded {
position: static !important;
inset: auto !important;
background: transparent !important;
backdrop-filter: none !important;
z-index: auto !important;
/* Tersembunyi secara default - hanya tampil saat Tahap 4 dimulai
(kelas .hidden dihapus oleh showStage4Modal). Sebelumnya display:block
!important menang atas .hidden sehingga form tampil di menu Ujian
sebelum ujian dimulai. */
display: none !important;
padding: 0 !important;
align-items: normal !important;
justify-content: normal !important;
margin-top: 18px;
}
.stage4-embedded:not(.hidden) {
display: block !important;
}
.stage4-embedded .modal-dialog {
width: 100%;
max-width: none;
margin: 0;
background: var(--bg-elevated);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
padding: 22px;
box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28);
animation: snippetInlineIn 0.2s ease-out;
}
[data-theme="light"] .stage4-embedded .modal-dialog, [data-theme="minimal"] .stage4-embedded .modal-dialog, [data-theme="chatgpt"] .stage4-embedded .modal-dialog, [data-theme="sakura-light"] .stage4-embedded .modal-dialog {
background: #FFFFFF;
border-color: var(--border-strong);
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.1);
}
/* Head form tertanam */
.s4-embed-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-bottom: 14px;
margin-bottom: 6px;
border-bottom: 1px solid var(--border-subtle);
}
.s4-embed-title {
display: flex;
align-items: center;
gap: 12px;
min-width: 260px;
flex: 1;
}
.s4-embed-title h2 {
margin: 0 0 2px;
font-size: 1.2rem;
font-weight: 800;
text-align: left;
color: var(--text-primary);
}
.s4-embed-title .modal-sub {
text-align: left;
margin: 0;
font-size: 0.85rem;
color: var(--text-secondary);
}
.s4-embed-badge {
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #fff;
background: var(--color-primary);
box-shadow: 0 6px 16px rgba(53, 30, 28, 0.2);
}
.s4-embed-head .bugfix-score-chips {
align-self: center;
}
/* Step Assessment Form */
.s4-step {
margin-top: 18px;
padding: 14px 16px 16px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
}
[data-theme="light"] .s4-step, [data-theme="minimal"] .s4-step, [data-theme="chatgpt"] .s4-step, [data-theme="sakura-light"] .s4-step {
background: #F8F1E3;
}
.s4-step-head {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 12px;
}
.s4-step-num {
width: 26px;
height: 26px;
flex-shrink: 0;
border-radius: 8px;
background: rgba(36, 72, 85, 0.12);
color: var(--brand-indigo, #244855);
font-size: 0.75rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
}
.s4-step-head > div:last-child {
display: flex;
flex-direction: column;
gap: 1px;
}
.s4-step-head strong {
font-size: 0.95rem;
font-weight: 700;
color: var(--text-primary);
}
.s4-step-head small {
font-size: 0.78rem;
color: var(--text-tertiary);
}
.s4-step .stage4-case-box,
.s4-step .stage4-terminal-wrap,
.s4-step .stage4-editor-wrap {
margin-bottom: 0;
}
.stage4-embedded .stage4-case-box {
margin-bottom: 0;
}
.stage4-embedded .modal-snippet-title {
margin-top: 10px;
}
.stage4-embedded .modal-footer-btns {
margin-top: 18px;
}
@media (max-width: 640px) {
.s4-embed-head { flex-direction: column; }
.s4-embed-title { min-width: 0; }
.stage4-embedded .modal-dialog { padding: 14px; }
}
/* ==========================================================================
FORM ADMIN - Tahap 4 Level 3: Workspace Multi-File (Acuan)
========================================================================== */
.s4-files-admin-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin: 8px 0 10px;
}
.s4-file-editor {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--bg-surface);
padding: 12px 14px;
margin-bottom: 12px;
}
.s4-file-editor-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.s4-file-editor-num {
font-weight: 700;
font-size: 0.85rem;
color: var(--text-primary);
display: inline-flex;
align-items: center;
gap: 6px;
}
.s4-file-editor-num i { color: var(--brand-indigo, #244855); }
.s4-file-name-row {
margin-bottom: 8px;
}
.s4-file-name-row input {
width: 100%;
margin-top: 4px;
}
/* ==========================================================================
STAGE4 - Workspace Multi-File (Level 3): tab dinamis + tombol tambah
========================================================================== */
.stage4-tabs { overflow-x: auto; }
.stage4-tab-dyn {
cursor: pointer;
user-select: none;
}
.stage4-tab-dyn:hover {
background: rgba(255, 255, 255, 0.04);
color: var(--border-strong);
}
[data-theme="light"] .stage4-tab-dyn:hover, [data-theme="minimal"] .stage4-tab-dyn:hover, [data-theme="chatgpt"] .stage4-tab-dyn:hover, [data-theme="sakura-light"] .stage4-tab-dyn:hover {
background: #E9E3DA;
color: var(--text-secondary);
}
.stage4-tab-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
margin-left: 2px;
border: none;
background: transparent;
color: var(--text-muted);
font-size: 11px;
border-radius: 4px;
cursor: pointer;
flex-shrink: 0;
padding: 0;
}
.stage4-tab-close:hover {
background: rgba(230, 72, 51, 0.2);
color: #E64833;
}
[data-theme="light"] .stage4-tab-close:hover, [data-theme="minimal"] .stage4-tab-close:hover, [data-theme="chatgpt"] .stage4-tab-close:hover, [data-theme="sakura-light"] .stage4-tab-close:hover {
background: rgba(230, 72, 51, 0.15);
color: #E64833;
}
.stage4-add-file-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin: 4px 8px;
border: 1px dashed rgba(148, 163, 184, 0.5);
background: transparent;
color: var(--text-muted);
font-size: 13px;
border-radius: 6px;
cursor: pointer;
align-self: center;
flex-shrink: 0;
transition: all 0.15s;
}
.stage4-add-file-btn:hover {
border-color: var(--brand-indigo);
color: var(--brand-indigo);
background: var(--brand-indigo-glow);
}
[data-theme="light"] .stage4-add-file-btn:hover, [data-theme="minimal"] .stage4-add-file-btn:hover, [data-theme="chatgpt"] .stage4-add-file-btn:hover, [data-theme="sakura-light"] .stage4-add-file-btn:hover {
color: #244855;
background: rgba(36, 72, 85, 0.06);
}
.stage4-tab-rename {
width: 110px;
background: #1e1e2e;
border: 1px solid var(--brand-indigo);
border-radius: 4px;
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 12.5px;
padding: 2px 6px;
outline: none;
}
[data-theme="light"] .stage4-tab-rename, [data-theme="minimal"] .stage4-tab-rename, [data-theme="chatgpt"] .stage4-tab-rename, [data-theme="sakura-light"] .stage4-tab-rename {
background: #fff;
color: var(--text-primary);
}
/* Penilaian - workspace multi-file Level 3 */
.stage4-file-item {
margin-bottom: 10px;
}
.stage4-file-item-name {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 5px;
}
.stage4-file-item-name i { color: var(--brand-indigo, #244855); }
.stage4-file-item .explain-code {
margin: 0;
}
/* Dokumentasi - workspace multi-file Level 3 */
.doc-file-block {
margin-bottom: 10px;
}
.doc-file-name {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
color: #1F2937;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 5px;
}
.doc-file-name i { color: #4B5563; }
/* ==========================================================================
PILL BUTTON SYSTEM - gaya tombol pil + neumorphic (inspirasi: Uiverse xueyuantan)
Diterapkan ke SEMUA tombol di semua tema; warna mengikuti aksen tiap tema
lewat token --btn-bg / --btn-bg-hover / --btn-color / --btn-shadow-*.
Latar tombol dibuat transparan - warna tampil lewat lapisan ::before, dan
sapuan gradien saat hover lewat ::after (efek isi dari kiri ke kanan).
========================================================================== */
button {
width: auto;
min-width: 9em;
height: 3em;
padding: 0 1.6em;
border: none !important;
border-radius: 30em;
font-family: inherit;
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
background: transparent !important;
position: relative;
overflow: hidden;
z-index: 1;
box-shadow: 2px 2px 5px var(--btn-shadow-dark), -2px -2px 5px var(--btn-shadow-light) !important;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
line-height: 1;
text-decoration: none;
transition: box-shadow 0.3s ease, color 0.3s ease, transform 0.15s ease;
}
/* Button yang berdekatan (satu baris/grup) - matikan shadow agar tidak saling
menimpa button lainnya (toolbar, nav, ikon aksi tabel, chip, tab, dll). */
button + button,
button:has(+ button) {
box-shadow: none !important;
}
/* Lapisan dasar pil - warna permukaan tombol */
button::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--bg-surface);
z-index: -1;
pointer-events: none;
}
/* Sapuan gradien saat hover - mengisi dari kiri ke kanan */
button::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
border-radius: inherit;
background-image: linear-gradient(to right, var(--btn-bg) 0%, var(--btn-bg-hover) 100%);
transition: width 0.5s ease;
z-index: -1;
pointer-events: none;
}
button:hover::after { width: 100%; }
button:hover { color: var(--btn-color); }
button:active { transform: translateY(1px) scale(0.99); }
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Semua tombol: latar transparan - warna tampil lewat lapisan ::before */
.btn, .btn-primary, .btn-accent, .btn-secondary, .btn-danger, .btn-ghost,
.welcome-cta-btn, .auth-submit-btn, .admin-tab-btn, .exam-pill-btn, .results-subtab-btn,
.segment-btn, .mode-chip, .stage4-tab, .stage4-terminal-tab, .explain-code-tab, .pilar-tick-btn,
.nav-btn, .btn-icon, .editor-btn, .theme-menu-item, .sound-menu-item,
.theme-menu-close, .sound-menu-close, .about-modal-close, .modal-close-btn,
.toggle-password-btn, .btn-delete-row, .btn-doc-row, .stage4-add-file-btn,
.stage4-tab-close, .stage4-tab-rename, .btn-danger-ghost, .page-btn,
.sesi-lang-chip, .preset-chip, .explain-q-tab, .bugfix-q-tab, .stage4-file-tab,
.stage4-pill-btn, .btn-toggle-publish {
background: transparent !important;
}
/* --- Matikan lapisan background default ::before & gradien ::after pada tombol non-primary --- */
.btn-secondary::after,
.welcome-cta-btn.btn-secondary::after,
.btn-ghost::after,
.btn-danger-ghost::after,
.admin-tab-btn::after,
.exam-pill-btn::after,
.results-subtab-btn::after,
.nav-tab::after,
.segment-btn::after,
.mode-chip::after,
.pilar-tick-btn::after,
.stage4-tab::after,
.stage4-terminal-tab::after,
.explain-code-tab::after,
.auth-tab-item::after,
.theme-menu-item::after,
.sound-menu-item::after,
.nav-user-menu-item::after,
.preset-chip::after,
.sesi-lang-chip::after,
.explain-q-tab::after,
.bugfix-q-tab::after,
.stage4-file-tab::after,
.stage4-pill-btn::after,
.exam-qnav-btn:not(.answered)::after,
.btn-icon::after,
.nav-btn::after,
.modal-close-btn::after,
.auth-modal-close::after,
.editor-btn::after,
.btn-toggle-publish::after {
display: none !important;
}
.exam-pill-btn::before,
.admin-tab-btn:not(.active)::before,
.results-subtab-btn:not(.active)::before,
.nav-tab:not(.active)::before,
.segment-btn:not(.active)::before,
.mode-chip:not(.active)::before,
.pilar-tick-btn:not(.active)::before,
.stage4-tab:not(.active)::before,
.stage4-terminal-tab:not(.active)::before,
.explain-code-tab:not(.active)::before,
.auth-tab-item:not(.active)::before,
.preset-chip:not(.active)::before,
.sesi-lang-chip:not(.active)::before,
.explain-q-tab:not(.active)::before,
.bugfix-q-tab:not(.active)::before,
.stage4-file-tab:not(.active)::before,
.stage4-pill-btn:not(.active)::before,
.exam-qnav-btn:not(.active)::before,
.btn-icon::before,
.modal-close-btn::before,
.auth-modal-close::before,
.btn-toggle-publish::before {
display: none !important;
}
/* --- Aksen: tombol aksi utama memakai warna aksen tema --- */
.btn-primary,
.btn-accent,
.welcome-cta-btn.btn-primary,
.auth-submit-btn,
.admin-tab-btn.active,
.exam-pill-btn.active,
.results-subtab-btn.active,
.segment-btn.active,
.mode-chip.active,
.pilar-tick-btn.active,
.stage4-tab.active,
.stage4-terminal-tab.active,
.explain-code-tab.active,
.about-cta-btn {
color: var(--btn-color) !important;
}
.btn-primary::before,
.btn-accent::before,
.welcome-cta-btn.btn-primary::before,
.auth-submit-btn::before,
.admin-tab-btn.active::before,
.exam-pill-btn.active::before,
.results-subtab-btn.active::before,
.segment-btn.active::before,
.mode-chip.active::before,
.pilar-tick-btn.active::before,
.stage4-tab.active::before,
.stage4-terminal-tab.active::before,
.explain-code-tab.active::before,
.about-cta-btn::before {
background: var(--btn-bg) !important;
}
/* --- Tombol berbahaya --- */
.btn-danger,
.btn-danger.btn-sm,
.btn-icon.btn-danger,
.btn-icon-danger {
color: #ffffff !important;
}
.btn-danger::before,
.btn-danger.btn-sm::before,
.btn-icon.btn-danger::before,
.btn-icon-danger::before {
background: var(--color-danger) !important;
}
.btn-danger::after,
.btn-danger.btn-sm::after,
.btn-icon.btn-danger::after,
.btn-icon-danger::after {
display: none;
}
.btn-danger:hover,
.btn-danger.btn-sm:hover,
.btn-icon.btn-danger:hover,
.btn-icon-danger:hover {
color: #ffffff !important;
filter: brightness(0.92);
}
/* --- Tombol netral / sekunder --- */
.btn-secondary,
.welcome-cta-btn.btn-secondary,
.btn-ghost {
color: var(--text-primary) !important;
}
.btn-secondary::before,
.welcome-cta-btn.btn-secondary::before,
.btn-ghost::before {
background: var(--bg-elevated) !important;
}
.btn-danger-ghost {
color: var(--color-danger) !important;
}
.btn-danger-ghost::before {
background: var(--bg-elevated) !important;
}
/* ==========================================================================
KONSISTENSI HOVER DI SEMUA TEMA (DARK: LEBIH TERANG, LIGHT: LEBIH GELAP)
Semua tab, pill, chip, secondary button, icon button, dan menu item
========================================================================== */
.btn-secondary:hover:not(:disabled),
.welcome-cta-btn.btn-secondary:hover:not(:disabled),
.btn-ghost:hover:not(:disabled),
.admin-tab-btn:hover:not(.active),
.exam-pill-btn:hover:not(.active),
.results-subtab-btn:hover:not(.active),
.nav-tab:hover:not(.active),
.segment-btn:hover:not(.disabled):not(.active),
.mode-chip:hover:not(.active),
.pilar-tick-btn:hover:not(.active),
.stage4-tab:hover:not(.active),
.stage4-terminal-tab:hover:not(.active),
.explain-code-tab:hover:not(.active),
.auth-tab-item:hover:not(.active),
.preset-chip:hover:not(.active),
.sesi-lang-chip:hover:not(.active),
.explain-q-tab:hover:not(.active),
.bugfix-q-tab:hover:not(.active),
.stage4-file-tab:hover:not(.active),
.stage4-pill-btn:hover:not(.active),
.exam-qnav-btn:hover:not(.active),
.btn-icon:hover,
.nav-btn:hover,
.modal-close-btn:hover,
.auth-modal-close:hover,
.editor-btn:hover:not(:disabled),
.btn-editor-action:hover:not(:disabled),
.btn-toggle-publish:hover,
.theme-menu-item:hover,
.sound-menu-item:hover,
.nav-user-menu-item:hover:not(.nav-user-menu-logout) {
background: var(--bg-hover) !important;
color: var(--text-primary) !important;
border-color: var(--border-strong) !important;
}
/* --- Question Strip (UTS/UAS): kebal dari pill-button-system ---
Override eksplisit per-state agar warna aktif, terjawab, dan review tampil tajam. */
.question,
.exam-qnav-btn {
background: var(--bg-elevated, #262626) !important;
border: 1px solid var(--border-subtle, #3A3A3A) !important;
border-radius: 12px !important;
box-shadow: none !important;
color: var(--text-secondary, #CFCFCF) !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
padding: 0 !important;
font-size: 15px !important;
font-weight: 600 !important;
font-family: var(--font-code, monospace) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.2s ease !important;
}
.question:hover:not(.active),
.exam-qnav-btn:hover:not(.active) {
background: var(--bg-hover, #313131) !important;
color: var(--text-primary, #FFFFFF) !important;
border-color: var(--border-strong, #505050) !important;
transform: translateY(-1px) !important;
}
.question.active,
.exam-qnav-btn.active {
background: #0F766E !important;
border-color: #14B8A6 !important;
color: #FFFFFF !important;
box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.25) !important;
}
.question.answered:not(.active),
.exam-qnav-btn.answered:not(.active) {
background: #1D4ED8 !important;
border-color: #3B82F6 !important;
color: #FFFFFF !important;
}
.question.review:not(.active),
.exam-qnav-btn.review:not(.active) {
background: #B45309 !important;
border-color: #F59E0B !important;
color: #FFFFFF !important;
}
.question:disabled,
.exam-qnav-btn:disabled {
opacity: 0.4 !important;
cursor: not-allowed !important;
transform: none !important;
}
/* --- Tombol ikon kecil - bulat & ringkas --- */
button.nav-btn,
button.btn-icon,
button.modal-close-btn,
button.auth-modal-close,
button.modal-close,
button.theme-menu-close,
button.sound-menu-close,
button.about-modal-close,
button.toggle-password-btn,
button.btn-delete-row,
button.stage4-add-file-btn,
button.stage4-tab-close,
button.stage4-tab-rename {
width: 2.4em !important;
height: 2.4em !important;
min-width: 0 !important;
padding: 0 !important;
border-radius: 50% !important;
font-size: 14px !important;
justify-content: center;
box-shadow: 2px 2px 5px var(--btn-shadow-dark), -2px -2px 5px var(--btn-shadow-light) !important;
}
button.nav-btn.btn-auth {
width: auto !important;
min-width: 0 !important;
height: 2.4em !important;
padding: 0 1.2em !important;
font-size: 14px !important;
border-radius: 30em !important;
gap: 8px;
white-space: nowrap;
max-width: 280px;
}
button.modal-close-btn { width: 2.2em !important; height: 2.2em !important; font-size: 18px !important; }
button.auth-modal-close { font-size: 18px !important; }
button.modal-close { font-size: 20px !important; }
/* Tombol lihat/sembunyi password di dalam input - tanpa lapisan, shadow, & sapuan */
button.toggle-password-btn {
box-shadow: none !important;
background: transparent !important;
}
button.toggle-password-btn::before,
button.toggle-password-btn::after {
display: none !important;
}
button.toggle-password-btn:hover {
background: var(--bg-hover) !important;
color: var(--text-primary) !important;
}
/* --- Tombol kecil bertulisan (row history dll.) --- */
button.btn-doc-row {
min-width: 0 !important;
height: 2.4em !important;
padding: 0 1em !important;
font-size: 12px !important;
font-weight: 700 !important;
}
/* --- Tombol khusus yang tertimpa base button (QA fix) --- */
/* Tombol mata pada form user admin - tetap bulat kecil di dalam input */
button.password-toggle {
width: 30px !important;
height: 30px !important;
min-width: 0 !important;
padding: 0 !important;
border-radius: var(--radius-sm) !important;
box-shadow: none !important;
background: transparent !important;
font-size: 14px !important;
}
button.password-toggle::before,
button.password-toggle::after { display: none !important; }
button.password-toggle:hover {
color: var(--text-primary) !important;
background: var(--bg-hover) !important;
}
/* Ikon pilihan pada icon picker (grid 40px) - tanpa shadow/sapuan */
button.icon-option {
min-width: 0 !important;
height: 40px !important;
padding: 0 !important;
border-radius: var(--radius-sm) !important;
box-shadow: none !important;
background: var(--bg-base) !important;
border: 1px solid var(--border-subtle) !important;
}
button.icon-option::before,
button.icon-option::after { display: none !important; }
button.icon-option:hover {
background: var(--bg-hover) !important;
border-color: var(--border-strong) !important;
transform: translateY(-1px);
}
button.icon-option.active {
background: var(--brand-indigo-glow) !important;
border-color: var(--brand-indigo) !important;
color: var(--brand-indigo) !important;
}
/* Toggle ciutkan/buka kartu & tahap pada panel penilaian - kotak kecil */
button.explain-card-toggle,
button.explain-stage-toggle {
min-width: 0 !important;
padding: 0 !important;
box-shadow: none !important;
background: var(--bg-surface) !important;
border: 1px solid var(--border-subtle) !important;
font-size: 13px !important;
}
button.explain-card-toggle { width: 26px !important; height: 26px !important; border-radius: 7px !important; }
button.explain-stage-toggle { width: 24px !important; height: 24px !important; border-radius: 6px !important; background: var(--bg-elevated) !important; }
button.explain-card-toggle::before,
button.explain-card-toggle::after,
button.explain-stage-toggle::before,
button.explain-stage-toggle::after { display: none !important; }
/* Chip preset jam sesi - pil kecil */
button.preset-chip {
min-width: 0 !important;
height: auto !important;
padding: 4px 12px !important;
border-radius: 999px !important;
box-shadow: none !important;
background: var(--bg-elevated) !important;
border: 1px solid var(--border-subtle) !important;
font-size: 12px !important;
font-weight: 500 !important;
}
button.preset-chip::before,
button.preset-chip::after { display: none !important; }
button.preset-chip:hover {
background: var(--bg-hover) !important;
border-color: var(--border-strong) !important;
color: var(--text-primary) !important;
}
/* Tab Masuk / Daftar Akun - pil ringkas; aktif terisi aksen tema */
button.auth-tab-item {
min-width: 0 !important;
height: 2.6em !important;
padding: 0 1.2em !important;
font-size: 13px !important;
border-radius: 30em !important;
box-shadow: none !important;
}
button.auth-tab-item::after { display: none !important; }
button.auth-tab-item.active { color: var(--btn-color) !important; }
button.auth-tab-item.active::before { background: var(--btn-bg) !important; }
/* Item menu akun (profil/tentang/keluar) - hover tetap terlihat */
button.nav-user-menu-item:hover {
background: var(--bg-hover) !important;
color: var(--text-primary) !important;
}
button.nav-user-menu-item.nav-user-menu-logout:hover {
background: rgba(224, 90, 71, 0.12) !important;
color: var(--color-danger) !important;
}
/* Tombol toggle aktif/nonaktif di dalam chip bahasa toolbar admin */
button.btn-toggle-lang {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
height: 100% !important;
width: auto !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--text-primary) !important;
font-size: 13px !important;
cursor: pointer !important;
position: relative !important;
overflow: visible !important;
line-height: 1 !important;
}
button.btn-toggle-lang::before,
button.btn-toggle-lang::after {
display: none !important;
}
button.btn-toggle-lang i.fa-solid,
button.btn-toggle-lang i.fa-brands {
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
line-height: 1;
flex-shrink: 0;
}
span.lang-round.is-inactive button.btn-toggle-lang i {
filter: grayscale(100%);
opacity: 0.7;
}
/* Tombol hapus bahasa di toolbar context */
button.btn-delete-lang {
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
min-height: 22px !important;
padding: 0 !important;
margin: 0 0 0 2px !important;
border: none !important;
border-radius: 50% !important;
background: transparent !important;
box-shadow: none !important;
color: var(--text-tertiary) !important;
font-size: 10.5px !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.2s ease !important;
flex-shrink: 0 !important;
}
button.btn-delete-lang::before,
button.btn-delete-lang::after {
display: none !important;
}
button.btn-delete-lang:hover {
background: rgba(239, 68, 68, 0.15) !important;
color: var(--accent-rose, #ef4444) !important;
transform: scale(1.1) !important;
}
/* --- Item menu dropdown - baris penuh pil --- */
button.theme-menu-item,
button.sound-menu-item {
width: 100% !important;
min-width: 0 !important;
height: auto !important;
justify-content: flex-start !important;
text-align: left;
padding: 0.65em 1em !important;
font-size: 13px !important;
font-weight: 600 !important;
border-radius: 30em !important;
}
button.theme-menu-item.active::before,
button.sound-menu-item.active::before {
background: var(--bg-hover) !important;
}
.mode-chip.active .mode-chip-sub { color: var(--btn-color) !important; opacity: 0.85; }
/* --- Chip & tab - pil ringkas --- */
button.segment-btn,
button.mode-chip,
button.admin-tab-btn,
button.exam-pill-btn,
button.results-subtab-btn,
button.stage4-tab,
button.stage4-terminal-tab,
button.explain-code-tab,
button.pilar-tick-btn {
width: auto !important;
min-width: 0 !important;
height: 2.6em !important;
padding: 0 1.2em !important;
font-size: 13px !important;
font-weight: 700 !important;
}
/* Tab navigasi utama - Floating Pill Apple Style */
button.nav-tab {
width: auto !important;
min-width: 0 !important;
height: auto !important;
padding: 10px 18px !important;
border-radius: 999px !important;
font-size: 13.5px !important;
font-weight: 500 !important;
color: var(--text-secondary, #666666) !important;
background: transparent !important;
border: none !important;
}
button.nav-tab:hover {
background: var(--bg-hover, #ECE9E2) !important;
color: var(--text-primary) !important;
}
button.nav-tab.active {
background: var(--accent-amber, #D97706) !important;
color: #ffffff !important;
font-weight: 600 !important;
box-shadow: 0 2px 10px rgba(217, 119, 6, 0.35) !important;
}
button.nav-tab.active::before {
display: none !important;
}
button.nav-tab.active i {
color: #ffffff !important;
}
/* --- Tombol kecil (.btn-sm) & tombol editor --- */
button.btn-sm,
button.editor-btn {
min-width: 0 !important;
height: 2.4em !important;
padding: 0 1em !important;
font-size: 12px !important;
}
/* --- Tombol bahasa - sesuaikan ukuran pil dengan ikon brand --- */
#language-selector-group .segment-btn {
height: 2.8em !important;
padding: 0 1.3em !important;
font-size: 13.5px !important;
gap: 8px;
}
#language-selector-group .segment-btn i {
font-size: 16px;
line-height: 1;
}
/* --- Level 1/2/3 - beri jarak antar pil supaya tidak berdempetan --- */
#level-selector-group {
gap: 6px !important;
}
#language-selector-group .segment-btn,
#level-selector-group .segment-btn {
box-shadow: 2px 2px 5px var(--btn-shadow-dark), -2px -2px 5px var(--btn-shadow-light) !important;
}
/* --- Tombol berbentuk link/anchors (bukan