*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#0f0f0f;--surface:#1a1a1a;--surface2:#222;--surface3:#2c2c2c;
  --text:#f0ede8;--text2:#888;--text3:#555;
  --accent:#c8a96e;--accent2:#8fbc8f;--danger:#c0685a;
  --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.13);
  --radius:14px;--radius-sm:8px;
}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:15px;}
.layout{display:flex;height:100vh;overflow:hidden;}

/* Sidebar */
.sidebar{width:220px;min-width:220px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:1.5rem 0;overflow-y:auto;}
.sidebar-logo{padding:0 1.25rem 1.5rem;font-family:'Shippori Mincho',serif;font-size:1.1rem;color:var(--accent);}
.sidebar-logo span{display:block;font-size:11px;font-family:'DM Sans',sans-serif;color:var(--text3);letter-spacing:0.1em;margin-top:2px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 1.25rem;font-size:14px;color:var(--text2);cursor:pointer;transition:all 0.15s;border-left:2px solid transparent;}
.nav-item:hover{color:var(--text);background:var(--surface2);}
.nav-item.active{color:var(--accent);border-left-color:var(--accent);background:var(--surface2);}
.sidebar-sep{height:1px;background:var(--border);margin:0.75rem 1.25rem;}
.sidebar-label{font-size:11px;color:var(--text3);padding:0.5rem 1.25rem;letter-spacing:0.1em;}

/* Main */
.main{flex:1;overflow-y:auto;padding:2rem 2.5rem;}
.page{display:none;}.page.active{display:block;}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;flex-wrap:wrap;gap:1rem;}
.page-title{font-family:'Shippori Mincho',serif;font-size:1.75rem;font-weight:600;}

/* Buttons */
.btn{padding:8px 18px;border-radius:var(--radius-sm);font-size:13px;font-family:'DM Sans',sans-serif;font-weight:500;cursor:pointer;transition:all 0.15s;border:1px solid var(--border2);background:var(--surface2);color:var(--text);}
.btn:hover{background:var(--surface3);}
.btn-primary{background:var(--accent);color:#1a1209;border-color:var(--accent);}
.btn-primary:hover{opacity:0.85;}
.btn-danger{background:transparent;color:var(--danger);border-color:var(--danger);}
.btn-danger:hover{background:rgba(192,104,90,0.1);}
.btn-sm{padding:5px 12px;font-size:12px;}

/* Forms */
input,select,textarea{
  background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius-sm);
  color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;padding:9px 14px;
  outline:none;transition:border-color 0.15s;width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);}
select option{background:#1a1a1a;}
label{font-size:12px;color:var(--text2);display:block;margin-bottom:5px;}
.form-group{margin-bottom:1rem;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;}

/* Flashcard */
.fc-scene{perspective:1000px;width:100%;max-width:520px;margin:0 auto;}
.fc{width:100%;height:340px;position:relative;transform-style:preserve-3d;transition:transform 0.55s cubic-bezier(.4,0,.2,1);cursor:pointer;}
.fc.flipped{transform:rotateY(180deg);}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;overflow:hidden;}
.fc-back{transform:rotateY(180deg);background:var(--surface2);}
.fc-img-box{width:100%;height:150px;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface3);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;position:relative;flex-shrink:0;}
.fc-img-box img{width:100%;height:100%;object-fit:cover;display:block;}
.img-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;gap:6px;}
.img-placeholder .ph-word{font-family:'Shippori Mincho',serif;font-size:1.4rem;color:var(--text3);}
.img-placeholder .ph-hint{font-size:11px;color:var(--text3);}
.spin{width:20px;height:20px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.fc-word{font-family:'Shippori Mincho',serif;font-size:2rem;font-weight:600;text-align:center;margin-bottom:4px;}
.fc-furi{font-size:13px;color:var(--accent);letter-spacing:0.15em;margin-bottom:4px;}
.fc-badge-row{margin-top:6px;}
.fc-hint{font-size:11px;color:var(--text3);position:absolute;bottom:1rem;}
.fc-trans-row{margin-bottom:10px;text-align:center;}
.fc-trans-lang{font-size:11px;color:var(--text3);letter-spacing:0.08em;margin-bottom:2px;}
.fc-trans-val{font-size:1.05rem;color:var(--text);}
.fc-trans-val.ja{font-family:'Shippori Mincho',serif;}
.retry-img-btn{font-size:11px;color:var(--accent);background:none;border:1px solid var(--accent);border-radius:4px;padding:3px 8px;cursor:pointer;margin-top:4px;font-family:'DM Sans',sans-serif;}
.retry-img-btn:hover{background:rgba(200,169,110,0.15);}

/* Study controls */
.rating-btns{display:flex;gap:10px;justify-content:center;margin-top:1.25rem;}
.rb{padding:9px 22px;border-radius:var(--radius-sm);font-size:13px;font-family:'DM Sans',sans-serif;cursor:pointer;border:none;font-weight:500;transition:opacity 0.15s;}
.rb:hover{opacity:0.8;}
.rb-hard{background:#5a2a2a;color:#f0a090;}
.rb-easy{background:#1e3d1e;color:#90e090;}
.study-nav{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:1rem;}
.study-meta{text-align:center;font-size:13px;color:var(--text3);margin-top:0.5rem;}

/* Word table */
.word-table{width:100%;border-collapse:collapse;}
.word-table th{font-size:11px;color:var(--text3);text-align:left;padding:8px 12px;border-bottom:1px solid var(--border);letter-spacing:0.08em;}
.word-table td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:14px;vertical-align:middle;}
.word-table tr:hover td{background:var(--surface2);}
.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:500;margin:1px;}
.badge-ja{background:#1e3050;color:#80b8e8;}
.badge-en{background:#1e3d1e;color:#80d880;}
.badge-zh{background:#3d1e1e;color:#e89080;}
.search-row{display:flex;gap:8px;margin-bottom:1.5rem;flex-wrap:wrap;}
.search-row input{max-width:240px;}
.search-row select{max-width:160px;}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2rem;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;}
.stat-val{font-family:'Shippori Mincho',serif;font-size:2rem;color:var(--accent);}
.stat-lbl{font-size:12px;color:var(--text3);margin-top:4px;}
.prog-bar{height:4px;background:var(--surface3);border-radius:2px;overflow:hidden;margin-top:6px;}
.prog-fill{height:100%;background:var(--accent);border-radius:2px;transition:width 0.4s;}

/* Quiz */
.quiz-q{font-family:'Shippori Mincho',serif;font-size:2.2rem;text-align:center;margin:1.5rem 0 0.5rem;}
.quiz-furi{font-size:13px;color:var(--accent);text-align:center;letter-spacing:0.15em;min-height:20px;margin-bottom:1.5rem;}
.quiz-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:480px;margin:0 auto;}
.qc{padding:14px;border-radius:var(--radius-sm);border:1px solid var(--border2);background:var(--surface2);color:var(--text);font-size:14px;cursor:pointer;transition:all 0.15s;text-align:center;font-family:'DM Sans',sans-serif;}
.qc:hover{border-color:var(--accent);color:var(--accent);}
.qc.correct{background:#1a3a1a;border-color:var(--accent2);color:var(--accent2);}
.qc.wrong{background:#3a1a1a;border-color:var(--danger);color:var(--danger);}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:200;display:none;align-items:center;justify-content:center;padding:1rem;}
.modal-bg.open{display:flex;}
.modal{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);padding:2rem;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;}
.modal-title{font-family:'Shippori Mincho',serif;font-size:1.3rem;margin-bottom:1.5rem;}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:1.5rem;}
.spin-sm{width:13px;height:13px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;display:inline-block;vertical-align:middle;margin-right:5px;}

/* Toast */
.toast{position:fixed;bottom:2rem;right:2rem;background:var(--surface3);border:1px solid var(--border2);border-radius:var(--radius-sm);padding:11px 18px;font-size:13px;color:var(--text);z-index:999;opacity:0;transform:translateY(8px);transition:all 0.2s;pointer-events:none;}
.toast.show{opacity:1;transform:translateY(0);}
.io-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   スマホ対応 (レスポンシブ)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 640px) {

  /* サイドバーを非表示 → 下部タブバーに切り替え */
  .sidebar { display: none; }

  /* メインコンテンツを全幅に */
  .layout { flex-direction: column; height: auto; min-height: 100vh; }
  .main { padding: 1.25rem 1rem 5rem; overflow-y: auto; }

  /* 下部タブバー */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 100;
    height: 56px;
  }
  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 10px;
    color: var(--text3);
    cursor: pointer;
    transition: color 0.15s;
    padding: 4px 0;
  }
  .bottom-nav-item .bn-icon { font-size: 18px; line-height: 1; }
  .bottom-nav-item.active { color: var(--accent); }

  /* ページタイトル */
  .page-title { font-size: 1.35rem; }
  .page-header { margin-bottom: 1.25rem; }

  /* フラッシュカード */
  .fc { height: 300px; }
  .fc-img-box { height: 120px; }
  .fc-word { font-size: 1.6rem; }
  .fc-scene { max-width: 100%; }

  /* 評価ボタンを大きく */
  .rb { padding: 12px 28px; font-size: 14px; }
  .rating-btns { gap: 12px; margin-top: 1rem; }

  /* 統計グリッド：2列に */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* IO グリッド：1列に */
  .io-grid { grid-template-columns: 1fr; }

  /* フォームの2列を1列に */
  .form-row { grid-template-columns: 1fr; }

  /* 検索行 */
  .search-row input { max-width: 100%; }
  .search-row select { max-width: 100%; }

  /* 単語テーブル：翻訳・正答率列を非表示 */
  .word-table th:nth-child(4),
  .word-table td:nth-child(4),
  .word-table th:nth-child(5),
  .word-table td:nth-child(5) { display: none; }

  /* モーダル */
  .modal { padding: 1.5rem 1rem; border-radius: var(--radius) var(--radius) 0 0; }
  .modal-bg { align-items: flex-end; padding: 0; }

  /* クイズ */
  .quiz-q { font-size: 1.8rem; }
  .quiz-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .qc { padding: 12px 8px; font-size: 13px; }

  /* トースト */
  .toast { bottom: 4.5rem; left: 1rem; right: 1rem; text-align: center; }

  /* ボタン全体タップしやすく */
  .btn { padding: 10px 16px; }
  .btn-sm { padding: 8px 12px; }
}

/* タブレット */
@media (min-width: 641px) {
  .bottom-nav { display: none; }
}