.translation-hero { position: relative; overflow: hidden; }
.translation-hero::after {
  content: ""; position: absolute; inset: auto 6vw -70px auto; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,.36), transparent 65%);
}
.translation-layout { display: grid; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.translation-side { position: sticky; top: 98px; }
.translation-security-note { margin-top: 1rem; padding: .9rem; border-radius: var(--radius-sm); background: var(--bk-brand-100); color: var(--bk-brand-800); border: 1px solid var(--bk-brand-200); }
.translation-form { display: grid; gap: 1.2rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.form-field { display: grid; gap: .4rem; color: var(--bk-heading); font-weight: 600; }
.form-field--full { grid-column: 1 / -1; }
.form-control { width: 100%; border: 1px solid var(--bk-border); background: var(--bk-card); color: var(--bk-heading); border-radius: 16px; padding: .85rem 1rem; outline: none; }
.form-control:focus { border-color: var(--bk-brand-400); box-shadow: 0 0 0 4px rgba(31,122,92,.12); }
.form-field small { color: var(--bk-muted); font-weight: 400; }
.field-error, .form-errors { color: var(--bk-danger); font-size: .9rem; }
.form-actions, .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.translation-filter { display: flex; gap: .85rem; align-items: end; margin-bottom: 1.2rem; flex-wrap: wrap; }
.translation-filter label { display: grid; gap: .35rem; min-width: 190px; }
.translation-list { display: grid; gap: 1rem; }
.translation-card { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.translation-card h2 { font-size: 1.25rem; margin-bottom: .25rem; }
.translation-card__code { color: var(--bk-gold-700); font-weight: 700; margin: 0 0 .25rem; }
.translation-card__meta { display: grid; gap: .45rem; justify-items: end; color: var(--bk-muted); }
.status-pill { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; padding: .35rem .75rem; font-size: .88rem; background: var(--bk-brand-100); color: var(--bk-brand-800); border: 1px solid var(--bk-brand-200); }
.status-pill--submitted, .status-pill--under_review, .status-pill--needs_info { background: #F7EFD6; color: #94701F; border-color: #EBD9A0; }
.status-pill--in_progress, .status-pill--accepted { background: #ECF6F1; color: #0F4E3B; border-color: #CFE7DD; }
.status-pill--delivered, .status-pill--completed { background: rgba(46,158,107,.14); color: #2E9E6B; border-color: rgba(46,158,107,.24); }
.status-pill--canceled, .status-pill--rejected { background: rgba(197,69,58,.12); color: #C5453A; border-color: rgba(197,69,58,.22); }
.empty-state { text-align: center; }
.translation-detail-grid { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 1.3rem; align-items: start; }
.request-summary { position: sticky; top: 98px; }
.request-summary dl { display: grid; grid-template-columns: 1fr 1.2fr; gap: .55rem .8rem; margin: 0; }
.request-summary dt { color: var(--bk-muted); }
.request-summary dd { margin: 0; color: var(--bk-heading); font-weight: 600; }
.request-description { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--bk-border); }
.request-main { display: grid; gap: 1rem; }
.file-list { display: grid; gap: .65rem; }
.file-row { display: flex; justify-content: space-between; gap: .8rem; align-items: center; padding: .85rem 1rem; border: 1px solid var(--bk-border); border-radius: 16px; background: var(--bk-inset); }
.file-row span { color: var(--bk-heading); font-weight: 600; }
.file-row small { color: var(--bk-muted); }
.message-thread { display: grid; gap: .8rem; margin-bottom: 1rem; }
.thread-message { padding: 1rem; border: 1px solid var(--bk-border); border-radius: 18px; background: var(--bk-inset); }
.thread-message--mine { border-color: var(--bk-brand-200); background: color-mix(in srgb, var(--bk-brand-100) 48%, var(--bk-card)); }
.thread-message__head { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; color: var(--bk-muted); margin-bottom: .5rem; }
.thread-message__head strong { color: var(--bk-heading); }
.inline-file { color: var(--bk-brand-600); font-weight: 600; }
.reply-form { display: grid; gap: .8rem; }
@media (max-width: 900px) {
  .translation-layout, .translation-detail-grid { grid-template-columns: 1fr; }
  .translation-side, .request-summary { position: static; }
  .translation-card, .file-row { align-items: stretch; flex-direction: column; }
  .translation-card__meta { justify-items: start; }
  .form-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   PHASE 6 · luxury elevation (append-only override layer)
   Gold focus, gilt/hover on cards, display headings. Templates untouched.
   ===================================================================== */
.translation-hero h1 { font-family: var(--font-display); font-weight: 800; }
.form-control:focus { border-color: var(--bk-gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bk-gold) 16%, transparent); }
.translation-card, .file-row, .thread-message { transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.translation-card:hover, .file-row:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--bk-gold) 28%, var(--bk-border)); box-shadow: var(--shadow-soft); }
.translation-card h2 { font-family: var(--font-display); font-weight: 800; }
.translation-card__code { color: var(--bk-gold-700); }
html[data-theme="dark"] .translation-card__code { color: var(--bk-gold-300); }
.request-summary, .thread-message { position: relative; }

/* =====================================================================
   Specialized Translation Landing — append-only, token-based
   Keeps the previous request system intact; adds a simple Telegram CTA.
   ===================================================================== */
.translation-service-hero__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  gap:clamp(1.2rem,4vw,3rem);
  align-items:center;
}
.translation-service-hero__copy{max-width:760px;}
.translation-service-card{
  border:1px solid color-mix(in srgb,var(--bk-gold) 34%,transparent);
  border-radius:var(--radius-lg);
  padding:clamp(1.2rem,3vw,2rem);
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.055));
  box-shadow:0 24px 70px rgba(0,0,0,.20);
  display:grid;
  gap:.75rem;
}
.translation-service-card span{color:var(--bk-gold-300);font-weight:800;}
.translation-service-card strong{color:#fff;font-family:var(--font-display);font-size:clamp(1.35rem,3vw,2.1rem);line-height:1.45;}
.translation-service-card small{color:rgba(255,255,255,.78);line-height:1.85;}
.translation-service-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;}
.translation-service-step{display:grid;gap:.75rem;align-content:start;min-height:210px;}
.translation-service-step__no{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(140deg,var(--bk-brand),var(--bk-brand-700));color:var(--bk-gold-200);font-weight:800;}
.translation-service-step h3{margin:0;color:var(--bk-heading);font-size:1.1rem;}
.translation-service-step p{margin:0;color:var(--bk-body);line-height:1.9;}
.translation-service-trust{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:1rem;align-items:start;}
.translation-service-trust__main{display:grid;gap:.9rem;}
.translation-service-trust__main p{color:var(--bk-body);line-height:2;}
.translation-service-trust__side ul{margin:1rem 0 0;padding:0;list-style:none;display:grid;gap:.65rem;}
.translation-service-trust__side li{position:relative;padding-inline-start:1.1rem;color:var(--bk-body);}
.translation-service-trust__side li::before{content:"";position:absolute;inset-inline-start:0;top:.72em;width:.42rem;height:.42rem;border-radius:50%;background:var(--bk-gold);}
@media (max-width:980px){
  .translation-service-hero__grid,.translation-service-trust{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .translation-service-steps{grid-template-columns:1fr;}
}

/* ============================================================
   Translation landing — brief, luxurious, "translation" mood
   ============================================================ */
.xlt-gold{color:#E7C67C;}

/* hero */
.xlt-hero{padding-top:calc(74px + clamp(40px,5vw,68px)); padding-bottom:clamp(98px,11vw,152px);}
@media (max-width:620px){ .xlt-hero{padding-top:calc(64px + 2rem); padding-bottom:2.8rem;} }
.xlt-hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;}
@media (max-width:900px){ .xlt-hero__grid{grid-template-columns:1fr; gap:2.2rem;} }
.xlt-hero__copy{min-width:0;}
.xlt-hero h1{font-size:clamp(2rem,4.2vw,3.05rem); line-height:1.3; font-weight:800; color:#FBF6EA; margin:.2rem 0 0;}
.xlt-hero__lead{color:rgba(255,255,255,.84); line-height:2; margin:1.2rem 0 0; max-width:48ch; font-size:1.04rem;}
.xlt-hero__hook{color:var(--bk-lux-gold-a); font-weight:700; margin:.9rem 0 0; font-size:1.05rem; line-height:1.8;}
.xlt-hero__actions{display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.9rem;}

/* ---- infographic : any language -> core -> any language ---- */
.xlt-hero__art{display:flex; justify-content:center;}
.xlt-info{position:relative; display:flex; flex-direction:column; align-items:center; gap:.7rem; width:min(400px,100%); padding:.5rem .5rem;}
.xlt-info__cap{font-weight:800; font-size:1.05rem; color:var(--bk-lux-gold-a); letter-spacing:.01em;}
.xlt-info__row{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; max-width:340px;}
.xlt-info__row span{font-size:.82rem; padding:.36rem .85rem; border-radius:999px; color:#F4E3BC; white-space:nowrap;
  background:rgba(231,206,148,.1); border:1px solid rgba(231,206,148,.3); animation:xltFloat 5s ease-in-out infinite;}
.xlt-info__row--src span:nth-child(2){animation-delay:.4s} .xlt-info__row--src span:nth-child(3){animation-delay:.8s} .xlt-info__row--src span:nth-child(4){animation-delay:1.2s}
.xlt-info__row--dst span:nth-child(2){animation-delay:.6s} .xlt-info__row--dst span:nth-child(3){animation-delay:1s} .xlt-info__row--dst span:nth-child(4){animation-delay:1.4s}

.xlt-info__beam{width:2px; height:34px; border-radius:2px; position:relative; overflow:hidden;
  background:linear-gradient(to bottom,transparent,rgba(231,206,148,.25),transparent);}
.xlt-info__beam::after{content:""; position:absolute; inset-inline:-1px; height:12px; top:-12px; border-radius:2px;
  background:linear-gradient(to bottom,transparent,var(--bk-lux-gold-a)); animation:xltBeam 1.8s linear infinite;}
.xlt-info__beam--out::after{animation-delay:.9s;}

.xlt-info__core{position:relative; display:grid; place-items:center; width:116px; height:116px; border-radius:50%;
  background:radial-gradient(circle at 50% 38%,rgba(231,206,148,.28),rgba(20,70,58,.5) 70%);
  border:1px solid rgba(231,206,148,.4); box-shadow:0 0 0 6px rgba(231,206,148,.06),0 22px 50px -20px rgba(0,0,0,.7);}
.xlt-info__mark{display:flex; align-items:center; gap:.3rem; font-family:var(--font-display); font-size:1.7rem; font-weight:800; line-height:1; margin-bottom:.2rem;}
.xlt-info__mark b{color:var(--bk-lux-gold-a);}
.xlt-info__swap{font-style:normal; font-size:1.15rem; color:rgba(244,227,188,.92); animation:xltSwap 2.6s ease-in-out infinite;}
.xlt-info__core em{position:absolute; bottom:22px; font-style:normal; font-size:.72rem; letter-spacing:.16em; color:rgba(244,227,188,.82);}
.xlt-info__ring{position:absolute; inset:-9px; border-radius:50%; border:1px dashed rgba(231,206,148,.34); animation:xltSpin 18s linear infinite;}
.xlt-info__ring--2{inset:-20px; border-style:solid; border-color:rgba(231,206,148,.12); animation-duration:30s; animation-direction:reverse;}

@keyframes xltFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)}}
@keyframes xltBeam{0%{transform:translateY(0); opacity:0} 30%{opacity:1} 100%{transform:translateY(46px); opacity:0}}
@keyframes xltSpin{to{transform:rotate(360deg)}}
@keyframes xltSwap{0%,100%{transform:scale(1); opacity:.78} 50%{transform:scale(1.16); opacity:1}}
@media (prefers-reduced-motion:reduce){ .xlt-info__row span,.xlt-info__beam::after,.xlt-info__ring,.xlt-info__swap{animation:none!important} }

/* ---- three guarantees ---- */
.xlt-promise-shell{background:var(--bk-bg);}
.xlt-head{text-align:center; max-width:54ch; margin:0 auto clamp(2rem,4vw,3rem);}
.xlt-head h2{font-size:clamp(1.5rem,2.7vw,2.1rem); font-weight:800; color:var(--bk-heading); margin:.5rem 0 0;}
.xlt-head__sub{color:var(--bk-body); margin:.8rem auto 0; line-height:1.9; max-width:46ch;}
.xlt-promises{display:flex; flex-direction:column; gap:.8rem; max-width:760px; margin:0 auto;}
.xlt-promise{position:relative; display:flex; align-items:center; gap:1.2rem; padding:1.1rem 1.4rem; border-radius:var(--radius-lg); background:var(--bk-card,#fff);
  border:1px solid var(--bk-border); box-shadow:var(--shadow-soft); overflow:hidden;}
.xlt-promise::before{content:""; position:absolute; inset-block:0; inset-inline-end:0; width:3px;
  background:linear-gradient(var(--bk-lux-gold-a),var(--bk-lux-gold-c));}
.xlt-promise__ico{flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:14px; color:#fff;
  background:linear-gradient(150deg,var(--bk-emerald-a,#1d6e54),var(--bk-brand-800,#0E3F30)); box-shadow:0 12px 26px -14px rgba(14,63,48,.6);}
.xlt-promise__ico svg{width:23px; height:23px;}
.xlt-promise__body{flex:1; min-width:0;}
.xlt-promise__body h3{font-size:1.08rem; font-weight:700; color:var(--bk-heading); margin:0 0 .25rem;}
.xlt-promise__body p{color:var(--bk-body); line-height:1.7; margin:0; font-size:.9rem;}
.xlt-promise__level{flex:none; font-size:1.4rem; font-weight:800; color:color-mix(in srgb,var(--bk-gold) 26%,transparent); line-height:1; align-self:flex-start;}
@media (max-width:560px){ .xlt-promise{flex-wrap:wrap; gap:.65rem 1rem;} .xlt-promise__body{flex-basis:100%; order:3;} .xlt-promise__level{order:2; margin-inline-start:auto;} }

/* ---- final inline Telegram CTA (compact) ---- */
.xlt-final{text-align:center; margin-top:clamp(1.5rem,3vw,2.3rem);}
.xlt-final__line{color:var(--bk-body); line-height:1.8; margin:0 auto 1.1rem; max-width:50ch; font-size:.98rem;}
.xlt-final__btn{display:inline-flex; align-items:center; gap:.55rem;}
.xlt-final__btns{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; align-items:center;}

/* ---- requests page body ---- */
.page-translation-requests .translation-filter{display:grid; grid-template-columns:1fr 1fr auto; gap:1rem; align-items:end; padding:1.15rem 1.35rem;}
.page-translation-requests .translation-filter label{display:grid; gap:.4rem; min-width:0; font-size:.85rem; color:var(--bk-body);}
.page-translation-requests .translation-filter .btn{align-self:end; min-width:118px;}
@media (max-width:640px){ .page-translation-requests .translation-filter{grid-template-columns:1fr;} }

.translation-empty{text-align:center; padding:3.2rem 1.6rem; max-width:600px; margin-inline:auto;}
.translation-empty__ico{display:grid; place-items:center; width:74px; height:74px; margin:0 auto 1.4rem; border-radius:50%; color:var(--bk-brand);
  background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--bk-gold) 24%,transparent),color-mix(in srgb,var(--bk-brand) 9%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bk-gold) 32%,transparent);}
.translation-empty__ico svg{width:34px; height:34px;}
.translation-empty h2{font-size:1.35rem; font-weight:800; color:var(--bk-heading); margin:0 0 .6rem;}
.translation-empty p{color:var(--bk-body); line-height:1.9; margin:0 auto; max-width:46ch;}
.translation-empty__actions{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:1.7rem;}

/* ============================================================================
   v15 · translation hero — multilingual glyph texture (the translation concept)
   a faint wall of letters from many world scripts (Latin/Persian/CJK/Cyrillic…)
   ============================================================================ */
.xlt-hero__glyphs{
  position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  opacity:.5;
  -webkit-mask-image:linear-gradient(to right, #000 0%, #000 42%, rgba(0,0,0,.22) 100%);
          mask-image:linear-gradient(to right, #000 0%, #000 42%, rgba(0,0,0,.22) 100%);
}

/* ============================================================================
   v17 · harmonize the translation hero height with the library hero
   (grid min-height + vertical centering on desktop → a little taller than library)
   ============================================================================ */
@media (min-width:901px){
  .xlt-hero__grid{ min-height:432px; align-content:center; }
}