/* 14 · 德语入门速查 · 包豪斯黑白积木风；作用域 .de- 唯一 */
.de-wrap{
  --de-paper:#f4f4f1; --de-card:#ffffff; --de-ink:#111214; --de-mute:#5c6066;
  --de-line:#111214; --de-line2:#d9d9d4; --de-red:#e30613; --de-yellow:#ffcc00; --de-blue:#0057b7;
  max-width:1020px;margin:0 auto;padding:18px 14px 44px;
  font-size:15.5px;line-height:1.7;color:var(--de-ink);
  font-family:'Helvetica Neue',Helvetica,Arial,'Microsoft YaHei',sans-serif;box-sizing:border-box;
}
.de-wrap *,.de-wrap *::before,.de-wrap *::after{box-sizing:border-box;}
.de-wrap h1,.de-wrap h2,.de-wrap h3{font-weight:900;letter-spacing:-.01em;}
.de-wrap b{background:var(--de-yellow);color:var(--de-ink);padding:0 3px;font-weight:900;}
.de-wrap p{margin:0 0 10px;}
.de-wrap a{color:var(--de-blue);}
.de-wrap input,.de-wrap textarea,.de-wrap button{font-family:inherit;font-size:15px;}
.de-wrap input,.de-wrap textarea{
  background:var(--de-card);color:var(--de-ink);border:2px solid var(--de-line);
  border-radius:0;padding:9px 12px;outline:none;max-width:100%;
}
.de-wrap input:focus,.de-wrap textarea:focus{border-color:var(--de-blue);box-shadow:4px 4px 0 var(--de-yellow);}
.de-wrap textarea{width:100%;resize:vertical;line-height:1.6;}
.de-wrap .de-btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:2px solid var(--de-line);background:var(--de-card);color:var(--de-ink);
  padding:8px 15px;cursor:pointer;font-weight:900;text-decoration:none;text-transform:uppercase;
  letter-spacing:.03em;transition:transform .1s,background .15s;
}
.de-wrap .de-btn:hover{background:var(--de-yellow);}
.de-wrap .de-btn:active{transform:translate(2px,2px);}
.de-wrap .de-btn.main{background:var(--de-ink);color:#fff;}
.de-wrap .de-btn.main:hover{background:var(--de-red);}
.de-wrap .de-btn.ghost{background:transparent;color:var(--de-mute);border-color:var(--de-line2);}
.de-wrap :focus-visible{outline:3px solid var(--de-red);outline-offset:2px;}

.de-blocks{display:grid;grid-template-columns:repeat(5,1fr);height:14px;gap:4px;margin-bottom:12px;}
.de-blocks i{display:block;}
.de-blocks i:nth-child(1){background:var(--de-ink);}
.de-blocks i:nth-child(2){background:var(--de-red);}
.de-blocks i:nth-child(3){background:var(--de-yellow);}
.de-blocks i:nth-child(4){background:var(--de-blue);}
.de-blocks i:nth-child(5){background:var(--de-ink);}

.de-hero{display:grid;grid-template-columns:1fr 240px;gap:0;border:3px solid var(--de-ink);background:var(--de-card);}
.de-hero-copy{padding:24px 22px 22px;}
.de-kicker{font-size:11.5px;letter-spacing:.24em;font-weight:900;color:var(--de-mute);margin:0 0 10px;}
.de-hero h1{font-size:clamp(30px,6vw,52px);line-height:1.05;margin:0 0 12px;text-transform:uppercase;}
.de-sub{max-width:560px;color:var(--de-mute);margin:0 0 18px;}
.de-hero-direct{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.de-hero-direct input{flex:1 1 200px;min-width:0;}
.de-hero-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);border-left:3px solid var(--de-ink);}
.de-hero-grid span{display:grid;place-items:center;font-size:19px;font-weight:900;border-right:1px solid var(--de-ink);border-bottom:1px solid var(--de-ink);}
.de-hero-grid span:nth-child(1){background:var(--de-red);color:#fff;}
.de-hero-grid span:nth-child(3){background:var(--de-yellow);}
.de-hero-grid span:nth-child(5){background:var(--de-blue);color:#fff;}
.de-hero-grid span:nth-child(7){background:var(--de-ink);color:var(--de-yellow);}
.de-hero-grid span:nth-child(9){background:var(--de-yellow);}
@media(max-width:720px){.de-hero{grid-template-columns:1fr;}.de-hero-grid{grid-template-columns:repeat(5,1fr);grid-template-rows:auto;border-left:none;border-top:3px solid var(--de-ink);}.de-hero-grid span{min-height:44px;border-bottom:none;}}

.de-sec{background:var(--de-card);border:2px solid var(--de-ink);margin-top:16px;padding:20px 18px 22px;}
.de-sec-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;border-bottom:4px solid var(--de-ink);padding-bottom:10px;margin-bottom:15px;}
.de-no{background:var(--de-blue);color:#fff;font-size:14px;font-weight:900;padding:4px 11px;}
.de-sec-head h2{font-size:19px;margin:0;text-transform:uppercase;}
.de-sec-head p{font-size:12.5px;color:var(--de-mute);margin:0;}
@media(max-width:640px){.de-sec-head{grid-template-columns:auto 1fr;}.de-sec-head p{grid-column:1/-1;}}
.de-note{font-size:13px;color:var(--de-mute);border-left:5px solid var(--de-yellow);padding:8px 12px;margin-top:13px;overflow-wrap:anywhere;background:var(--de-paper);}

.de-umlaut{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;margin-bottom:14px;}
.de-umlaut-card{border:2px solid var(--de-ink);padding:12px;position:relative;}
.de-umlaut-card .de-glyph{font-size:38px;font-weight:900;line-height:1;color:var(--de-red);}
.de-umlaut-card .de-glyph.alt{color:var(--de-blue);}
.de-umlaut-card p{font-size:13px;margin:6px 0 0;color:var(--de-mute);}
.de-umlaut-card .de-tag{position:absolute;right:0;top:0;background:var(--de-ink);color:#fff;font-size:10.5px;padding:2px 7px;font-weight:900;}
.de-alpha-line{display:flex;flex-wrap:wrap;gap:4px;}
.de-alpha-line span{border:1px solid var(--de-line2);padding:3px 7px;font-size:13px;font-weight:700;background:var(--de-paper);}

.de-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.de-wrap .de-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:460px;}
.de-table caption{caption-side:top;text-align:left;font-size:12.5px;color:var(--de-mute);padding-bottom:7px;font-weight:900;text-transform:uppercase;}
.de-table th,.de-table td{border:2px solid var(--de-ink);padding:8px 10px;text-align:left;}
.de-table thead th{background:var(--de-ink);color:#fff;font-weight:900;}
.de-table tbody th{background:var(--de-paper);font-weight:900;}
.de-table tbody tr:nth-child(even) td{background:var(--de-paper);}

.de-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.de-wrap .de-cat{border:2px solid var(--de-ink);background:var(--de-paper);color:var(--de-ink);padding:5px 12px;cursor:pointer;font-size:13px;font-weight:900;text-transform:uppercase;}
.de-wrap .de-cat.on{background:var(--de-red);border-color:var(--de-red);color:#fff;}
.de-search-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px;}
.de-search-line input{flex:1 1 210px;min-width:0;}
.de-count{font-size:12.5px;color:var(--de-mute);font-weight:900;}
.de-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:9px;}
.de-entry{border:2px solid var(--de-line2);background:var(--de-paper);padding:10px 12px;border-left:7px solid var(--de-blue);}
.de-entry-de{font-size:17px;font-weight:900;overflow-wrap:anywhere;}
.de-entry-tip{font-size:12.5px;color:var(--de-mute);}
.de-entry-zh{font-size:14px;margin:3px 0 7px;}
.de-entry-cat{font-size:11px;color:#fff;background:var(--de-ink);padding:1px 7px;font-weight:900;}
.de-wrap .de-mini{border:2px solid var(--de-ink);background:transparent;color:var(--de-ink);padding:3px 9px;font-size:12px;font-weight:900;cursor:pointer;margin-top:7px;text-transform:uppercase;}
.de-wrap .de-mini.on{background:var(--de-blue);border-color:var(--de-blue);color:#fff;}
.de-empty{grid-column:1/-1;padding:20px;text-align:center;color:var(--de-mute);border:2px dashed var(--de-ink);font-weight:900;}

.de-verb-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.de-wrap .de-verb{border:2px solid var(--de-ink);background:var(--de-paper);color:var(--de-ink);padding:5px 12px;cursor:pointer;font-size:14px;font-weight:900;}
.de-wrap .de-verb.on{background:var(--de-yellow);}
.de-compound-input{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;}
.de-compound-input input{flex:1 1 220px;min-width:0;}
.de-field{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--de-mute);font-weight:900;text-transform:uppercase;}
.de-compound-chips{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0;}
.de-wrap .de-chip{border:2px solid var(--de-line2);background:var(--de-paper);color:var(--de-ink);padding:4px 10px;font-size:12.5px;font-weight:700;cursor:pointer;}
.de-wrap .de-chip:hover{border-color:var(--de-red);}
.de-compound-out{margin-top:10px;min-height:40px;}
.de-comp-result{border:2px solid var(--de-ink);padding:13px;background:var(--de-paper);}
.de-comp-word{font-size:22px;font-weight:900;}
.de-comp-parts{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0;align-items:center;}
.de-comp-parts span{background:var(--de-yellow);border:2px solid var(--de-ink);padding:4px 10px;font-weight:900;}
.de-comp-parts i{font-style:normal;font-weight:900;color:var(--de-red);}
.de-comp-result p{font-size:14px;margin:6px 0 0;overflow-wrap:anywhere;}
.de-comp-generic{border-left:6px solid var(--de-blue);padding:10px 13px;background:var(--de-paper);font-size:14px;overflow-wrap:anywhere;}
.de-capital{margin-top:14px;border:2px solid var(--de-ink);padding:13px;background:var(--de-yellow);}
.de-capital h3{font-size:15px;margin:0 0 6px;text-transform:uppercase;}
.de-capital p{font-size:13.5px;margin:0;}

.de-quiz{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:9px;}
.de-q{border:2px solid var(--de-line2);background:var(--de-paper);padding:11px 12px;}
.de-q p{margin:0 0 8px;font-weight:900;}
.de-q-opts{display:flex;flex-direction:column;gap:5px;}
.de-wrap .de-q-opt{text-align:left;border:2px solid var(--de-line2);background:var(--de-card);color:var(--de-ink);padding:5px 10px;cursor:pointer;font-size:14px;}
.de-wrap .de-q-opt.on{background:var(--de-ink);color:#fff;border-color:var(--de-ink);}
.de-quiz-btns,.de-tool-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px;}
.de-quiz-result{margin-top:13px;border:3px solid var(--de-ink);padding:13px;background:var(--de-yellow);}
.de-quiz-result h3{margin:0 0 8px;text-transform:uppercase;}
.de-wrong{border-left:5px solid var(--de-red);padding:5px 10px;margin:5px 0;font-size:13.5px;overflow-wrap:anywhere;background:var(--de-card);}
.de-tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:18px;}
.de-card{border:2px solid var(--de-line2);padding:13px;background:var(--de-paper);}
.de-card h3{font-size:15px;margin:0 0 9px;text-transform:uppercase;}
.de-card h3 small{font-weight:400;font-size:12px;color:var(--de-mute);text-transform:none;}
.de-pill{display:inline-block;background:var(--de-red);color:#fff;padding:0 9px;font-size:12px;}
.de-fav-list,.de-batch-out{min-height:36px;font-size:14px;overflow-wrap:anywhere;}
.de-fav-item{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:2px solid var(--de-line2);}
.de-batch-line{padding:3px 9px;border-left:5px solid var(--de-blue);margin:4px 0;background:var(--de-card);}
.de-batch-line.bad{border-left-color:var(--de-red);color:var(--de-red);}
.de-batch-line.miss{border-left-color:var(--de-yellow);color:var(--de-mute);}

.de-modal{position:fixed;inset:0;z-index:12000;background:rgba(17,18,20,.68);display:grid;place-items:center;padding:16px;}
.de-modal-box{background:var(--de-card);border:4px solid var(--de-ink);max-width:560px;width:100%;max-height:82vh;overflow:auto;padding:20px;box-shadow:10px 10px 0 var(--de-red);}
.de-modal-box h3{margin:0 0 12px;font-size:19px;text-transform:uppercase;}
.de-modal-body{font-size:14.5px;line-height:1.7;overflow-wrap:anywhere;}
.de-modal-body pre{white-space:pre-wrap;word-break:break-all;background:var(--de-paper);border:2px solid var(--de-ink);padding:10px;}
.de-modal-x{float:right;border:none;background:transparent;font-size:24px;cursor:pointer;color:var(--de-mute);line-height:1;}
.de-modal-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:14px;}

html[data-theme="dark"] .de-wrap{
  --de-paper:#1b1c1e; --de-card:#242628; --de-ink:#f2f2ef; --de-mute:#a8adb3;
  --de-line:#f2f2ef; --de-line2:#3c3f42; --de-red:#ff5a4d; --de-yellow:#e8bb28; --de-blue:#5b9cf0;
}
html[data-theme="dark"] .de-wrap .de-btn.main{background:#f2f2ef;color:#111;}
html[data-theme="dark"] .de-wrap .de-btn.main:hover{background:var(--de-red);color:#111;}
html[data-theme="dark"] .de-wrap .de-cat.on,
html[data-theme="dark"] .de-wrap .de-mini.on,
html[data-theme="dark"] .de-wrap .de-q-opt.on,
html[data-theme="dark"] .de-pill,
html[data-theme="dark"] .de-no{color:#111;}
html[data-theme="dark"] .de-sec-head{border-bottom-color:#f2f2ef;}
html[data-theme="dark"] .de-table thead th{background:#3c3f42;color:#f2f2ef;}
html[data-theme="dark"] .de-umlaut-card .de-glyph{color:var(--de-red);}
html[data-theme="dark"] .de-capital,
html[data-theme="dark"] .de-quiz-result{color:#111;}
html[data-theme="dark"] .de-hero-grid span:nth-child(1),
html[data-theme="dark"] .de-hero-grid span:nth-child(5){color:#111;}

@media(max-width:420px){
  .de-wrap{padding:12px 9px 30px;font-size:15px;}
  .de-hero-copy,.de-sec{padding:16px 12px;}
  .de-hero h1{font-size:28px;}
  .de-hero-grid span{font-size:14px;}
}