/* =====================================================================
   التصميم المعتمد للموقع — مشترك بين الرئيسية وكل صفحات الأدوات
   لا تُكرَّر هذه القواعد داخل الصفحات. أي تعديل هنا ينعكس على الكل.
   ===================================================================== */
:root{
  --bg:#090d18; --bg2:#0d1322; --card:#0f1626; --card-h:#131b2f; --line:#1c2538; --line2:#27324b;
  --tx:#e8ebf4; --mut:#8c96ad; --dim:#5f6a82;
  --acc:#ff6a1a; --acc2:#ff9a3d; --acc-ink:#1a0b00;
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171; --info:#60a5fa;
  --r:14px; --shadow:0 10px 30px -12px rgba(0,0,0,.6);
  --f-ar:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif;
  --f-en:'Inter','IBM Plex Sans Arabic',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
:root[data-theme="light"]{
  --bg:#f6f7fb; --bg2:#eef0f7; --card:#ffffff; --card-h:#fffaf6; --line:#e2e6f0; --line2:#d3d9e8;
  --tx:#12172a; --mut:#53607c; --dim:#7a86a1; --acc:#e8550a; --acc2:#f37a1f; --acc-ink:#fff;
  --ok:#059669; --warn:#b45309; --bad:#dc2626; --info:#2563eb;
  --shadow:0 10px 30px -14px rgba(20,30,60,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:132px}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--f-ar);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html[lang="en"] body{font-family:var(--f-en)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:8px}
.wrap{width:min(1200px,100% - 32px);margin-inline:auto}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--acc);color:var(--acc-ink);padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{top:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
kbd{font-family:var(--f-mono);font-size:.72rem;border:1px solid var(--line2);border-bottom-width:2px;border-radius:6px;padding:1px 6px;color:var(--mut);background:var(--bg2)}

/* إخفاء المحتوى حسب اللغة داخل صفحات الأدوات: <span data-l="ar">..</span> <span data-l="en">..</span> */
html[lang="ar"] [data-l="en"],html[lang="en"] [data-l="ar"]{display:none!important}

/* ---------- الهيدر / النافبار ---------- */
/* الحاوية هي الثابتة (sticky) لأن containing block للعنصر .nav هو الحاوية نفسها فقط، فلا يثبت داخلها */
#site-header{position:sticky;top:0;z-index:60}
.nav{position:relative;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:14px;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.1rem;letter-spacing:-.01em;font-family:var(--f-en)}
.brand svg{width:32px;height:32px;flex:none}
/* الشعار المعتمد (wordmark): أبيض في الدارك، داكن في الفاتح — من assets/brand/ */
.brand svg.wordmark{width:auto;height:20px}
.brand svg.wordmark path{fill:#fff}
:root[data-theme="light"] .brand svg.wordmark path{fill:#0B0D10}
.brand-sub{font-family:var(--f-en);font-weight:600;font-size:.95rem;color:var(--acc);letter-spacing:.01em;padding-inline-start:10px;border-inline-start:1px solid var(--line2)}
.links{display:flex;gap:4px;margin-inline-start:18px}
.links a{padding:8px 12px;border-radius:9px;color:var(--mut);font-size:.92rem;font-weight:500}
.links a:hover,.links a[aria-current="page"]{color:var(--tx);background:var(--card)}
.sp{flex:1}
.ibtn{height:38px;min-width:38px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:10px;background:var(--card);font-size:.85rem;font-weight:600}
.ibtn:hover{border-color:var(--line2)}
.cta{background:var(--acc);color:var(--acc-ink);border:0;height:38px;padding:0 16px;border-radius:10px;font-weight:700;font-size:.9rem;display:inline-flex;align-items:center}
.cta:hover{filter:brightness(1.08)}

/* ---------- البريدكرامب ---------- */
.crumbs{padding:18px 0 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:.84rem;color:var(--mut)}
.crumbs li{display:inline-flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"";width:6px;height:6px;border-top:1.5px solid var(--dim);border-inline-end:1.5px solid var(--dim);transform:rotate(45deg)}
html[dir="rtl"] .crumbs li+li::before{transform:rotate(-135deg)}
.crumbs a:hover{color:var(--acc2)}
.crumbs [aria-current="page"]{color:var(--tx);font-weight:600}

/* ---------- البطاقة والشبكة (تُستخدم في الرئيسية و"أدوات ذات صلة") ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.card{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--r);border:1px solid var(--line);background:var(--card);transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}
.card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c,var(--acc)) 55%,var(--line));background:var(--card-h);box-shadow:var(--shadow)}
.card .top{display:flex;align-items:center;gap:11px}
.ic{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;font-size:1.25rem;background:color-mix(in srgb,var(--c,var(--acc)) 15%,transparent)}
.card h3{margin:0;font-size:.97rem;font-weight:700;line-height:1.35}
.card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card p{margin:0;color:var(--mut);font-size:.85rem;line-height:1.55;flex:1}
.meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tag{display:inline-block;font-size:.7rem;font-weight:700;padding:2px 9px;border-radius:99px;border:1px solid var(--line2);color:var(--mut);font-family:var(--f-en)}
.tag.A{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 8%,transparent)}
.tag.B{color:var(--info);border-color:color-mix(in srgb,var(--info) 40%,transparent)}
.tag.C{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.tag.ML{color:#c084fc;border-color:color-mix(in srgb,#c084fc 40%,transparent)}
.star{position:relative;z-index:2;width:30px;height:30px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--dim);display:grid;place-items:center;margin-inline-start:auto;flex:none}
.star:hover{background:var(--bg2);color:var(--acc2)}
.star[aria-pressed="true"]{color:var(--acc2)}
.star svg{width:17px;height:17px}

/* ---------- مكوّنات صفحة الأداة ---------- */
.page-head{padding:18px 0 8px}
.page-head h1{font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.25;margin:12px 0 8px;font-weight:800;letter-spacing:-.015em}
.page-head .lead{color:var(--mut);max-width:70ch;margin:0;font-size:1.02rem}
.page-head .badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.workspace{margin-top:22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,var(--card),var(--bg2));padding:clamp(16px,2.6vw,26px)}
.workspace>h2{margin:0 0 14px;font-size:1rem;color:var(--mut);font-weight:600}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:6px;margin-bottom:14px}
.field>label,.label{font-size:.85rem;font-weight:600;color:var(--mut)}
.field .hint{font-size:.78rem;color:var(--dim)}
/* حقول الإدخال: القاعدة تشمل الحقول بلا type وكل الأنواع النصية، فلا يظهر أي حقل بتنسيق المتصفح الافتراضي (أبيض).
   أي حقل جديد في أي أداة يرث هذا التنسيق تلقائيًا؛ ولا تُكرّر هذه القواعد داخل صفحات الأدوات. */
input:not([type]),
input[type=text],input[type=search],input[type=number],input[type=url],input[type=email],input[type=password],
input[type=tel],input[type=date],input[type=time],input[type=datetime-local],
select,textarea{
  width:100%;border:1px solid var(--line2);border-radius:11px;background-color:var(--bg);color:var(--tx);font:inherit;font-size:.95rem;padding:10px 12px;
  -webkit-appearance:none;appearance:none;color-scheme:dark}
:root[data-theme="light"] input:not([type]),:root[data-theme="light"] input[type=text],:root[data-theme="light"] input[type=search],
:root[data-theme="light"] input[type=number],:root[data-theme="light"] input[type=url],:root[data-theme="light"] input[type=email],
:root[data-theme="light"] input[type=password],:root[data-theme="light"] input[type=tel],:root[data-theme="light"] input[type=date],
:root[data-theme="light"] input[type=time],:root[data-theme="light"] input[type=datetime-local],
:root[data-theme="light"] select,:root[data-theme="light"] textarea{color-scheme:light}
select{padding-inline-end:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238c96ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px}
html[dir="rtl"] select{background-position:left 12px center}
select option{background:var(--card);color:var(--tx)}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{opacity:.5}
::placeholder{color:var(--dim);opacity:1}
input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}
input:-webkit-autofill{-webkit-text-fill-color:var(--tx);box-shadow:0 0 0 100px var(--bg) inset}
input[type=checkbox],input[type=radio]{accent-color:var(--acc)}
textarea{min-height:180px;resize:vertical;line-height:1.55}
textarea.mono,input.mono,.mono{font-family:var(--f-mono);font-size:.88rem}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:11px;border:1px solid var(--line2);background:var(--card);font-weight:700;font-size:.92rem}
.btn:hover{border-color:var(--acc)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.result{margin-top:18px;border:1px solid var(--line);border-radius:14px;background:var(--bg);padding:16px}
.result[hidden]{display:none}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.kpi{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:12px 14px}
.kpi b{display:block;font-size:1.35rem;font-family:var(--f-en);line-height:1.2}
.kpi span{font-size:.78rem;color:var(--mut)}
.pill-ok,.pill-warn,.pill-bad{display:inline-block;font-size:.75rem;font-weight:700;padding:2px 10px;border-radius:99px}
.pill-ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.pill-warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.pill-bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent)}
.prose{margin-top:34px}
.prose h2{font-size:1.35rem;margin:0 0 10px;letter-spacing:-.01em}
.prose h3{font-size:1.05rem;margin:22px 0 8px}
.prose p,.prose li{color:var(--mut);line-height:1.9}
.prose b{color:var(--tx);font-weight:600}
.legal{max-width:none}
/* الشاشات العريضة: عمودان لتقصير السطر وملء العرض (يتحوّل لعمود واحد دون 1000px) */
@media (min-width:1000px){
  .legal>[data-l]{column-count:2;column-gap:56px;column-rule:1px solid var(--line)}
  .legal h2,.legal h3{break-after:avoid}
  .legal h2:first-child{margin-top:0}
  .legal li,.legal .toc,.legal details{break-inside:avoid}
  .legal p{orphans:3;widows:3}
  .legal .legal-tbl-wrap,.legal .guide-list{column-span:all}
}
.legal h2{margin-top:30px;padding-top:6px}
.legal ul,.legal ol{padding-inline-start:22px}
.legal .meta{color:var(--dim);font-size:.85rem;margin:6px 0 0}
.legal .toc{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:12px 18px;margin:18px 0}
.legal .toc ol{margin:6px 0 0}
.legal .toc a{color:var(--acc2)}
.legal-tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin:14px 0}
.legal-tbl{width:100%;border-collapse:collapse;font-size:.9rem;min-width:560px}
.legal-tbl th{text-align:start;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);padding:9px 12px;border-bottom:1px solid var(--line);background:var(--bg2)}
.legal-tbl td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--mut)}
.legal-tbl tr:last-child td{border-bottom:0}
.legal-tbl code{white-space:nowrap}
.guide-list{display:grid;gap:14px;margin-top:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.guide-card{display:block;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:16px 18px}
.guide-card:hover{border-color:var(--acc)}
.guide-card h3{margin:0 0 6px;font-size:1.05rem}
.guide-card p{margin:0;color:var(--mut);font-size:.9rem}
.prose code{font-family:var(--f-mono);font-size:.85em;background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--tx)}
.notice{margin-top:18px;border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line));background:color-mix(in srgb,var(--warn) 7%,transparent);border-radius:12px;padding:14px 16px;font-size:.9rem;color:var(--mut)}
.notice b{color:var(--tx)}
.related{margin-top:44px}
.related h2{font-size:1.2rem;margin:0 0 14px}
details{border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--bg) 55%,var(--card));margin-bottom:10px}
summary{padding:15px 18px;cursor:pointer;font-weight:600;color:var(--tx);list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--acc2);font-size:1.3rem;line-height:1}
details[open] summary::after{content:"−"}
details p{margin:0;padding:0 18px 16px;color:var(--mut)}

/* ---------- الفوتر ---------- */
footer.site-footer{margin-top:70px;border-top:1px solid var(--line);background:var(--bg2);padding:38px 0 26px}
.ft-top p{color:var(--mut);font-size:.9rem;max-width:52ch;margin:12px 0}
.ft-top .ft-mail{margin:-4px 0 14px}
.ft-top .ft-mail a{color:var(--acc2);font-weight:600;direction:ltr;unicode-bidi:isolate;display:inline-block}
.ft-top .ft-mail a:hover{text-decoration:underline}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.ft-top .badges span{font-size:.75rem;font-weight:600;padding:3px 11px;border-radius:7px;border:1px solid var(--line2);color:var(--mut);background:var(--card)}
.ft-top .badges span:nth-child(1){color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.ft-top .badges span:nth-child(2){color:var(--info);border-color:color-mix(in srgb,var(--info) 40%,transparent)}
.ft-top .badges span:nth-child(3){color:#c084fc;border-color:color-mix(in srgb,#c084fc 40%,transparent)}
.ft-top .badges span:nth-child(4){color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.ft-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px;margin-top:30px}
.site-footer h4{margin:0 0 12px;font-size:.74rem;color:var(--tx);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.88rem;color:var(--mut)}
.site-footer ul a:hover{color:var(--acc2)}
.copy{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);color:var(--dim);font-size:.8rem;display:flex;flex-direction:column;gap:4px}

.ibtn.menu{display:none}
@media (max-width:980px){
  .links{display:none}.two{grid-template-columns:1fr}
  .ibtn.menu{display:inline-flex}
  .nav.open .links{display:flex;flex-direction:column;gap:2px;position:absolute;top:100%;inset-inline:0;margin:0;padding:10px 16px 14px;
    background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -20px rgba(0,0,0,.6)}
  .nav.open .links a{padding:13px 14px;font-size:1rem}
}
@media (max-width:560px){.cta{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- زر العودة إلى الأعلى ---------- */
.to-top{position:fixed;inset-inline-end:max(22px,env(safe-area-inset-right));bottom:max(28px,calc(env(safe-area-inset-bottom) + 24px));z-index:70;
  width:52px;height:52px;border-radius:50%;border:1px solid var(--line2);background:color-mix(in srgb,var(--card) 92%,transparent);color:var(--tx);
  display:grid;place-items:center;padding:0;box-shadow:var(--shadow);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .25s,transform .25s,visibility .25s,border-color .2s,background .2s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{border-color:var(--acc);transform:translateY(-3px)}
.to-top .ring{position:absolute;inset:2px;width:48px;height:48px;rotate:-90deg}
.to-top .ring circle{fill:none;stroke-width:2.5}
.to-top .ring .trk{stroke:var(--line2)}
.to-top .ring .bar{stroke:var(--acc);stroke-linecap:round;transition:stroke-dashoffset .1s linear}
.to-top .arr{width:20px;height:20px;position:relative}
@media (max-width:560px){.to-top{width:46px;height:46px;inset-inline-end:16px;bottom:max(22px,calc(env(safe-area-inset-bottom) + 18px))}.to-top .ring{width:42px;height:42px}}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}}

/* ---------- عدّة أدوات مشتركة (tl-) ---------- */
.tl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.tl-opts{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:12px;font-size:.88rem;color:var(--mut)}
.tl-opts label{display:flex;align-items:center;gap:8px}
.tl-opts input[type=checkbox]{width:17px;height:17px;accent-color:var(--acc)}
.tl-opts select{width:auto;padding:6px 10px;font-size:.85rem}
.tl-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.tl-h{margin:22px 0 6px;font-size:1rem}
.tl-code{border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:12px 14px;font-family:var(--f-mono);font-size:.84rem;line-height:1.75;
  direction:ltr;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--tx);min-height:46px}
.tl-msgs{display:grid;gap:8px;margin-top:14px}
.tl-msg{border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:.88rem;color:var(--tx);overflow-wrap:anywhere}
.tl-msg.ok{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.tl-msg.warn{border-color:color-mix(in srgb,var(--warn) 50%,var(--line))}
.tl-msg.bad{border-color:color-mix(in srgb,var(--bad) 50%,var(--line));background:color-mix(in srgb,var(--bad) 7%,transparent)}
.tl-tblw{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin-top:10px}
.tl-tbl{width:100%;border-collapse:collapse;font-size:.86rem;min-width:520px}
.tl-tbl th{font-size:.7rem;text-transform:uppercase;color:var(--mut);text-align:start;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--bg2)}
.tl-tbl td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.tl-tbl tr:last-child td{border-bottom:0}
.tl-tbl td.m{font-family:var(--f-mono);font-size:.8rem;direction:ltr;text-align:start}
.tl-pill{display:inline-block;font-size:.72rem;font-weight:800;padding:2px 10px;border-radius:99px;border:1px solid var(--line2);font-family:var(--f-en)}
.tl-pill.pass{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.tl-pill.fail{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.tl-pill.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}

/* ---------- آخر المقالات ---------- */
.latest{padding:44px 0 6px}
.latest-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.latest-head h2{margin:0;font-size:clamp(1.3rem,2.4vw,1.7rem);letter-spacing:-.01em}
.latest-head p{margin:4px 0 0;color:var(--mut);font-size:.92rem}
.latest-all{font-weight:700;font-size:.9rem;color:var(--acc2);white-space:nowrap}
.latest-all:hover{text-decoration:underline}
.latest-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.lp-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--card),var(--bg2));overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
.lp-card:hover{transform:translateY(-4px);border-color:var(--acc);box-shadow:0 18px 40px -22px color-mix(in srgb,var(--acc) 55%,transparent)}
.lp-img{aspect-ratio:16/9;display:grid;place-items:center;font-size:2.4rem;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 28%,var(--bg2)),var(--bg2));overflow:hidden}
.lp-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.lp-card:hover .lp-img img{transform:scale(1.04)}
.lp-b{display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px;flex:1}
.lp-sec{font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--acc2);display:flex;gap:8px;align-items:center}
.lp-same{display:none}
.lp-lang{font-family:var(--f-en);font-size:.65rem;border:1px solid var(--line2);border-radius:99px;padding:0 6px;color:var(--mut)}
.lp-t{font-weight:700;font-size:1.04rem;line-height:1.45;color:var(--tx)}
.lp-d{color:var(--mut);font-size:.9rem;line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lp-m{margin-top:auto;color:var(--dim);font-size:.78rem}
.latest:not(.latest-home){padding-top:34px}
.latest:not(.latest-home) .lp-img{aspect-ratio:21/9}
.latest-home{padding-top:46px}
@media (max-width:560px){.latest-head{align-items:flex-start}.latest-grid{grid-template-columns:1fr}}