/* 15 · 俄语字母表 · 斯拉夫深红金饰风；作用域 .ru- 唯一 */
.ru-wrap{
  --ru-bg:#f7f0e2; --ru-card:#fffbf1; --ru-ink:#2c1b1c; --ru-mute:#7a6258;
  --ru-red:#6b1a21; --ru-red2:#8a2b31; --ru-gold:#b89132; --ru-gold2:#dfc371;
  --ru-line:#dcc48c; --ru-line2:#ecdcb6; --ru-shadow:rgba(107,26,33,.12);
  max-width:1000px;margin:0 auto;padding:20px 14px 44px;
  font-size:15.5px;line-height:1.78;color:var(--ru-ink);
  font-family:'Times New Roman',Georgia,'Songti SC','SimSun',serif;box-sizing:border-box;
}
.ru-wrap *,.ru-wrap *::before,.ru-wrap *::after{box-sizing:border-box;}
.ru-wrap h1,.ru-wrap h2,.ru-wrap h3{font-weight:700;}
.ru-wrap b{color:var(--ru-red);font-weight:700;}
.ru-wrap p{margin:0 0 10px;}
.ru-wrap a{color:var(--ru-red);}
.ru-wrap input,.ru-wrap textarea,.ru-wrap button{font-family:inherit;font-size:15px;}
.ru-wrap input,.ru-wrap textarea{
  background:var(--ru-card);color:var(--ru-ink);border:1px solid var(--ru-line);
  border-radius:0;padding:9px 12px;outline:none;max-width:100%;
}
.ru-wrap input:focus,.ru-wrap textarea:focus{border-color:var(--ru-gold);box-shadow:0 0 0 3px rgba(184,145,50,.2);}
.ru-wrap textarea{width:100%;resize:vertical;line-height:1.6;}
.ru-wrap .ru-btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--ru-gold);background:linear-gradient(180deg,#fdf8ec,#f0e2bf);
  color:var(--ru-red);padding:9px 16px;cursor:pointer;font-weight:700;text-decoration:none;
  letter-spacing:.02em;transition:filter .15s;
}
.ru-wrap .ru-btn:hover{filter:brightness(.96);}
.ru-wrap .ru-btn.main{background:linear-gradient(180deg,var(--ru-red2),var(--ru-red));color:#fdf6e5;border-color:var(--ru-red);}
.ru-wrap .ru-btn.ghost{background:transparent;border-color:var(--ru-line);color:var(--ru-mute);}
.ru-wrap :focus-visible{outline:2px solid var(--ru-red);outline-offset:2px;}

.ru-goldline{height:7px;margin-bottom:14px;border:1px solid var(--ru-gold);
  background:repeating-linear-gradient(90deg,var(--ru-gold) 0 12px,var(--ru-red) 12px 16px,var(--ru-gold2) 16px 26px,var(--ru-red) 26px 30px);}

.ru-hero{
  position:relative;background:var(--ru-card);border:2px solid var(--ru-gold);
  padding:28px 26px 24px;text-align:center;
  background-image:linear-gradient(var(--ru-card),var(--ru-card)),linear-gradient(135deg,var(--ru-gold2),transparent 40%,transparent 60%,var(--ru-gold2));
  background-origin:padding-box,border-box;background-clip:padding-box,border-box;
}
.ru-hero::before,.ru-hero::after{content:'❖';position:absolute;color:var(--ru-gold);font-size:18px;}
.ru-hero::before{top:8px;left:12px;}
.ru-hero::after{bottom:8px;right:12px;}
.ru-kicker{font-size:12.5px;letter-spacing:.24em;color:var(--ru-gold);margin:0 0 8px;font-weight:700;}
.ru-hero h1{font-size:clamp(30px,6.2vw,48px);margin:0 0 10px;color:var(--ru-red);letter-spacing:.06em;}
.ru-sub{max-width:660px;margin:0 auto 18px;color:var(--ru-mute);}
.ru-hero-direct{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;align-items:flex-end;}
.ru-field{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ru-mute);text-align:left;}
.ru-hero-direct input{flex:1 1 210px;min-width:0;}
.ru-hero-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px;border-top:1px solid var(--ru-line);padding-top:13px;}
.ru-hero-meta div{border-right:1px solid var(--ru-line2);}
.ru-hero-meta div:last-child{border-right:none;}
.ru-hero-meta b{display:block;font-size:23px;color:var(--ru-red);}
.ru-hero-meta span{font-size:12.5px;color:var(--ru-mute);}
@media(max-width:640px){.ru-hero-meta{grid-template-columns:repeat(2,1fr);}}

.ru-sec{background:var(--ru-card);border:1px solid var(--ru-line);margin-top:18px;padding:20px 18px 22px;box-shadow:0 2px 14px var(--ru-shadow);position:relative;}
.ru-sec::before{content:'';position:absolute;inset:5px;border:1px solid var(--ru-line2);pointer-events:none;}
.ru-sec-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--ru-gold);padding-bottom:10px;margin-bottom:15px;}
.ru-no{font-size:18px;font-weight:700;color:var(--ru-gold);border:1px solid var(--ru-gold);width:30px;height:30px;display:inline-grid;place-items:center;}
.ru-sec-head h2{font-size:19px;margin:0;color:var(--ru-red);}
.ru-sec-head p{margin:0 0 0 auto;font-size:12.5px;color:var(--ru-mute);font-style:italic;}
@media(max-width:640px){.ru-sec-head p{margin-left:0;width:100%;}}
.ru-note{font-size:13px;color:var(--ru-mute);border-left:3px double var(--ru-gold);padding:8px 12px;margin-top:13px;overflow-wrap:anywhere;}

.ru-progress{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;font-size:14px;}
.ru-progress b{font-size:20px;}
.ru-progress-bar{flex:1 1 180px;height:10px;background:var(--ru-bg);border:1px solid var(--ru-line);}
.ru-progress-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ru-gold2),var(--ru-red));}
.ru-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.ru-wrap .ru-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:720px;}
.ru-table caption{caption-side:top;text-align:left;font-size:12.5px;color:var(--ru-mute);padding-bottom:7px;font-style:italic;}
.ru-table th,.ru-table td{border:1px solid var(--ru-line2);padding:7px 9px;text-align:left;vertical-align:middle;}
.ru-table thead th{background:linear-gradient(180deg,var(--ru-red2),var(--ru-red));color:#fdf6e5;font-weight:700;white-space:nowrap;}
.ru-table tbody tr:nth-child(even){background:var(--ru-bg);}
.ru-table .ru-cyr{font-size:24px;font-weight:700;color:var(--ru-red);white-space:nowrap;}
.ru-table .ru-ital{font-size:22px;font-style:italic;color:var(--ru-gold);white-space:nowrap;}
.ru-table .ru-ex{font-size:14px;overflow-wrap:anywhere;}
.ru-know{width:22px;height:22px;accent-color:var(--ru-red);cursor:pointer;}

.ru-confuse-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:11px;}
.ru-confuse{border:1px solid var(--ru-line);padding:12px 14px;background:var(--ru-bg);}
.ru-confuse h3{font-size:16px;margin:0 0 8px;color:var(--ru-red);}
.ru-confuse-pair{display:flex;gap:10px;align-items:center;justify-content:center;background:var(--ru-card);border:1px solid var(--ru-line2);padding:8px;margin-bottom:8px;}
.ru-confuse-pair span{font-size:30px;font-weight:700;color:var(--ru-red);}
.ru-confuse-pair i{font-style:normal;color:var(--ru-gold);}
.ru-confuse p{font-size:13.5px;color:var(--ru-mute);margin:0;}

.ru-translit-box{border:1px solid var(--ru-line);padding:15px;background:var(--ru-bg);}
.ru-translit-line{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.ru-translit-line input{flex:1 1 220px;min-width:0;}
.ru-translit-out{margin-top:13px;min-height:44px;border:1px dashed var(--ru-gold);padding:10px 12px;background:var(--ru-card);overflow-wrap:anywhere;}
.ru-translit-out .ru-out-cyr{font-size:26px;font-weight:700;color:var(--ru-red);display:block;}
.ru-translit-out .ru-out-note{font-size:13px;color:var(--ru-mute);}
.ru-translit-rules{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px;margin-top:13px;}
.ru-translit-rules span{border:1px solid var(--ru-line2);background:var(--ru-card);padding:4px 8px;font-size:12.5px;}
.ru-translit-rules span b{color:var(--ru-red);}

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

.ru-sort-box{border:1px solid var(--ru-line);padding:15px;background:var(--ru-bg);}
.ru-sort-tip{font-size:13.5px;color:var(--ru-mute);}
.ru-sort-pool,.ru-sort-slot{display:flex;gap:7px;flex-wrap:wrap;min-height:52px;padding:9px;border:1px dashed var(--ru-line);background:var(--ru-card);margin-bottom:9px;}
.ru-sort-slot{border-style:solid;border-color:var(--ru-gold);}
.ru-wrap .ru-sort-tile{
  width:42px;height:42px;border:1px solid var(--ru-gold);background:var(--ru-card);color:var(--ru-red);
  font-size:22px;font-weight:700;cursor:pointer;display:grid;place-items:center;
}
.ru-wrap .ru-sort-tile:hover{background:var(--ru-bg);}
.ru-wrap .ru-sort-tile.used{opacity:.28;cursor:default;}
.ru-wrap .ru-sort-tile.slot-tile{cursor:grab;background:var(--ru-bg);}
.ru-sort-btns{display:flex;gap:8px;flex-wrap:wrap;}
.ru-sort-out{margin-top:11px;font-size:14px;overflow-wrap:anywhere;}
.ru-sort-out.ok{color:var(--ru-red);font-weight:700;}
.ru-sort-out.bad{color:var(--ru-mute);}

.ru-tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;}
.ru-card{border:1px solid var(--ru-line);padding:14px;background:var(--ru-bg);}
.ru-card h3{font-size:15px;margin:0 0 9px;color:var(--ru-red);}
.ru-card h3 small{font-weight:400;font-size:12px;color:var(--ru-mute);}
.ru-card-note{font-size:13.5px;color:var(--ru-mute);}
.ru-batch-out{min-height:36px;font-size:14px;overflow-wrap:anywhere;}
.ru-batch-line{padding:3px 9px;border-left:3px double var(--ru-gold);margin:4px 0;background:var(--ru-card);}
.ru-batch-line.bad{border-left-color:var(--ru-red);color:var(--ru-red);}
.ru-batch-line.miss{border-left-color:var(--ru-gold);color:var(--ru-mute);}

.ru-modal{position:fixed;inset:0;z-index:12000;background:rgba(44,27,28,.64);display:grid;place-items:center;padding:16px;}
.ru-modal-box{background:var(--ru-card);border:2px solid var(--ru-gold);max-width:560px;width:100%;max-height:82vh;overflow:auto;padding:22px;box-shadow:0 14px 44px rgba(0,0,0,.3);}
.ru-modal-box h3{margin:0 0 12px;color:var(--ru-red);font-size:19px;}
.ru-modal-body{font-size:14.5px;line-height:1.78;overflow-wrap:anywhere;}
.ru-modal-body pre{white-space:pre-wrap;word-break:break-all;background:var(--ru-bg);border:1px solid var(--ru-line2);padding:10px;}
.ru-modal-x{float:right;border:none;background:transparent;font-size:24px;cursor:pointer;color:var(--ru-mute);line-height:1;}
.ru-modal-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:14px;}

html[data-theme="dark"] .ru-wrap{
  --ru-bg:#1e1516; --ru-card:#271b1d; --ru-ink:#f0e6d6; --ru-mute:#bda595;
  --ru-red:#d4717a; --ru-red2:#8a2b31; --ru-gold:#d9b45c; --ru-gold2:#e8cc86;
  --ru-line:#4c3730; --ru-line2:#3a2a27; --ru-shadow:rgba(0,0,0,.35);
}
html[data-theme="dark"] .ru-wrap .ru-btn.main{color:#1e1516;}
html[data-theme="dark"] .ru-table thead th{background:#5a2228;color:#f0e6d6;}
html[data-theme="dark"] .ru-wrap .ru-q-opt.on,
html[data-theme="dark"] .ru-wrap .ru-sort-tile{color:#f0e6d6;}
html[data-theme="dark"] .ru-hero{background-image:linear-gradient(var(--ru-card),var(--ru-card)),linear-gradient(135deg,#6a4f22,transparent 40%,transparent 60%,#6a4f22);}

@media(max-width:420px){
  .ru-wrap{padding:12px 9px 30px;font-size:15px;}
  .ru-hero,.ru-sec{padding:16px 12px;}
  .ru-hero h1{font-size:28px;}
  .ru-confuse-grid{grid-template-columns:1fr;}
}