@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #000A1B;
    color: #FCFCFC;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Screens --- */
.screen { display: none; width: 100%; max-width: 420px; padding: 24px 16px; flex-direction: column; align-items: center; }
.screen.active { display: flex; }

/* --- Auth / Loader --- */
.loader { width: 40px; height: 40px; border: 3px solid #5A5C47; border-top-color: #A48461; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 40vh auto 16px; }
@keyframes spin { to { transform: rotate(360deg); } }
.auth-text { color: #BABABA; font-size: 13px; }

/* --- Logo / Header --- */
.logo { margin-bottom: 12px; margin-top: 20px; }
.logo svg { width: 200px; height: auto; }
h2 { font-size: 14px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: #A48461; margin-bottom: 6px; text-align: center; }
.subtitle { color: #BABABA; margin-bottom: 20px; font-size: 13px; text-align: center; }
.divider { width: 60px; height: 2px; background: linear-gradient(90deg, transparent, #A48461, transparent); margin: 12px auto; }
.user-info { font-size: 12px; color: #5A5C47; text-align: center; }

/* --- Menu --- */
.menu { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.menu-btn {
    width: 100%; max-width: 320px;
    padding: 18px 20px;
    border-radius: 14px;
    border: 2px solid #5A5C47;
    background: linear-gradient(145deg, #5A5C47, #4a4c3a);
    color: #FCFCFC;
    font-size: 16px; font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 20px rgba(90, 92, 71, 0.25);
    display: flex; align-items: center; gap: 12px;
}
.menu-btn:active { transform: scale(0.97); box-shadow: 0 2px 10px rgba(90, 92, 71, 0.2); }
.menu-btn .emoji { font-size: 20px; }
.menu-btn .label-text { flex: 1; }
.menu-btn .arrow { font-size: 14px; opacity: 0.5; margin-left: auto; }
.menu-btn .lock { font-size: 14px; margin-left: 8px; }
.menu-btn.disabled { opacity: 0.4; pointer-events: none; }
.menu-btn.stub {
    background: linear-gradient(145deg, #3a3c30, #32342a);
    border-color: #3a3c30;
    opacity: 0.65;
    box-shadow: none;
}
.menu-btn.stub:active { transform: scale(0.97); }
.menu-btn.locked { opacity: 0.45; }
.menu-btn.menu-back {
    background: #0d1a2e;
    border: 3px solid #A48461;
    color: #A48461;
    box-shadow: 0 2px 12px rgba(164, 132, 97, 0.2);
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

/* --- Stub page --- */
.stub-page {
    text-align: center;
    padding: 40px 20px;
    max-width: 320px;
}
.stub-icon { font-size: 72px; margin-bottom: 20px; }
.stub-title {
    font-size: 18px; font-weight: 700;
    color: #A48461;
    margin-bottom: 12px;
    letter-spacing: 1px;
}
.stub-thanks {
    font-size: 15px; color: #FCFCFC;
    margin-bottom: 12px;
}
.stub-locked {
    font-size: 15px; color: #A48461;
    margin-bottom: 12px;
}
.stub-desc {
    font-size: 13px; color: #BABABA;
    margin-bottom: 20px;
    line-height: 1.5;
}
.stub-soon {
    font-size: 12px; color: #5A5C47;
    line-height: 1.5;
    padding: 16px;
    background: #0d1a2e;
    border-radius: 12px;
}

/* --- Shift / Check-in --- */
.shift-page { text-align: center; padding: 20px 0; width: 100%; max-width: 320px; }
.shift-icon { font-size: 56px; margin-bottom: 12px; }
.shift-title { font-size: 18px; font-weight: 700; color: #A48461; margin-bottom: 24px; letter-spacing: 1px; }
.shift-buttons { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.shift-btn {
    padding: 20px;
    border-radius: 14px;
    border: 2px solid #5A5C47;
    color: #FCFCFC;
    font-size: 16px; font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; gap: 12px; justify-content: center;
    transition: transform 0.15s;
}
.shift-btn:active { transform: scale(0.97); }
.shift-btn.checkin { background: linear-gradient(145deg, #2d5a2d, #1e3d1e); border-color: #3a7a3a; }
.shift-btn.checkout { background: linear-gradient(145deg, #5a2d2d, #3d1e1e); border-color: #7a3a3a; }
.shift-btn-icon { font-size: 22px; }
.shift-result { margin: 16px 0; padding: 16px; border-radius: 12px; }
.shift-result.loading { background: #0d1a2e; }
.shift-result.success { background: #1a3d1a; }
.shift-result.error { background: #3d1a1a; }
.shift-loading { color: #BABABA; }
.shift-ok-icon { font-size: 36px; margin-bottom: 8px; }
.shift-ok-text { font-size: 15px; }
.shift-err-icon { font-size: 36px; margin-bottom: 8px; }
.shift-err-text { font-size: 15px; margin-bottom: 8px; }
.shift-err-hint { font-size: 11px; color: #5A5C47; cursor: default; user-select: none; }
.bypass-tag { font-size: 10px; background: #A48461; color: #000; padding: 2px 6px; border-radius: 4px; }
.shift-today { margin-top: 16px; }
.shift-today-title { font-size: 12px; color: #5A5C47; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.shift-today-item { padding: 8px 12px; background: #0d1a2e; border-radius: 8px; margin-bottom: 4px; font-size: 14px; }

/* --- View header (back bar) --- */
.view-header {
    width: 100%; display: flex; align-items: center; gap: 12px;
    padding: 12px 0; margin-bottom: 12px;
}
.view-header .back-link { color: #A48461; font-size: 14px; cursor: pointer; font-weight: 600; text-decoration: none; }
.view-header .view-title { font-size: 14px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #A48461; }

/* --- Scanner --- */
#scanReader { width: 100%; max-width: 350px; border-radius: 12px; overflow: hidden; }
.scan-result { margin-top: 16px; padding: 16px; background: #5A5C47; border-radius: 12px; width: 100%; max-width: 350px; text-align: center; display: none; }
.scan-result.visible { display: block; }
.scan-result-label { font-size: 12px; color: #BABABA; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.scan-result-value { font-size: 16px; font-weight: 600; word-break: break-all; }
.scan-result-count { margin-top: 8px; font-size: 12px; color: #BABABA; }
.scan-history { margin-top: 16px; width: 100%; max-width: 350px; }
.scan-history-title { font-size: 12px; color: #5A5C47; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.scan-history-item { padding: 10px 12px; background: #0d1a2e; border-radius: 8px; margin-bottom: 6px; font-size: 13px; word-break: break-all; }