/* Import a suitable retro font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

body {
    background: #f1f3f6;
/*     font-family: 'Anton', 'Inter', Arial, sans-serif; */
    font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    margin: 0;
    transition: background 0.3s, color 0.3s;
    min-height: 100vh;
}

.container {
    height: 200px;
    position: relative;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

#timer-display {
    font-size: 8rem;
    font-weight: 700;
    text-align: center;
    margin: 32px 0 80px 0; /* Adjust these margins as needed */
    letter-spacing: 4px;
    background: #f1f3f6;
    border-radius: 32px;
    box-shadow: 8px 8px 24px #d1d9e6, -8px -8px 24px #ffffff;
    padding: 24px 0;
    transition: background 0.3s, color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.flip-separator {
    font-size: 8rem;
    color: #d1d9e6;
    margin: 0 16px;
    user-select: none;
    font-weight: bold;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Warning color for timer digits only */
/* .nums.warning .num {
    color: #d32f2f !important;
} */

#app {
    max-width: 600px;
    margin: 40px auto;
    padding: 32px;
    border-radius: 24px;
    box-shadow: 8px 8px 24px #d1d9e6, -8px -4px 24px #ffffff;
    background: transparent;
    transition: background 0.3s, color 0.3s;
}

#question-label {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 8px;
    font-weight: 600;
    letter-spacing: 1px;
}

#timer-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

#timer-controls button {
    background: #f1f3f6;
    border: none;
    border-radius: 12px;
    font-size: 1.2rem;
    padding: 10px 16px;
    cursor: pointer;
    box-shadow: 4px 4px 12px #d1d9e6, -4px -4px 12px #ffffff;
    transition: box-shadow 0.2s;
}

#timer-controls button:active {
    box-shadow: inset 2px 2px 6px #d1d9e6, inset -2px -2px 6px #ffffff;
}

#timer-display.warning {
    color: #fff;
    background: #d32f2f;
    /* keep neumorphic shadow for consistency */
    box-shadow: 8px 8px 24px #d1d9e6, -8px -8px 24px #ffffff;
    transition: background 0.3s, color 0.3s;
}
/* 
#timer-display.warning span {
    color: #d32f2f;
} */

#action-buttons {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
}

#action-buttons .green {
    background: #e6fff0;
    color: #1b7f3a;
    border: none;
    border-radius: 12px;
    padding: 12px 32px;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 4px 4px 12px #d1d9e6, -4px -4px 12px #ffffff;
    transition: box-shadow 0.2s;
}

#action-buttons .red {
    background: #ffeaea;
    color: #d32f2f;
    border: none;
    border-radius: 12px;
    padding: 12px 32px;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 4px 4px 12px #d1d9e6, -4px -4px 12px #ffffff;
    transition: box-shadow 0.2s;
}

#action-buttons .yellow {
    background: #fffbe6;
    color: #e67e22;
    border: none;
    border-radius: 12px;
    padding: 12px 32px;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 4px 4px 12px #d1d9e6, -4px -4px 12px #ffffff;
    transition: box-shadow 0.2s;
}

#action-buttons #marked-indicator-btn {
    background: #f3e6ff;
    color: #8e44ad;
    font-weight: bold;
    border: none;
    border-radius: 12px;
    padding: 10px 24px;
    margin: 0; /* Remove margin for inline */
    display: inline-flex; /* Inline with other buttons */
    box-shadow: 4px 4px 12px #d1d9e6, -4px -4px 12px #ffffff;
    cursor: not-allowed;
    align-items: center;
}

#action-buttons .green:active,
#action-buttons .red:active,
#action-buttons .yellow:active {
    box-shadow: inset 2px 2px 6px #d1d9e6, inset -2px -2px 6px #ffffff;
}

#settings-section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    text-align: right;
    margin-bottom: 16px;
}

.btn-setting {
    background: #f1f3f6;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    padding: 8px 12px;
    cursor: pointer;
    transition: box-shadow 0.2s;
}

.btn-setting:hover {
    box-shadow: 2px 2px 8px #d1d9e6, -2px -2px 8px #ffffff;
}

/* #settings-btn {
    background: #f1f3f6;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    padding: 8px 12px;
    cursor: pointer;
    box-shadow: 2px 2px 8px #d1d9e6, -2px -2px 8px #ffffff;
    transition: box-shadow 0.2s;
}

#history-btn {
    background: #f1f3f6;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    padding: 8px 12px;
    cursor: pointer;
    box-shadow: 2px 2px 8px #d1d9e6, -2px -2px 8px #ffffff;
    transition: box-shadow 0.2s;
} */

#settings-btn:active {
    box-shadow: inset 1px 1px 4px #d1d9e6, inset -1px -1px 4px #ffffff;
}

#settings-menu {
    background: #f1f3f6;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 4px 4px 12px #d1d9e6, -4px -4px 12px #ffffff;
    margin-top: 8px;
    text-align: left;
}

#settings-menu label {
    display: block;
    margin-bottom: 12px;
    font-size: 1rem;
}

#settings-menu input {
    margin-left: 8px;
    border-radius: 8px;
    border: none;
    padding: 6px 12px;
    box-shadow: 2px 2px 6px #d1d9e6, -2px -2px 6px #ffffff;
    background: #f1f3f6;
    font-size: 1rem;
}

#settings-menu button {
    margin-top: 8px;
    background: #e6fff0;
    color: #1b7f3a;
    border: none;
    border-radius: 8px;
    padding: 8px 24px;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 2px 2px 8px #d1d9e6, -2px -2px 8px #ffffff;
}

#log-container {
    margin-top: 32px;
}

#log-container h3 {
    margin-bottom: 8px;
    font-weight: 600;
}

#results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    margin-top: 12px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 4px 4px 12px #d1d9e6, -4px -4px 12px #ffffff;
    background: #f1f3f6;
}

#results-table th, #results-table td {
    border: 1px solid #e3e6ec;
    padding: 10px;
    text-align: center;
    font-size: 1.1rem;
}

#results-table th {
    background: #f5f5f5;
    font-weight: 600;
}

.result-fast {
    color: #1b7f3a;
    font-weight: bold;
}

.result-ontime {
    color: #e67e22;
    font-weight: bold;
}

.result-slow {
    color: #d32f2f;
    font-weight: bold;
}

.result-skipped {
    color: #888;
    font-weight: bold;
    font-style: italic;
    background: #f5f5f5;
}

.result-marked {
    background: #f3e6ff;
    color: #8e44ad;
    font-weight: bold;
    border-left: 4px solid #8e44ad;
}

/* Add these styles for retro flip clock look with neumorphic UI */
.flip-clock {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin: 32px 0 24px 0;
}

.flip-unit {
    perspective: 1000px;
}

.flip-card {
    width: 120px;
    height: 160px;
    border-radius: 24px;
    background: #f1f3f6;
    box-shadow: 8px 8px 24px #d1d9e6, -8px -8px 24px #ffffff;
    position: relative;
    transition: background 0.3s, color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: #222;
    overflow: hidden;
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
}

.flip-card-back {
    transform: rotateX(180deg);
}

.flip-separator {
    font-size: 7rem;
    font-family: 'Courier New', Courier, monospace;
    color: #d1d9e6;
    margin: 0 8px;
    user-select: none;
    font-weight: bold;
}

/* #timer-display.warning .flip-card,
#timer-display.warning .flip-separator {
    color: #b5aaaa;
} */

.btn {
    padding: 6px 16px;
    border-radius: 4px;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
    margin: 2px;
}
.btn-green {
    color: #2ecc40;
}
.btn-red {
    color: #e74c3c;
}
.btn-gray {
    color: #222;
}
.btn-violet {
    color: #8e44ad;
}

.btn-icon {
    padding: 6px 10px;
    font-size: 1.2rem;
    background: transparent;
    color: #333;
}
.summary-status {
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
}
.status-success {
    background: #2ecc40;
    color: #fff;
}
.status-fail {
    background: #e74c3c;
    color: #fff;
}
.status-warning {
    background: #f1c40f;
    color: #222;
}

.btn-download, .btn-markdown {
    background: #e6fff0;
    color: #1b7f3a;
    font-weight: bold;
    border: none;
    border-radius: 12px;
    padding: 14px 32px;
    margin-top: 24px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    box-shadow: 4px 4px 12px #d1d9e6, -4px -4px 12px #ffffff;
    transition: background 0.2s;
}
.btn-markdown {
    background: #f6f8fa;
    color: #34495e;
    margin-top: 12px;
}
.btn-download:hover, .btn-markdown:hover {
    background: #d4fbe3;
}

.export-btn-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 24px;
    margin-bottom: 8px;
}

.btn-marked-indicator {
    background: #f3e6ff;
    color: #8e44ad;
    font-weight: bold;
    border: none;
    border-radius: 12px;
    padding: 10px 24px;
    margin: 0;
    display: inline-flex;
    box-shadow: 4px 4px 12px #d1d9e6, -4px -4px 12px #ffffff;
    cursor: default;
}
.marked-indicator-content {
    display: inline-flex;
    align-items: center;
}

.summary-container {
    margin-top: 32px;
    background: #f1f3f6;
    border-radius: 24px;
    box-shadow: 8px 8px 24px #d1d9e6, -8px -8px 24px #ffffff;
    padding: 32px 24px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    transition: background 0.3s, box-shadow 0.3s;
}
.summary-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.summary-title {
    font-size: 1.2rem;
    font-weight: 600;
}
.summary-dot {
    color: #888;
}
.summary-date {
    font-size: 1rem;
}
.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.summary-stat {
    background: #fff;
    border-radius: 16px;
    box-shadow: 4px 4px 12px #d1d9e6, -4px -4px 12px #ffffff;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, box-shadow 0.3s;
}
.summary-label {
    font-size: 1rem;
    color: #888;
}
.summary-value {
    font-size: 1.5rem;
    font-weight: 700;
}

/* Neumorphic Table Styles */
.neu-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    margin-top: 12px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 4px 4px 12px #d1d9e6, -4px -4px 12px #ffffff;
    background: #f1f3f6;
}

.neu-table th, .neu-table td {
    border: 1px solid #e3e6ec;
    padding: 10px;
    text-align: center;
    font-size: 1.1rem;
}

.neu-table th {
    background: #f5f5f5;
    font-weight: 600;
}

.neu-table tbody tr {
    transition: background 0.2s;
}

.neu-table tbody tr:hover {
    background: #f8f8fa;
}

.neu-table .result-fast {
    color: #1b7f3a;
    font-weight: bold;
}
.neu-table .result-ontime {
    color: #e67e22;
    font-weight: bold;
}
.neu-table .result-slow {
    color: #d32f2f;
    font-weight: bold;
}
.neu-table .result-skipped {
    color: #888;
    font-weight: bold;
    font-style: italic;
    background: #f5f5f5;
}
.neu-table .result-marked {
    background: #f3e6ff;
    color: #8e44ad;
    font-weight: bold;
    border-left: 4px solid #8e44ad;
}

/* History Modal Styles */
#history-modal {
    display: none;
    position: fixed;
    top: 10%;
    min-width: 50vw;
    left: 50%;
    transform: translateX(-50%);
    background: #f1f3f6;
    border-radius: 24px;
    box-shadow: 8px 8px 24px #d1d9e6, -8px -8px 24px #ffffff;
    padding: 32px 24px;
    z-index: 1000;
    max-width: 90vw;
    max-height: 80vh;
    overflow: auto;
    border: none;
}

#modal-blur-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(241,243,246,0.7);
    backdrop-filter: blur(6px);
    z-index: 999;
}

/* Remove inline margin from history-list */
#history-list {
    margin-top: 16px;
}

/* History Card Style */
.history-card {
    border: none;
    border-radius: 16px;
    padding: 20px 18px;
    margin-bottom: 20px;
    background: #fff;
    box-shadow: 4px 4px 12px #d1d9e6, -4px -4px 12px #ffffff;
}

/* History Table inside Modal */
.history-table {
    width: 100%;
    margin-top: 8px;
    border-collapse: collapse;
    background: #f1f3f6;
    border-radius: 12px;
    box-shadow: 2px 2px 8px #d1d9e6, -2px -2px 8px #ffffff;
    border: 1px solid #e3e6ec;
}

.history-table th, .history-table td {
    border: 1px solid #e3e6ec;
    padding: 10px;
    text-align: center;
    font-size: 1.1rem;
    background: #f5f5f5;
}

.history-table th {
    font-weight: 600;
}

.history-table td {
    background: #f1f3f6;
}

.history-marked-cell {
    text-align: center;
}

.history-marked-content {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8e44ad;
    font-weight: bold;
}

/* Modal visibility utility classes */
#history-modal,
#modal-blur-overlay {
    display: none;
}

.show-modal {
    display: block !important;
}
.hide-modal {
    display: none !important;
}

/* Modal header layout */
.history-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    gap: 8px;
}

 .neumorphic-container-badge {
      background: #e0e0e0;
      border-radius: 20px;
      box-shadow: 10px 10px 20px #bebebe,
                  -10px -10px 20px #ffffff;
      padding: 15px 25px;
      display: inline-flex;
      align-items: center;
    }

    .counterp {
        filter:invert(100);
    }