
.gcd-app{
  --gcd-bg:#3b3b3b;
  --gcd-text:#d9d9d9;
  --gcd-accent:#cf6f60;
  --gcd-gap:14px;
  --gcd-stage-mt:44px;
  --gcd-grid:64px 52px 180px 120px 140px 1fr;
  --gcd-grid-results:48px 52px 180px 120px 140px 1fr;
  --gcd-word-font:28px;
  --gcd-article-font:22px;
  --gcd-translation-font:22px;
  --gcd-exde-font:22px;
  --gcd-exen-font:20px;

  min-height:60vh;
  background:var(--gcd-bg);
  color:var(--gcd-text);
  padding:18px 14px;
  box-sizing:border-box;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.gcd-topnav{display:flex;align-items:center;padding:6px 0 18px;font-size:12px;letter-spacing:.02em;}
.gcd-topnav .gcd-left{flex:1;display:flex;justify-content:center;gap:18px;}
.gcd-topnav .gcd-right{display:flex;gap:18px;}
.gcd-topnav.gcd-nav-center{justify-content:center;gap:18px;}
.gcd-topnav a{color:#b56b5f;text-decoration:none;opacity:.9;}
.gcd-topnav a:hover{opacity:1;text-decoration:underline;}

.gcd-stage{display:flex;justify-content:center;margin-top:var(--gcd-stage-mt);}
.gcd-line{width:min(920px,100%);display:grid;grid-template-columns:var(--gcd-grid);gap:var(--gcd-gap);align-items:center;}
.gcd-icon{width:54px;height:54px;border:1px solid rgba(255,255,255,.08);border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:rgba(0,0,0,.12);}
.gcd-icon img{width:100%;height:100%;object-fit:cover;display:block;}

.gcd-article{font-size:var(--gcd-article-font);opacity:.8;}
.gcd-wordwrap{position:relative;}
.gcd-wordinput{width:100%;background:transparent;border:none;outline:none;font-size:var(--gcd-word-font);font-weight:600;color:var(--gcd-accent);padding:6px 8px;border-radius:6px;}
.gcd-wordinput:focus{box-shadow:0 0 0 1px rgba(207,111,96,.55) inset;}

.gcd-meta{display:flex;flex-direction:column;gap:6px;opacity:.9;}
.gcd-audio-btn{width:26px;height:26px;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.15);color:var(--gcd-text);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.gcd-audio-btn[disabled]{opacity:.4;cursor:not-allowed;}
.gcd-plural{font-size:18px;opacity:.85;}

.gcd-translation{font-size:var(--gcd-translation-font);opacity:.85;}
.gcd-examples .de{font-size:var(--gcd-exde-font);opacity:.9;}
.gcd-examples .en{font-size:var(--gcd-exen-font);opacity:.7;margin-top:6px;}

.gcd-results{width:min(920px,100%);margin:16px auto 0;display:flex;flex-direction:column;gap:10px;}
.gcd-result-row{padding:10px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.10);cursor:pointer;}
.gcd-result-row:hover{background:rgba(0,0,0,.16);}
.gcd-result-row .gcd-line{grid-template-columns:var(--gcd-grid-results);}

.gcd-skel .sk{height:16px;border-radius:8px;background:rgba(255,255,255,.08);}
.gcd-skel .sk.big{height:26px;}
.gcd-skel .sk.tall{height:22px;}
.gcd-skel .sk.w1{width:48px;}
.gcd-skel .sk.w2{width:120px;}
.gcd-skel .sk.w3{width:200px;}
.gcd-skel .sk.w4{width:160px;}
.gcd-skel .sk.w5{width:260px;}

.gcd-hl{color:var(--gcd-accent);padding:0 2px;border-radius:3px;box-shadow:0 0 0 1px rgba(207,111,96,.80) inset;background:rgba(207,111,96,.10);}
.gcd-hl-outline{padding:0 2px;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset;}

@media (max-width:820px){
  .gcd-line{grid-template-columns:54px 46px 1fr;grid-auto-rows:auto;align-items:start;}
  .gcd-meta,.gcd-translation,.gcd-examples{grid-column:3/-1;}
  .gcd-translation{margin-top:8px;}
}
