@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  /* ---- palette (aizome indigo dye + washi paper + hanko stamp red) ---- */
  --paper:      #EFECE3;
  --paper-2:    #E6E1D3;
  --ink:        #1B2434;
  --ink-soft:   #4A5468;
  --indigo:     #24405F;
  --indigo-2:   #33587F;
  --indigo-deep:#132234;
  --stamp:      #B23A2E;
  --stamp-soft: rgba(178,58,46,.12);
  --teal:       #1F6F63;
  --teal-soft:  rgba(31,111,99,.12);
  --plum:       #6B4A7A;
  --plum-soft:  rgba(107,74,122,.12);
  --gold:       #B08A4E;
  --line:       rgba(27,36,52,.14);
  --line-soft:  rgba(27,36,52,.07);
  --card:       #FBFAF6;

  --font-display:'Shippori Mincho', Georgia, 'Times New Roman', serif;
  --font-body:'Zen Kaku Gothic New', 'Hiragino Sans', 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --radius: 3px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  background-image:
    radial-gradient(ellipse at top left, rgba(255,255,255,.4), transparent 55%),
    repeating-linear-gradient(0deg, rgba(27,36,52,.018) 0px, rgba(27,36,52,.018) 1px, transparent 1px, transparent 3px);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--indigo-2);}

/* ================= HEADER ================= */
.app-header{
  padding:34px 24px 22px;
  border-bottom:1px solid var(--line);
  position:relative;
}
.app-header .eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  gap:10px;
}
.app-header .eyebrow::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--stamp);
  display:inline-block;
}
.app-header h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(28px,5vw,44px);
  margin:6px 0 4px;
  letter-spacing:.01em;
}
.app-header h1 .jp{color:var(--indigo);}
.app-header p.sub{
  margin:0;
  max-width:640px;
  color:var(--ink-soft);
  font-size:14.5px;
}
.stamp-mark{
  position:absolute;
  right:26px; top:28px;
  width:64px;height:64px;
  border:2.5px solid var(--stamp);
  border-radius:6px;
  color:var(--stamp);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-size:26px;
  transform:rotate(-4deg);
  opacity:.85;
}

/* ================= TABS ================= */
.tabs{
  display:flex;
  gap:2px;
  padding:0 24px;
  border-bottom:1px solid var(--line);
  background:var(--paper-2);
  position:sticky;
  top:0;
  z-index:20;
}
.tab-btn{
  font-family:var(--font-body);
  font-weight:700;
  font-size:14.5px;
  padding:14px 20px 12px;
  border:none;
  background:none;
  color:var(--ink-soft);
  cursor:pointer;
  border-bottom:3px solid transparent;
  display:flex; align-items:center; gap:8px;
}
.tab-btn .jp{font-family:var(--font-display); font-size:16px;}
.tab-btn.active{color:var(--ink); border-bottom-color:var(--indigo);}
.tab-btn[data-tab="kanji"].active{border-bottom-color:var(--stamp);}
.tab-btn[data-tab="course-vocab"].active{border-bottom-color:var(--teal);}
.tab-btn[data-tab="grammar"].active{border-bottom-color:var(--plum);}

/* ================= MODE BAR ================= */
.mode-bar{
  padding:12px 24px;
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.mode-label{font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:var(--ink-soft); text-transform:uppercase;}
.direction-btn{
  font-family:var(--font-body); font-size:13px; font-weight:700;
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:6px 14px; cursor:pointer; color:var(--ink-soft);
}
.direction-btn .jp{font-family:var(--font-display);}
.direction-btn.active{background:var(--indigo); border-color:var(--indigo); color:#fff;}
.mode-sep{width:1px; height:20px; background:var(--line); margin:0 4px;}
.layout-btn{
  font-family:var(--font-body); font-size:13px; font-weight:700;
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:6px 14px; cursor:pointer; color:var(--ink-soft);
}
.layout-btn.active{background:var(--ink); border-color:var(--ink); color:#fff;}

/* ================= FLASHCARD STUDY MODE ================= */
.flash-wrap{
  display:flex; flex-direction:column; align-items:center;
  padding:6px 0 30px;
}
.flash-section{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--ink-soft); margin-bottom:6px;
  display:flex; align-items:center; gap:8px;
}
.flash-section .chip{
  background:rgba(36,64,95,.1); color:var(--indigo);
  padding:2px 8px; border-radius:20px; font-weight:700;
}
.tab-panel[data-tab="kanji"] .flash-section .chip{background:var(--stamp-soft); color:var(--stamp);}
.tab-panel[data-tab="course-vocab"] .flash-section .chip{background:var(--teal-soft); color:var(--teal);}
.tab-panel[data-tab="grammar"] .flash-section .chip{background:var(--plum-soft); color:var(--plum);}
.flash-counter{
  font-family:var(--font-mono); font-size:13px; color:var(--ink-soft);
  margin-bottom:16px; letter-spacing:.04em;
}
.flash-stage{
  width:100%; max-width:480px;
  min-height:min(62vh, 420px);
  display:flex;
}
.flash-stage .card{
  width:100%;
  min-height:min(62vh, 420px);
  display:flex; flex-direction:column;
  padding:20px 20px 16px;
  border-radius:8px;
}
.flash-stage .card-icons span{width:32px; height:32px; font-size:15px;}
.flash-stage .card-front{
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:10px 6px;
}
.flash-stage .card-front .jp{
  font-size:clamp(38px, 14vw, 72px);
  line-height:1.15;
  margin-bottom:14px;
  word-break:keep-all;
}
.flash-stage .card-front .meaning-main{
  font-size:clamp(26px, 9vw, 44px);
  font-weight:700;
  line-height:1.2;
  margin-bottom:14px;
}
.flash-stage .card-front .romaji{
  font-size:clamp(16px, 4.5vw, 22px);
}
.flash-stage .card-front .flip-hint{
  margin-top:22px; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
}
.flash-stage .card-back{
  text-align:center;
  margin-top:0; padding-top:0; border-top:none;
  display:none;
  flex-direction:column; align-items:center; justify-content:center; flex:1;
  width:100%;
}
.flash-stage .card.flipped .card-front{display:none;}
.flash-stage .card.flipped .card-back{display:flex;}
.flash-stage .card-back .jp-back{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(32px, 12vw, 56px);
  line-height:1.15;
  margin-bottom:12px;
}
.flash-stage .card-back .meaning{
  font-size:clamp(20px, 6.5vw, 30px);
  font-weight:700;
  margin-bottom:14px;
  line-height:1.3;
}
.flash-stage .card-back .romaji{font-size:clamp(15px, 4vw, 19px); margin-bottom:12px;}
.flash-stage .card-back .sentence{font-size:clamp(13.5px, 3.6vw, 16px); max-width:380px;}
.flash-stage .card-back .meta{font-size:12px; margin-top:12px;}

.flash-nav{
  display:flex; align-items:center; gap:12px;
  margin-top:26px;
  width:100%; max-width:480px;
}
.flash-nav-btn{
  font-family:var(--font-mono); font-weight:700;
  background:var(--card); border:1.5px solid var(--line); border-radius:16px;
  cursor:pointer; color:var(--ink);
}
.flash-nav-btn.arrow{
  flex:1;
  font-size:26px;
  padding:16px 10px;
  min-height:60px;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.flash-nav-btn.arrow .lbl{font-size:12px; font-family:var(--font-body); font-weight:700;}
.flash-nav-btn.primary{background:var(--indigo); border-color:var(--indigo); color:#fff;}
.tab-panel[data-tab="kanji"] .flash-nav-btn.primary{background:var(--stamp); border-color:var(--stamp);}
.tab-panel[data-tab="course-vocab"] .flash-nav-btn.primary{background:var(--teal); border-color:var(--teal);}
.tab-panel[data-tab="grammar"] .flash-nav-btn.primary{background:var(--plum); border-color:var(--plum);}
.flash-nav-btn:active{transform:scale(0.96);}
.flash-shuffle{
  flex:0 0 auto; width:52px; min-height:60px; font-size:19px; padding:0;
}
.flash-empty{color:var(--ink-soft); font-size:13.5px; padding:40px 20px; text-align:center;}

@media (max-width:420px){
  .flash-stage .card{padding:16px 14px 14px;}
  .flash-nav{gap:8px;}
  .flash-nav-btn.arrow{min-height:54px; font-size:22px;}
  .flash-shuffle{width:44px; min-height:54px;}
}

/* ================= BOOKMARK TOGGLE ================= */
.bookmark-toggle-btn{
  font-family:var(--font-mono); font-size:11.5px; font-weight:700;
  background:var(--card); border:1px solid var(--gold); color:var(--gold);
  border-radius:20px; padding:5px 12px; cursor:pointer;
}
.bookmark-toggle-btn.active{background:var(--gold); color:#fff;}

.empty-note{
  background:var(--card); border:1px dashed var(--line); border-radius:var(--radius);
  padding:30px 20px; text-align:center; color:var(--ink-soft); font-size:13.5px;
}

/* ================= HOW IT WORKS ================= */
.how-it-works{
  margin:22px 24px 0;
  padding:18px 20px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  align-items:center;
}
.how-it-works .compass{flex-shrink:0;}
.how-it-works .legend{
  display:flex; flex-wrap:wrap; gap:16px 26px;
  font-size:13px;
  color:var(--ink-soft);
}
.how-it-works .legend b{color:var(--ink); font-weight:700;}
.legend-item{display:flex; align-items:center; gap:8px;}
.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}

/* ================= DAY RAIL ================= */
.day-rail-wrap{padding:22px 24px 0;}
.rail-header{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:14px; flex-wrap:wrap;
}
.rail-meta{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  color:var(--ink-soft); text-transform:uppercase;
}
.rail-actions{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;}
.overall-readout{font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); white-space:nowrap;}
.day-rail{
  display:flex; gap:8px;
  overflow-x:auto;
  padding-bottom:10px;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.day-pill{
  flex:0 0 auto;
  width:58px;
  padding:8px 0 7px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
  text-align:center;
  cursor:pointer;
  font-family:var(--font-mono);
  scroll-snap-align:start;
}
.day-pill .num{font-size:16px; font-weight:700; color:var(--ink);}
.day-pill .lbl{font-size:9px; letter-spacing:.06em; color:var(--ink-soft); text-transform:uppercase; margin-top:2px;}
.day-pill .ring{
  width:20px;height:20px;margin:5px auto 0;
  border-radius:50%;
  background:conic-gradient(var(--indigo) calc(var(--p,0)*1%), var(--line-soft) 0);
}
.tab-panel[data-tab="kanji"] .day-pill .ring{background:conic-gradient(var(--stamp) calc(var(--p,0)*1%), var(--line-soft) 0);}
.tab-panel[data-tab="course-vocab"] .day-pill .ring{background:conic-gradient(var(--teal) calc(var(--p,0)*1%), var(--line-soft) 0);}
.tab-panel[data-tab="grammar"] .day-pill .ring{background:conic-gradient(var(--plum) calc(var(--p,0)*1%), var(--line-soft) 0);}
.day-pill.active{border-color:var(--indigo); background:#fff; box-shadow:0 2px 10px rgba(27,36,52,.08);}
.day-pill.active .num{color:var(--indigo);}
.tab-panel[data-tab="kanji"] .day-pill.active{border-color:var(--stamp);}
.tab-panel[data-tab="course-vocab"] .day-pill.active{border-color:var(--teal);}
.tab-panel[data-tab="grammar"] .day-pill.active{border-color:var(--plum);}
.tab-panel[data-tab="kanji"] .day-pill.active .num{color:var(--stamp);}
.tab-panel[data-tab="course-vocab"] .day-pill.active .num{color:var(--teal);}
.tab-panel[data-tab="grammar"] .day-pill.active .num{color:var(--plum);}
.day-pill.final{background:var(--indigo-deep);}
.day-pill.final .num,.day-pill.final .lbl{color:#EFECE3;}

/* ================= DAY VIEW ================= */
.day-view{padding:26px 24px 60px;}
.day-view-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.day-view-head h2{
  font-family:var(--font-display);
  font-size:26px; margin:0 0 4px;
}
.day-view-head .theme{color:var(--ink-soft); font-size:13.5px;}
.day-stats{display:flex; gap:18px; font-family:var(--font-mono); font-size:12px;}
.day-stats .stat b{display:block; font-size:17px; color:var(--indigo);}
.tab-panel[data-tab="kanji"] .day-stats .stat b{color:var(--stamp);}
.tab-panel[data-tab="course-vocab"] .day-stats .stat b{color:var(--teal);}
.tab-panel[data-tab="grammar"] .day-stats .stat b{color:var(--plum);}
.overall-bar{
  height:5px; background:var(--line-soft); border-radius:3px; overflow:hidden; margin-top:8px;
}
.overall-bar > i{display:block; height:100%; background:var(--indigo);}
.tab-panel[data-tab="kanji"] .overall-bar > i{background:var(--stamp);}
.tab-panel[data-tab="course-vocab"] .overall-bar > i{background:var(--teal);}
.tab-panel[data-tab="grammar"] .overall-bar > i{background:var(--plum);}

.session{margin-bottom:34px;}
.session-head{
  display:flex; align-items:center; gap:10px;
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px dashed var(--line);
}
.session-head .icon{font-size:19px;}
.session-head h3{font-family:var(--font-display); font-size:18px; margin:0; flex:0 0 auto;}
.session-head .time{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); margin-left:auto;}
.session-note{font-size:12.5px; color:var(--ink-soft); margin:-6px 0 12px;}

.subgroup{margin-bottom:18px;}
.subgroup-label{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.05em;
  color:var(--ink-soft);
  margin-bottom:8px;
  display:flex; align-items:center; gap:8px;
}
.subgroup-label .chip{
  background:var(--stamp-soft); color:var(--stamp);
  padding:1px 7px; border-radius:20px; font-weight:700;
}
.tab-panel[data-tab="course-vocab"] .subgroup-label .chip{background:var(--teal-soft); color:var(--teal);}
.tab-panel[data-tab="grammar"] .subgroup-label .chip{background:var(--plum-soft); color:var(--plum);}

.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:10px;
}
.card{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:var(--radius);
  padding:13px 14px 12px;
  cursor:pointer;
  position:relative;
  min-height:92px;
  transition:box-shadow .15s, border-color .15s;
}
.card:active{box-shadow:0 3px 12px rgba(27,36,52,.08);}
.card.done{border-color:var(--stamp); background:#FBF7F5;}
.card.bookmarked{border-color:var(--gold);}
.card-icons{display:flex; justify-content:space-between; margin-bottom:6px;}
.card-icons span{
  width:26px;height:26px;flex-shrink:0;
  border:1.5px solid var(--line);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px; color:var(--line);
  font-family:var(--font-mono);
  cursor:pointer;
  margin:-3px;
}
.card-icons .bookmark-btn{color:var(--ink-soft); border-color:var(--line); font-size:13px;}
.card.bookmarked .bookmark-btn{border-color:var(--gold); color:var(--gold); background:rgba(176,138,78,.15);}
.card.done .stamp-check{border-color:var(--stamp); color:var(--stamp); background:var(--stamp-soft);}
@media (hover:hover){
  .card:hover{box-shadow:0 3px 12px rgba(27,36,52,.08);}
  .card-icons span:hover{filter:brightness(0.9);}
}
@media (pointer:coarse){
  .card-icons span{width:30px;height:30px;}
}
.card-front .jp,.card-back .jp-back{font-family:var(--font-display); font-size:19px; margin-bottom:2px;}
.card-front .meaning-main{font-family:var(--font-body); font-weight:700; font-size:15px; margin-bottom:2px; line-height:1.35;}
.card-front .romaji{font-family:var(--font-mono); font-size:12px; color:var(--indigo);}
.tab-panel[data-tab="kanji"] .card-front .romaji{color:var(--stamp);}
.tab-panel[data-tab="course-vocab"] .card-front .romaji{color:var(--teal);}
.tab-panel[data-tab="grammar"] .card-front .romaji{color:var(--plum);}
.card-back .romaji{font-family:var(--font-mono); font-size:12px; color:var(--indigo); margin-bottom:6px;}
.tab-panel[data-tab="kanji"] .card-back .romaji{color:var(--stamp);}
.tab-panel[data-tab="course-vocab"] .card-back .romaji{color:var(--teal);}
.tab-panel[data-tab="grammar"] .card-back .romaji{color:var(--plum);}
.card-back{display:none; margin-top:8px; padding-top:8px; border-top:1px dashed var(--line);}
.card.flipped .card-back{display:block;}
.card.flipped .card-front .romaji,.card.flipped .card-front .meaning-main{opacity:.6;}
.card.flipped .flip-hint{display:none;}
.flash-stage .card-front,.flash-stage .card-back{transition:opacity .15s ease;}
.card-back .meaning{font-weight:700; font-size:13.5px; margin-bottom:6px;}
.card-back .sentence{font-size:12px; color:var(--ink-soft); font-style:italic; line-height:1.45;}
.card-back .sentence .en{display:block; font-style:normal; margin-top:2px; color:var(--ink);}
.card-back .meta{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-soft); margin-top:8px;}
.card .flip-hint{font-family:var(--font-mono); font-size:9.5px; color:var(--ink-soft); opacity:.7; margin-top:4px;}

.final-note{
  background:var(--indigo-deep); color:#EFECE3;
  padding:18px 20px; border-radius:var(--radius); margin-bottom:24px;
  font-size:13.5px;
}
.final-note b{color:#fff;}
.tab-panel[data-tab="kanji"] .final-note{background:#3B211D;}
.tab-panel[data-tab="course-vocab"] .final-note{background:#1A3630;}
.tab-panel[data-tab="grammar"] .final-note{background:#2E2438;}

.reset-row{margin-top:36px; padding-top:16px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;}
.reset-row .progress-text{font-family:var(--font-mono); font-size:12px; color:var(--ink-soft);}
.btn-ghost{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em;
  background:none; border:1px solid var(--line); border-radius:var(--radius);
  padding:7px 12px; cursor:pointer; color:var(--ink-soft);
}
.btn-ghost:active{border-color:var(--stamp); color:var(--stamp);}
@media (hover:hover){
  .btn-ghost:hover{border-color:var(--stamp); color:var(--stamp);}
}

.tab-panel{display:none;}
.tab-panel.active{display:block;}

footer.app-footer{
  text-align:center; padding:28px 20px 40px;
  color:var(--ink-soft); font-size:11.5px; font-family:var(--font-mono);
}

/* ================= RESPONSIVE ================= */
@media (max-width:640px){
  .app-header{padding:24px 16px 18px;}
  .app-header p.sub{font-size:13.5px;}
  .stamp-mark{display:none;}

  .tabs{padding:0 12px;}
  .tab-btn{padding:12px 12px 10px; font-size:13.5px;}

  .mode-bar{padding:10px 16px; gap:8px;}
  .mode-label{width:100%; margin-bottom:2px;}
  .direction-btn{font-size:12px; padding:6px 11px; flex:1 1 auto; text-align:center;}

  .how-it-works{
    margin:16px 12px 0;
    padding:16px;
    grid-template-columns:1fr;
    text-align:left;
    gap:12px;
  }
  .how-it-works .compass{margin:0 auto;}
  .how-it-works .compass svg{width:88px; height:88px;}
  .how-it-works .legend{gap:10px 20px; font-size:12.5px;}

  .day-rail-wrap{padding:16px 12px 0;}
  .rail-header{gap:8px 12px;}
  .rail-meta{font-size:10px;}
  .day-pill{width:50px;}

  .day-view{padding:18px 12px 50px;}
  .day-view-head{align-items:flex-start; gap:12px;}
  .day-view-head h2{font-size:22px;}
  .day-stats{gap:14px; width:100%;}

  .session-head{flex-wrap:wrap;}
  .session-head .time{margin-left:0;}

  .card-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px;}
  .card{padding:11px 12px 10px; min-height:82px;}

  .reset-row{flex-direction:column; align-items:flex-start; gap:10px;}
  .reset-row .btn-ghost{width:100%;}

  .final-note,.empty-note{margin-left:0; margin-right:0; padding:16px;}
}

@media (max-width:400px){
  .app-header h1{font-size:26px;}
  .tab-btn{font-size:12.5px; padding:11px 8px 9px; gap:5px;}
  .direction-btn{font-size:11px; padding:6px 8px;}
  .bookmark-toggle-btn{font-size:10.5px; padding:5px 10px;}
  .card-grid{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  .card{transition:none;}
}