@font-face {
   font-family: 'RB';
   src: url('assets/fonts/RB%20Light.ttf') format('truetype');
   font-weight: 300;
   font-style: normal;
 }

 @font-face {
   font-family: 'RB';
   src: url('assets/fonts/RB%20Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
 }

 @font-face {
   font-family: 'RB';
   src: url('assets/fonts/RB%20Bold.ttf') format('truetype');
   font-weight: 700;
   font-style: normal;
 }

 :root {
   --bg: #f6f8fb;
   --card: #ffffff;
   --accent-start: #1E75BC;
   --accent-end: #155a8e;
   --muted: #6b7280;
   --accent-text: #ffffff;
   --container-width: 920px;
   --radius: 14px;
   --shadow: 0 6px 24px rgba(12, 17, 30, 0.08);
 }

 * {
   box-sizing: border-box
 }


 html {
   height: 100%;
   margin: 0;
   background: var(--bg);
   color: #0b1220
 }

 body {
   margin: 0;
   font-family: 'RB', sans-serif;
   background: var(--bg);
   color: var(--text);
   min-height: 100vh;
   align-items: center;
   padding: 20px 20px 5px 20px;
 }

 a {
   color: inherit
 }

 .wrap {
   max-width: var(--container-width);
   margin: 0 auto;
   width: 100%;
 }

 .header {
   display: flex;
   align-items: center;
   gap: 16px;
   background: linear-gradient(90deg, var(--accent-start), var(--accent-end));
   padding: 18px;
   border-radius: 18px;
   color: var(--accent-text);
   box-shadow: var(--shadow);
 }

 .app-icon {
   width: 64px;
   height: 64px;
   border-radius: 12px;
   background: #fff;
   flex: 0 0 64px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden
 }

 .app-icon img {
   padding: 3px;
   width: 100%;
   height: 100%;
   object-fit: contain
 }

 .title {
   display: flex;
   flex-direction: column
 }

 .title h1 {
   margin: 0;
   font-size: 20px;
   letter-spacing: 0.2px
 }

 .title p {
   margin: 2px 0 0;
   font-size: 13px;
   opacity: 0.95
 }

 .card {
   background: var(--card);
   border-radius: var(--radius);
   padding: 22px;
   margin-top: 18px;
   box-shadow: var(--shadow)
 }

 .meta {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 12px;
   color: var(--muted);
   font-size: 13px;
   margin-bottom: 6px
 }

 .lang-switch {
   display: flex;
   gap: 5px;
   align-items: center
 }

 .lang-switch a {
   padding: 6px 12px;
   border-radius: 8px;
   text-decoration: none;
   background: var(--accent-start);
   color: #fff;
   font-size: 13px;
   transition: background 0.2s
 }

 .lang-switch a:hover {
   background: var(--accent-end)
 }

 .section {
   margin: 18px 0
 }

 .section h2 {
   margin: 0 0 8px;
   font-size: 18px;
   color: #1E75BC
 }

 .section p,
 .section ul {
   margin: 0;
   font-size: 15px;
   color: #14202b;
   line-height: 1.7
 }

 ul {
   padding-inline-start: 20px
 }

 li {
   margin: 8px 0
 }

 footer {
   margin-top: 20px;
   text-align: center;
   color: #888;
   font-size: 14px;
 }

 li>a,
 strong>a {
   color: #000;
   text-decoration: none;
   transition: color 0.3s ease;
 }

 li>a:hover,
 strong>a:hover {
   text-decoration: underline;
   color: #0077cc;
 }

 .ltr-text {
   direction: ltr;
   unicode-bidi: embed;
 }


 /* Responsive */
 @media (max-width:720px) {
   .wrap {
     padding: 16px
   }

   .header {
     padding: 14px
   }

   .title h1 {
     font-size: 18px
   }
 }