/* 12 · 法语入门速查 · 法式奶油蓝白手账风；作用域 .fr- 唯一 */
.fr-wrap{
  --fr-paper:#fbf7ec; --fr-card:#fffdf7; --fr-ink:#25344d; --fr-mute:#6f7c91;
  --fr-blue:#28528f; --fr-blue-soft:#e8eef8; --fr-line:#c9d4e6; --fr-line2:#e5ebf4;
  --fr-gold:#b7913f; --fr-red:#a83b4b; --fr-shadow:rgba(37,52,77,.07);
  max-width:900px;margin:0 auto;padding:22px 14px 44px;
  font-size:15.5px;line-height:1.8;color:var(--fr-ink);
  font-family:Georgia,'Songti SC','SimSun',serif;box-sizing:border-box;
}
.fr-wrap *,.fr-wrap *::before,.fr-wrap *::after{box-sizing:border-box;}
.fr-wrap h1,.fr-wrap h2,.fr-wrap h3{font-weight:700;}
.fr-wrap b{color:var(--fr-blue);font-weight:700;}
.fr-wrap p{margin:0 0 10px;}
.fr-wrap a{color:var(--fr-blue);}
.fr-wrap input,.fr-wrap textarea,.fr-wrap button,.fr-wrap select{font-family:inherit;font-size:15px;}
.fr-wrap input,.fr-wrap textarea{
  background:var(--fr-card);color:var(--fr-ink);border:1px solid var(--fr-line);
  border-radius:0;padding:9px 12px;outline:none;max-width:100%;
}
.fr-wrap input:focus,.fr-wrap textarea:focus{border-color:var(--fr-blue);box-shadow:0 0 0 3px var(--fr-blue-soft);}
.fr-wrap textarea{width:100%;resize:vertical;line-height:1.65;}
.fr-wrap .fr-btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--fr-blue);background:transparent;color:var(--fr-blue);
  padding:9px 16px;cursor:pointer;font-weight:700;text-decoration:none;
  border-radius:0;transition:background .15s;
}
.fr-wrap .fr-btn:hover{background:var(--fr-blue-soft);}
.fr-wrap .fr-btn.main{background:var(--fr-blue);color:#fffdf7;}
.fr-wrap .fr-btn.ghost{border-color:var(--fr-line);color:var(--fr-mute);}
.fr-wrap :focus-visible{outline:2px dashed var(--fr-red);outline-offset:2px;}

/* 手账纸页：细双线框 + 胶带 */
.fr-page{position:relative;background:var(--fr-card);border:1px solid var(--fr-line);padding:26px 22px 28px;box-shadow:0 3px 18px var(--fr-shadow);}
.fr-page::before{content:'';position:absolute;inset:6px;border:1px solid var(--fr-line2);pointer-events:none;}
.fr-tape{position:absolute;width:76px;height:22px;background:rgba(183,145,63,.28);border-left:1px dashed rgba(183,145,63,.5);border-right:1px dashed rgba(183,145,63,.5);z-index:2;}
.fr-tape-a{top:-11px;left:36px;transform:rotate(-7deg);}
.fr-tape-b{top:-11px;right:36px;transform:rotate(6deg);}

.fr-hero{position:relative;text-align:center;padding:12px 8px 18px;border-bottom:1px solid var(--fr-line);margin-bottom:22px;}
.fr-kicker{font-size:12.5px;letter-spacing:.2em;color:var(--fr-gold);text-transform:uppercase;margin:0 0 8px;}
.fr-hero h1{
  font-family:'Segoe Script','Bradley Hand','Brush Script MT','Comic Sans MS',cursive;
  font-size:clamp(30px,6.4vw,46px);font-weight:700;color:var(--fr-blue);margin:0 0 10px;line-height:1.25;
}
.fr-sub{max-width:620px;margin:0 auto 18px;color:var(--fr-mute);font-style:italic;}
.fr-hero-direct{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;align-items:flex-end;}
.fr-field{display:flex;flex-direction:column;gap:5px;text-align:left;font-size:12.5px;color:var(--fr-mute);}
.fr-hero-direct .fr-field{flex:1 1 220px;min-width:0;}
.fr-hero-meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:18px;}
.fr-hero-meta span{font-size:12px;color:var(--fr-mute);border:1px solid var(--fr-line);padding:3px 10px;background:var(--fr-paper);}

/* 邮票式徽章 */
.fr-stamp{
  position:absolute;right:6px;top:-10px;width:74px;height:88px;transform:rotate(9deg);
  background:var(--fr-paper);border:1px solid var(--fr-gold);padding:6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-shadow:0 2px 6px var(--fr-shadow);
  background-image:radial-gradient(circle at 3px 3px,var(--fr-card) 2.4px,transparent 2.6px);
  background-size:10px 10px;background-position:-3px -3px;
}
.fr-stamp::before{content:'';position:absolute;inset:5px;border:1px dashed var(--fr-blue);}
.fr-stamp span{font-family:Georgia,serif;font-size:26px;font-weight:700;color:var(--fr-blue);line-height:1;z-index:1;}
.fr-stamp small{font-size:8.5px;line-height:1.15;text-align:center;color:var(--fr-mute);z-index:1;}
@media(max-width:640px){.fr-stamp{width:58px;height:70px;right:0;top:-8px;}.fr-stamp span{font-size:20px;}}

.fr-sec{padding:18px 0 22px;border-bottom:1px solid var(--fr-line);}
.fr-sec:last-child{border-bottom:none;}
.fr-sec-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.fr-no{font-family:Georgia,serif;font-size:20px;font-style:italic;color:var(--fr-gold);border-bottom:2px solid var(--fr-gold);padding:0 6px;}
.fr-sec-head h2{font-size:19px;margin:0;color:var(--fr-ink);}
.fr-sec-head p{margin:0 0 0 auto;font-size:12.5px;color:var(--fr-mute);font-style:italic;}
@media(max-width:640px){.fr-sec-head p{margin-left:0;width:100%;}}
.fr-note{font-size:13px;color:var(--fr-mute);border-left:2px solid var(--fr-gold);padding-left:10px;margin-top:12px;overflow-wrap:anywhere;}

.fr-alpha-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px;}
.fr-alpha{border:1px solid var(--fr-line2);background:var(--fr-paper);padding:8px 9px;text-align:center;}
.fr-alpha b{display:block;font-size:22px;color:var(--fr-blue);line-height:1.1;}
.fr-alpha .fr-ipa{display:block;font-size:12px;color:var(--fr-red);}
.fr-alpha small{display:block;font-size:11.5px;color:var(--fr-mute);overflow-wrap:anywhere;}
.fr-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:14px;}
.fr-rule{border:1px solid var(--fr-line);padding:11px 13px;background:var(--fr-card);}
.fr-rule h3{font-size:14.5px;margin:0 0 5px;color:var(--fr-blue);}
.fr-rule p{font-size:13.5px;color:var(--fr-mute);margin:0;}

.fr-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.fr-wrap .fr-cat{border:1px solid var(--fr-line);background:var(--fr-paper);color:var(--fr-mute);padding:5px 12px;cursor:pointer;font-size:13px;border-radius:14px;}
.fr-wrap .fr-cat.on{background:var(--fr-blue);border-color:var(--fr-blue);color:#fffdf7;}
.fr-search-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px;}
.fr-search-line input{flex:1 1 210px;min-width:0;}
.fr-count{font-size:12.5px;color:var(--fr-mute);font-style:italic;}
.fr-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:9px;}
.fr-entry{border:1px solid var(--fr-line2);background:var(--fr-card);padding:10px 12px;position:relative;}
.fr-entry::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--fr-gold);}
.fr-entry-fr{font-size:17px;font-weight:700;color:var(--fr-blue);overflow-wrap:anywhere;}
.fr-entry-ipa{font-size:12.5px;color:var(--fr-red);}
.fr-entry-zh{font-size:14px;margin:3px 0 7px;}
.fr-entry-cat{font-size:11.5px;color:var(--fr-mute);border:1px solid var(--fr-line2);padding:1px 7px;}
.fr-wrap .fr-mini{border:1px solid var(--fr-line);background:transparent;color:var(--fr-blue);padding:3px 9px;font-size:12px;cursor:pointer;margin-top:7px;}
.fr-wrap .fr-mini.on{background:var(--fr-red);border-color:var(--fr-red);color:#fffdf7;}
.fr-empty{grid-column:1/-1;padding:20px;text-align:center;color:var(--fr-mute);border:1px dashed var(--fr-line);}

.fr-verb-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px;}
.fr-wrap .fr-verb{border-bottom:2px solid transparent;background:transparent;color:var(--fr-mute);padding:5px 10px;cursor:pointer;font-family:Georgia,serif;font-size:15px;font-style:italic;}
.fr-wrap .fr-verb.on{color:var(--fr-blue);border-bottom-color:var(--fr-blue);font-weight:700;}
.fr-table-scroll,.fr-sec .fr-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.fr-wrap .fr-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:400px;}
.fr-table caption{caption-side:top;text-align:left;font-size:12.5px;color:var(--fr-mute);padding-bottom:6px;font-style:italic;}
.fr-table th,.fr-table td{border-bottom:1px solid var(--fr-line2);padding:8px 10px;text-align:left;}
.fr-table thead th{border-bottom:2px solid var(--fr-blue);color:var(--fr-blue);font-weight:700;}
.fr-table tbody tr:nth-child(even){background:var(--fr-paper);}

.fr-quiz{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:9px;}
.fr-q{border:1px solid var(--fr-line2);background:var(--fr-paper);padding:11px 12px;}
.fr-q p{margin:0 0 8px;font-weight:700;}
.fr-q-opts{display:flex;flex-direction:column;gap:5px;}
.fr-wrap .fr-q-opt{text-align:left;border:1px solid var(--fr-line);background:var(--fr-card);color:var(--fr-ink);padding:5px 10px;cursor:pointer;font-size:14px;}
.fr-wrap .fr-q-opt.on{background:var(--fr-blue);color:#fffdf7;border-color:var(--fr-blue);}
.fr-quiz-btns,.fr-tool-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px;}
.fr-quiz-result{margin-top:13px;border:1px solid var(--fr-blue);padding:13px;background:var(--fr-blue-soft);}
.fr-quiz-result h3{margin:0 0 8px;color:var(--fr-blue);font-size:16px;}
.fr-wrong{border-left:2px solid var(--fr-red);padding:5px 10px;margin:5px 0;font-size:13.5px;overflow-wrap:anywhere;}

.fr-tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;}
.fr-tool-card{border:1px solid var(--fr-line);padding:13px;background:var(--fr-paper);}
.fr-tool-card h3{font-size:15px;margin:0 0 9px;}
.fr-tool-card h3 small{font-weight:400;font-size:12px;color:var(--fr-mute);font-style:italic;}
.fr-pill{display:inline-block;background:var(--fr-blue);color:#fffdf7;border-radius:12px;padding:0 8px;font-size:12px;}
.fr-fav-list,.fr-batch-out{min-height:36px;font-size:14px;overflow-wrap:anywhere;}
.fr-fav-item{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px dotted var(--fr-line);}
.fr-batch-line{padding:3px 9px;border-left:2px solid var(--fr-blue);margin:4px 0;background:var(--fr-card);}
.fr-batch-line.bad{border-left-color:var(--fr-red);color:var(--fr-red);}
.fr-batch-line.miss{border-left-color:var(--fr-gold);color:var(--fr-mute);}

/* 操作后才出现的弹窗 */
.fr-modal{position:fixed;inset:0;z-index:12000;background:rgba(30,42,64,.55);display:grid;place-items:center;padding:16px;}
.fr-modal-box{background:var(--fr-card);border:1px solid var(--fr-blue);outline:1px solid var(--fr-line);outline-offset:5px;max-width:560px;width:100%;max-height:82vh;overflow:auto;padding:22px;}
.fr-modal-box h3{font-family:'Segoe Script','Bradley Hand',cursive;font-size:22px;color:var(--fr-blue);margin:0 0 12px;}
.fr-modal-body{font-size:14.5px;line-height:1.8;overflow-wrap:anywhere;}
.fr-modal-body pre{white-space:pre-wrap;word-break:break-all;background:var(--fr-paper);border:1px solid var(--fr-line2);padding:10px;}
.fr-modal-x{float:right;border:none;background:transparent;font-size:24px;cursor:pointer;color:var(--fr-mute);line-height:1;}
.fr-modal-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:14px;}

html[data-theme="dark"] .fr-wrap{
  --fr-paper:#1b2334; --fr-card:#212b3e; --fr-ink:#e7ecf5; --fr-mute:#a5b1c4;
  --fr-blue:#8bb0ef; --fr-blue-soft:#26344d; --fr-line:#3b4961; --fr-line2:#2e394e;
  --fr-gold:#d7ba73; --fr-red:#e0848f; --fr-shadow:rgba(0,0,0,.3);
}
html[data-theme="dark"] .fr-wrap .fr-btn.main,
html[data-theme="dark"] .fr-wrap .fr-cat.on,
html[data-theme="dark"] .fr-wrap .fr-mini.on,
html[data-theme="dark"] .fr-wrap .fr-q-opt.on,
html[data-theme="dark"] .fr-pill{color:#172033;}

@media(max-width:420px){
  .fr-wrap{padding:12px 9px 30px;font-size:15px;}
  .fr-page{padding:18px 12px 20px;}
  .fr-hero h1{font-size:28px;}
  .fr-alpha-grid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));}
  .fr-stamp{display:none;}
}