@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;500;600;700&display=swap');

:root{
    --bg:#0d0d0d;
    --surface:#1a1a1a;
    --surface2:#242424;
    --yellow:#FFD400;
    --yellow-dim:#C9A500;
    --text:#FFF8D6;
    --muted:#888;
    --green:#76FF7A;
    --red:#FF6262;
    --warn:#FFAD33;
    --border-w:3px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html, body, #root{
    min-height:100%;
    background-color:var(--bg);
}

body{
    color:var(--text);
    font-family:'Inter', system-ui, sans-serif;
    font-size:14px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    background-image:
        linear-gradient(rgba(255,212,0,.03) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,212,0,.03) 1px,transparent 1px);
    background-size:20px 20px;
    position:relative;
    overflow-x:hidden;
}

.hidden{ display:none !important; }

::-webkit-scrollbar{ width:0; }
input::placeholder{ color:#555; }
input:focus{ outline:none; }

/* Pixel font reserved for headings, big numbers, and buttons */
.logo, .app-logo, .card-percent, .summary-percent, .px-btn,
.subjects-heading, .modal-title, .stat-count{
    font-family:'Press Start 2P', monospace;
}

/* -- Pixel canvas background -- */
.pixel-canvas{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
}

/* -- Shared pixel input/button -- */
.px-input{
    width:100%;
    background:var(--surface);
    border:var(--border-w) solid #444;
    color:var(--text);
    padding:12px 10px;
    font-family:'Inter', system-ui, sans-serif;
    font-size:14px;
    border-radius:0;
    box-shadow:3px 3px 0 #000;
    transition:border-color .1s, box-shadow .1s;
}

.px-input:focus{
    border-color:var(--yellow);
    box-shadow:4px 4px 0 var(--yellow);
}

.px-btn{
    border-radius:0;
    padding:13px 16px;
    font-size:11px;
    letter-spacing:0.5px;
    cursor:pointer;
    box-shadow:4px 4px 0 #000;
    transition:transform .07s, box-shadow .07s;
    border:var(--border-w) solid transparent;
    width:100%;
}

.px-btn:active:not(:disabled){
    transform:translate(2px,2px);
    box-shadow:1px 1px 0 #000;
}

.px-btn:disabled{
    background:#222 !important;
    color:#444 !important;
    border-color:#333 !important;
    cursor:not-allowed;
}

.px-btn-small{
    width:auto;
    padding:8px 12px;
    font-size:9px;
}

.px-btn-primary{ background:var(--yellow); color:#111; border-color:var(--yellow-dim); }
.px-btn-ghost{ background:var(--surface); color:var(--yellow); border-color:var(--yellow); }
.px-btn-danger{ background:var(--surface); color:var(--red); border-color:var(--red); }
.px-btn-attend{ background:#1a2e1a; color:var(--green); border-color:var(--green); }
.px-btn-bunk{ background:#2e1a1a; color:var(--red); border-color:var(--red); }

.field-label{
    display:block;
    margin-bottom:8px;
    color:var(--yellow);
    font-size:10px;
    letter-spacing:1px;
    text-transform:uppercase;
}

.field-label.small{
    color:var(--muted);
    font-size:9px;
}

/* -- Onboarding -- */
.onboarding-wrap{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px 20px;
    position:relative;
    z-index:1;
}

.onboarding-card{
    width:100%;
    max-width:400px;
}
.developer-tag{
    text-align:center;
    font-size:9px;
    color:#555;
    letter-spacing:3px;
    margin-bottom:20px;
    font-family:'Press Start 2P', monospace;
}
.version-tag{
    text-align:center;
    font-size:9px;
    color:#555;
    letter-spacing:3px;
    margin-bottom:20px;
    font-family:'Press Start 2P', monospace;
}

.logo{
    text-align:center;
    font-size:34px;
    color:var(--yellow);
    text-shadow:5px 5px 0 #000, -1px -1px 0 var(--yellow-dim);
    line-height:1.25;
    margin-bottom:14px;
}

.subtitle{
    text-align:center;
    font-size:10px;
    color:var(--muted);
    letter-spacing:3px;
}

.divider-dashed{
    width:100%;
    height:3px;
    background:repeating-linear-gradient(90deg, var(--yellow) 0, var(--yellow) 8px, transparent 8px, transparent 16px);
    margin:24px 0 32px;
}

.hint-text{
    text-align:center;
    font-size:11px;
    color:#555;
    margin-top:14px;
}

.footer-hint{
    text-align:center;
    font-size:10px;
    color:#3a3a3a;
    letter-spacing:1px;
    margin-top:32px;
}

.field-group{ margin-bottom:20px; }

/* -- Dashboard -- */
.dashboard-wrap {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 0 20px; 
    position: relative;
    z-index: 1;
}

.fab-wrap {
    width: 100%;
    margin-top: 24px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}


.dashboard-inner {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column; 
    min-height: 100vh;
    padding-bottom: 16px;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--bg);
    border-bottom: var(--border-w) solid var(--yellow);
    padding: 16px 0;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background-color: var(--bg);
    border-top: var(--border-w) solid var(--yellow);
    padding: 16px 0;
    margin-top: auto; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-left,
.footer-right {
    font-size: 9px;
    color: #555;
    letter-spacing: 0.5px;
}

.footer-link {
    color: #777;
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-link:hover {
    color: var(--yellow);
    text-decoration: underline;
}

@media (min-width: 768px) {
  .dashboard-wrap {
    padding: 20px;
  }

  .dashboard-inner {
    border: var(--border-w) solid var(--yellow);
    border-radius: 4px;
    padding: 0 20px;
    box-shadow: 0 8px 0 rgba(0, 0, 0, 0.2);
  }
}


.app-logo{
    font-size:15px;
    color:var(--yellow);
    text-shadow:2px 2px 0 #000;
}

.greeting{
    font-size:11px;
    color:var(--muted);
}

.summary-card{
    background:var(--surface);
    border:var(--border-w) solid var(--yellow);
    padding:16px;
    margin-bottom:28px;
    box-shadow:6px 6px 0 #000;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.summary-label{
    font-size:9px;
    color:var(--muted);
    letter-spacing:2px;
    margin-bottom:8px;
}

.summary-percent{
    font-size:26px;
    text-shadow:2px 2px 0 #000;
}

.summary-percent.safe{ color:var(--green); }
.summary-percent.risk{ color:var(--red); }

.summary-counts{
    display:flex;
    gap:20px;
}

.stat-count{
    text-align:center;
    font-size:16px;
}

.stat-count-label{
    font-size:9px;
    color:#555;
    margin-top:4px;
}

.subjects-heading{
    font-size:11px;
    color:var(--yellow);
    letter-spacing:2px;
    margin-bottom:16px;
}

.empty-state{
    border:var(--border-w) dashed #333;
    padding:48px 24px;
    text-align:center;
}

.empty-state-icon{ font-size:28px; margin-bottom:16px; }
.empty-state-text{ font-size:11px; color:#555; line-height:2; }


/* -- Subject card -- */
.card{
    background:var(--surface);
    border:var(--border-w) solid var(--muted);
    padding:16px;
    margin-bottom:20px;
    box-shadow:6px 6px 0 #000;
}

.card.status-safe{ border-color:var(--green); }
.card.status-warning{ border-color:var(--warn); }
.card.status-risk{ border-color:var(--red); }

.card-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:8px;
    margin-bottom:14px;
}

.card-name{
    font-size:13px;
    color:var(--yellow);
    line-height:1.6;
    flex:1;
    min-width:0;
    word-break:break-word;
}

.card-top-right{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
}

.edit-btn{
    box-shadow:2px 2px 0 #000;
}

.status-badge{ font-size:10px; }
.status-badge.status-safe{ color:var(--green); }
.status-badge.status-warning{ color:var(--warn); }
.status-badge.status-risk{ color:var(--red); }

.card-percent{
    text-align:center;
    font-size:34px;
    line-height:1;
    display:block;
    margin:18px 0 10px;
    text-shadow:3px 3px 0 #000;
}

.card-percent.status-safe{ color:var(--green); }
.card-percent.status-warning{ color:var(--warn); }
.card-percent.status-risk{ color:var(--red); }

.card-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    margin:14px 0;
}

.stat-box{
    background:var(--bg);
    border:2px solid #333;
    padding:8px 4px;
    text-align:center;
}

.stat-label{
    display:block;
    font-size:8px;
    color:var(--muted);
    margin-bottom:4px;
    font-family:'Inter', system-ui, sans-serif;
}

.stat-value{
    display:block;
    font-size:11px;
    color:var(--text);
    font-family:'Inter', system-ui, sans-serif;
    font-weight:600;
}

.status-message{
    font-size:11px;
    line-height:1.7;
    margin-bottom:14px;
    border-top:2px solid var(--surface2);
    padding-top:12px;
}

.status-message.status-safe{ color:var(--green); }
.status-message.status-warning{ color:var(--warn); }
.status-message.status-risk{ color:var(--red); }

.card-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

/* -- Modal -- */
.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    display:flex;
    align-items:flex-end;
    justify-content:center;
    z-index:50;
}

.modal-panel{
    background:var(--bg);
    border:var(--border-w) solid var(--yellow);
    border-bottom:none;
    box-shadow:-6px -6px 0 #000;
    width:100%;
    max-width:520px;
    padding:28px 24px 36px;
}

.modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
}

.modal-title{ font-size:12px; color:var(--yellow); }

.error-box{
    font-size:11px;
    color:var(--red);
    border:2px solid var(--red);
    padding:10px;
    margin-bottom:16px;
    line-height:1.7;
}

.field-row-3{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:10px;
    margin-bottom:20px;
}

@media(max-width:480px){
    .card-stats{ grid-template-columns:repeat(2,1fr); }
    .field-row-3{ grid-template-columns:1fr; }
}

/* -- Install CTA (header) -- */
.header-right{
    display:flex;
    align-items:center;
    gap:12px;
}

.px-btn-ghost.px-btn-small#install-header-btn{
    box-shadow:2px 2px 0 #000;
}

/* -- Install fallback banner (iOS / non-native-prompt browsers) -- */
.install-banner { 
  position: fixed; 
  left: 50%; 
  top: 50%; /* Changed from bottom: 0 to bring it to middle (was hiding add subject button) */ 
  transform: translate(-50%, -50%); 
  width: 100%; 
  max-width: 480px; 
  z-index: 40; 
  background: var(--surface); 
  border: var(--border-w) solid var(--yellow); 
  box-shadow: 6px 6px 0 #000; 
  padding: 16px 18px; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 14px; 
}

.install-banner-text{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

.install-banner-text strong{
    font-family:'Press Start 2P', monospace;
    font-size:10px;
    color:var(--yellow);
    letter-spacing:1px;
}

.install-banner-text span{
    font-size:10px;
    color:var(--muted);
    letter-spacing:.5px;
}

.install-banner-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

.install-banner-actions .px-btn-small{
    width:auto;
}

.install-banner-close{
    background:transparent;
    border:2px solid var(--muted);
    color:var(--muted);
    width:28px;
    height:28px;
    line-height:1;
    cursor:pointer;
    font-size:12px;
}

.install-banner-close:active{
    transform:translate(1px,1px);
}

@media(max-width:480px){
    .install-banner{
        flex-direction:column;
        align-items:stretch;
        text-align:center;
    }
    .install-banner-actions{
        justify-content:center;
    }
}