:root { --pad: 24px; }
    body{ font-family: Arial, sans-serif; background: var(--dark-bg, #111); color: var(--light-text, #e0e0e0); margin:0; padding-top:0; }
    main.project-content{ max-width: 980px; margin: 0 auto; padding: 24px 16px 64px; }
    .card{ background: var(--project-bg, #222); color: var(--light-text, #e0e0e0); border: 1px solid var(--border-color, #555);
      max-width: 980px; margin: 16px auto; padding: 20px; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,.18); }
    h2{ margin:0 0 12px; }
    .row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:8px 0; }
    .row .toggle{ font-size:14px; opacity:.9; user-select:none; }
    button.main{ padding:10px 16px; border:none; border-radius:8px; cursor:pointer; background: var(--primary-color, #00FF00); color:#000; transition: transform .05s ease; }
    button.main:active{ transform: scale(.98); }
    button.main:disabled{ opacity:.6; cursor:not-allowed; }
    #img{ width:100%; max-height:420px; object-fit:contain; display:none; border-radius:8px; border:1px solid var(--border-color, #555); background:#000; }
    .msg{ display:none; margin-top:10px; padding:10px; border-radius:8px; }
    .ok{ background:#0f3b1f; color:#aef2c7; }
    .err{ background:#3b1016; color:#ffc8d1; }
    .item{ background:#1b1b1b; border:1px solid #2b2b2b; border-radius:8px; padding:8px 10px; margin:8px 0; }
    .top{ display:flex; justify-content:space-between; font-weight:600; }
    .bar{ height:6px; border-radius:4px; background: var(--primary-color, #00FF00); margin-top:6px; }
    .loader{ display:none; border:4px solid #444; border-top:4px solid var(--primary-color,#00FF00); border-radius:50%; width:28px; height:28px; animation:spin 1s linear infinite; }
    @keyframes spin{to{transform:rotate(360deg)}}
    html[dir="rtl"] .language-row .language-switcher{ justify-content: flex-start; }
    html[dir="ltr"] .language-row .language-switcher{ justify-content: flex-end; }