:root{
  --bg:#121212;
  --card-bg:#1e1e1e;
  --card-border:#2a2a2a;
  --text:#e8e8e8;
  --muted:#9a9a9a;
  --accent:#7c9cff;
  --new:#3a3a3a;
  --learned:#1e3d2f;
  --learned-border:#3fae73;
  --revise:#3d2a1e;
  --revise-border:#d98a3d;
  --btn-bg:#2a2a2a;
  --btn-hover:#383838;
}
/* Modal Overlay */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

/* Modal Box */
.modal-content {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    margin: 5% auto;
    padding: 24px;
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 14px;
    color: var(--text);
    position: relative;
}

/* Close Button */
.close-btn {
    position: absolute;
    right: 20px;
    top: 15px;
    color: var(--muted);
    font-size: 28px;
    cursor: pointer;
    transition: color 0.2s;
}
.close-btn:hover { color: var(--text); }

/* Table Styling */
#dict-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    font-size: 0.9rem;
}
#dict-table th {
    text-align: left;
    padding: 12px;
    color: var(--accent);
    border-bottom: 2px solid var(--card-border);
}
#dict-table td {
    padding: 12px;
    border-bottom: 1px solid var(--card-border);
    color: var(--text);
}
#dict-table tr:hover { background: rgba(255,255,255,0.03); }

/* Scrollbar for modal */
.modal-content::-webkit-scrollbar { width: 8px; }
.modal-content::-webkit-scrollbar-track { background: var(--bg); }
.modal-content::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 4px; }
*{box-sizing:border-box;}
body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
header{
  position:sticky;
  top:0;
  background:rgba(18,18,18,0.95);
  backdrop-filter:blur(6px);
  padding:16px 20px;
  border-bottom:1px solid var(--card-border);
  z-index:10;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  justify-content:space-between;
}
h1{
  font-size:1.1rem;
  margin:0;
  color:var(--text);
  font-weight:600;
}
.stats{
  font-size:0.85rem;
  color:var(--muted);
  display:flex;
  gap:14px;
}
.filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.filter-btn{
  background:var(--btn-bg);
  color:var(--text);
  border:1px solid var(--card-border);
  padding:6px 12px;
  border-radius:20px;
  font-size:0.8rem;
  cursor:pointer;
  transition:background 0.15s;
}
.filter-btn:hover{background:var(--btn-hover);}
.filter-btn.active{background:var(--accent);color:#0d0d0d;border-color:var(--accent);}

#card-list{
  max-width:680px;
  margin:24px auto;
  padding:0 16px 60px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:18px 20px;
  min-height:160px;
  transition:border-color 0.2s, background 0.2s;
}
.card.status-learned{background:var(--learned);border-color:var(--learned-border);}
.card.status-revise{background:var(--revise);border-color:var(--revise-border);}

.card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.verb-block{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.verb-de{
  font-size:1.25rem;
  font-weight:700;
  color:var(--accent);
}
.verb-en{
  font-size:0.9rem;
  color:var(--muted);
  font-style:italic;
}

.status-badge{
  font-size:0.7rem;
  padding:4px 10px;
  border-radius:12px;
  background:var(--btn-bg);
  color:var(--muted);
  white-space:nowrap;
}
.status-badge.new{color:var(--muted);}
.status-badge.learned{color:#3fae73;}
.status-badge.revise{color:#d98a3d;}

.sentence-de{
  margin-top:14px;
  font-size:1.05rem;
  line-height:1.5;
}

.spoiler-wrap{
  margin-top:10px;
}
.spoiler-toggle{
  background:var(--btn-bg);
  border:1px dashed var(--card-border);
  color:var(--muted);
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
  font-size:0.85rem;
  width:100%;
  text-align:left;
  transition:background 0.15s;
}
.spoiler-toggle:hover{background:var(--btn-hover);}
.sentence-en{
  margin-top:8px;
  padding:10px 12px;
  background:#161616;
  border-radius:8px;
  color:var(--text);
  font-size:0.95rem;
  display:none;
}
.sentence-en.shown{display:block;}

.card-actions{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.action-btn{
  border:1px solid var(--card-border);
  background:var(--btn-bg);
  color:var(--text);
  padding:7px 14px;
  border-radius:8px;
  font-size:0.8rem;
  cursor:pointer;
  transition:background 0.15s, transform 0.1s;
}
.action-btn:hover{background:var(--btn-hover);}
.action-btn:active{transform:scale(0.96);}
.action-btn.mark-learned.active{background:var(--learned-border);color:#0d0d0d;border-color:var(--learned-border);}
.action-btn.mark-revise.active{background:var(--revise-border);color:#0d0d0d;border-color:var(--revise-border);}
.action-btn.mark-new.active{background:var(--accent);color:#0d0d0d;border-color:var(--accent);}

.read-btn{
  margin-left:auto;
  background:var(--accent);
  color:#0d0d0d;
  border:none;
  font-weight:600;
}
.read-btn:hover{filter:brightness(1.1);background:var(--accent);}

.placeholder{
  height:160px;
  border-radius:14px;
  background:linear-gradient(90deg,#1a1a1a 25%,#222 37%,#1a1a1a 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease infinite;
}
@keyframes shimmer{
  0%{background-position:100% 0;}
  100%{background-position:0 0;}
}

footer{
  text-align:center;
  color:var(--muted);
  font-size:0.8rem;
  padding:20px;
}