@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=DM+Sans:wght@300;400;500&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: 'DM Sans', sans-serif; background: #0d0d0d; color: #e8e4de; }
.app { min-height: 100vh; background: #0d0d0d; position: relative; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; background: #141414; border-bottom: 0.5px solid rgba(255,255,255,0.07); position: sticky; top: 0; z-index: 5; }
.hist-btn { display: flex; align-items: center; gap: 6px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; color: #999; background: none; border: 0.5px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 7px 14px; cursor: pointer; transition: background .15s, color .15s; }
.hist-btn:hover { background: #222; color: #e8e4de; }
.day-badge { font-size: 13px; font-weight: 500; background: rgba(239,159,39,0.12); border: 0.5px solid rgba(239,159,39,0.4); border-radius: 20px; padding: 6px 14px; color: #EF9F27; }
.day-badge span { color: #f5b84a; font-weight: 600; }
.date-label { font-size: 12px; color: #555; letter-spacing: .03em; }
.main { padding: 28px 20px 48px; max-width: 720px; margin: 0 auto; }
.section-label { font-size: 11px; font-weight: 500; letter-spacing: .08em; color: #555; text-transform: uppercase; margin-bottom: 10px; }
.divider { height: 0.5px; background: rgba(255,255,255,0.06); margin: 6px 0 22px; }
.card { background: #161616; border: 0.5px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 22px 24px; margin-bottom: 16px; animation: fadeUp .4s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.card-accent  { border-left: 3px solid #EF9F27; }
.card-accent2 { border-left: 3px solid #378ADD; animation-delay: .08s; }
.card-title { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 600; color: #f0ece6; margin-bottom: 2px; line-height: 1.25; }
.card-okunush { font-size: 13px; color: #666; margin-bottom: 2px; }
.card-tr { font-size: 14px; font-weight: 500; color: #ccc; margin-bottom: 14px; }
.meaning-label { font-size: 11px; font-weight: 500; color: #444; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px; margin-top: 14px; }
.meaning-text { font-size: 15px; color: #bbb; line-height: 1.65; }
.example-box { border-radius: 8px; padding: 12px 14px; margin-top: 14px; }
.example-box-orange { background: rgba(239,159,39,0.07); border-left: 2px solid rgba(239,159,39,0.5); }
.example-box-blue   { background: rgba(55,138,221,0.07);  border-left: 2px solid rgba(55,138,221,0.5); }
.example-en { font-size: 13px; color: #777; line-height: 1.6; font-style: italic; }
.example-tr { font-size: 13px; line-height: 1.6; margin-top: 7px; padding-top: 7px; }
.example-tr-orange { color: #c47d1a; border-top: 0.5px solid rgba(239,159,39,0.2); }
.example-tr-blue   { color: #5899d4; border-top: 0.5px solid rgba(55,138,221,0.2); }
.tag-row { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.tag { font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 20px; }
.tag-orange { background: rgba(239,159,39,0.1); color: #d48c1f; border: 0.5px solid rgba(239,159,39,0.2); }
.tag-blue   { background: rgba(55,138,221,0.1);  color: #5899d4; border: 0.5px solid rgba(55,138,221,0.2); }
.panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 100; display: none; justify-content: flex-start; }
.panel-overlay.open { display: flex; }
.panel { width: 320px; max-width: 90vw; background: #141414; height: 100%; overflow-y: auto; border-right: 0.5px solid rgba(255,255,255,0.07); animation: slideIn .25s ease both; }
@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 0.5px solid rgba(255,255,255,0.07); position: sticky; top: 0; background: #141414; }
.panel-title { font-size: 15px; font-weight: 500; color: #e8e4de; }
.close-btn { background: none; border: none; cursor: pointer; color: #666; font-size: 18px; padding: 2px 6px; border-radius: 4px; line-height: 1; }
.close-btn:hover { background: #222; color: #ccc; }
.hist-item { padding: 14px 20px; border-bottom: 0.5px solid rgba(255,255,255,0.05); }
.hist-item:hover { background: #1a1a1a; }
.hist-day { font-size: 11px; font-weight: 500; color: #444; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.hist-idiom { font-family: 'Playfair Display', serif; font-size: 14px; font-weight: 600; color: #c47d1a; margin-bottom: 1px; }
.hist-idiom-tr { font-size: 12px; color: #555; margin-bottom: 5px; }
.hist-word { font-size: 13px; font-weight: 500; color: #5899d4; }
.hist-word-tr { font-size: 12px; color: #555; }
.hist-empty { padding: 40px 20px; text-align: center; font-size: 14px; color: #444; line-height: 1.6; }
@media (max-width: 480px) {
  .topbar { padding: 12px 16px; }
  .main   { padding: 20px 14px 40px; }
  .card   { padding: 18px 16px; }
  .card-title { font-size: 22px; }
  .date-label { display: none; }
}