/* =====================================================================
   Design tokens - the ONE place the palette is defined.

   Every value below is byte-identical to the hardcoded hex that used to
   be scattered ~300 times across style.css and the page <style> blocks,
   so introducing these changed nothing visually. Change a colour here
   and it changes everywhere; never hardcode a hex in a page again.
   ===================================================================== */
:root {
    /* accent - the single brand blue */
    --accent:            #1b75bd;   /* buttons, links, active borders     */
    --accent-hover:      #18619c;   /* :hover state of accent surfaces    */
    --accent-soft:       #58a6ff;   /* light-blue text on dark, code links*/

    /* surfaces, darkest -> lightest */
    --bg-page:           #1d1d1d;   /* body background                    */
    --bg-page-deep:      #191919;   /* gradient end, deeper section bg    */
    --bg-panel:          #171717;   /* footer, cards, sidebars            */
    --bg-inset:          #101010;   /* code shells, wells                 */
    --bg-inset-alt:      #121212;   /* walkthrough cards                  */
    --bg-inset-soft:     #131313;
    --bg-elevated:       #232325;   /* raised chips / dropdowns           */
    --bg-hover:          #2b2b2b;

    /* borders / dividers */
    --border:            #323234;   /* default 1px border everywhere      */
    --border-soft:       #2a2a2a;   /* subtle dividers                    */
    --border-code:       #2d2f34;   /* code / walkthrough card borders    */
    --border-strong:     #3a3a3d;

    /* text */
    --text:              #ffffff;
    --text-muted:        #b8c3cf;   /* secondary copy                     */
    --text-dim:          #a7b3bf;
    --text-faint:        #9fb0c3;
    --text-on-light:     #e8edf3;
    --text-code:         #edf2f7;

    /* status */
    --danger:            #902828;   /* destructive buttons                */
    --danger-bright:     #ef5350;   /* error text                         */
    --success:           #30c076;   /* the green already used on pricing checkmarks; done-states */
    --warning:           #d29922;   /* tentative / needs-attention states (FORGE tentative match) */

    /* typography */
    --font:              Arial, sans-serif;
    --font-mono:         Consolas, Menlo, monospace;

    /* overlays (dialogs, toasts) */
    --overlay:           rgba(0,0,0,.6);        /* dimmed page behind a dialog     */
    --shadow-pop:        0 10px 30px rgba(0,0,0,.5);
}

*{
    color:white;
    box-sizing: border-box;
}
body,html{
    scroll-behavior: smooth;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--bg-page);
}
html {
    scroll-behavior: smooth;
}
header{
    height: 59px;
}



.foot {
    width: 100%;
    margin-top: 30px;
    font-family: sans-serif,Arial;
    background: var(--bg-panel);
}
.foot .foot_row{
    display: flex;
    flex-direction: row;
}
.foot .foot_row .foot_logo img{
    margin-top: 25px;
    margin-left: 20px;
    width: 85px;
    height: 100px;
}
.foot .foot_row_detail{
    flex-wrap: wrap;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
.foot .foot_row_detail_column img{
    width: 45px;
    height: 45px;
}
.foot li, .foot a {
    list-style-type: none;
    text-decoration: none;
}

@media screen and (max-width: 80px) {
    .topnav .index_search_box {
        display: none;
    }
    .topnav .index_search_box_button{
        display: block;
    }
}

/* On small screens: hide "DecompilerAI" text, keep logo + buttons */
@media (max-width: 640px) {
  /* hide the middle title text */
  #site-title {
    display: none;
  }

  /* tighten padding a bit on mobile (optional) */
  .topnav {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* let logo + button groups use space more freely */
  .topnav .topnavitem {
    max-width: none;
  }
}


.profile_button{
    display: flex;
    justify-content: center;
}
.profile_avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
}
.profile_avatar:hover{
    border: var(--accent) solid 2px;
}





/* === Modal (Cancel Subscription) === */
.modal_overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: grid;              /* centrally align card */
  place-items: center;
  z-index: 9999;
}

/* ensure the HTML hidden attr actually hides it */
.modal_overlay[hidden] {
  display: none !important;
}




.modal_card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: min(680px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  overflow: hidden;
  font-family: Arial, sans-serif;
}

.modal_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  padding: 12px 14px;
}
.modal_head h3 {
  margin: 0;
  font-size: 18px;
  color: #fff;
}

.modal_close {
  background: transparent;
  color: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  line-height: 1;
}
.modal_close:hover { border-color: var(--accent); }
.modal_close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.modal_body { padding: 14px; color: #ddd; }
.modal_body p, .modal_body li { color: #ccc; }

.modal_scroll {
  max-height: 46vh;
  overflow: auto;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px;
}

/* optional nicer scrollbar */
.modal_scroll::-webkit-scrollbar { width: 10px; }
.modal_scroll::-webkit-scrollbar-track { background: #1a1a1a; }
.modal_scroll::-webkit-scrollbar-thumb { background: #2d2d2f; border-radius: 8px; }
.modal_scroll::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

.modal_status {
  margin-top: 10px;
  min-height: 20px;
  font-size: 14px;
  color: #a8d1ff;
  opacity: 0.95;
}

.modal_actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
}

/* Buttons (match site theme) */
.btn_primary, .btn_secondary {
  padding: 10px 14px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--border);
  font-weight: 600;
  font-family: inherit;
}

.btn_primary {
  background: var(--accent);
  color: #fff;
}
.btn_primary:hover { background: var(--accent-hover); }
.btn_primary:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}

.btn_secondary {
  background: var(--border);
  color: #fff;
}
.btn_secondary:hover { border-color: var(--accent); }
.btn_secondary:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}


.icon_button,
.login_window button {
    border-radius: 6px;
}


.icon_button {
    display: flex;
    padding: 8px 10px;
    background: var(--bg-page);
    justify-content: center;
    margin-left: 10px;
    white-space: nowrap;
    border: 1px solid var(--border);
    font-size: 16px;
    text-decoration: none;
}
.icon_button img{
    margin-right: 3px;
    width: 20px;
    height: 20px;
}
.icon_button span {
    line-height: 22px;
}


.icon_button:hover{
    opacity: 0.9;
}

.topnav{
    padding-right: 20px; /* adjust until it looks right */
    padding-left: 20px; /* adjust until it looks right */
    overflow-y: auto;
    scrollbar-width:thin;
    z-index: 2;
    position:fixed;
    width: 100%;
    display:flex;
    justify-content: space-between;
    font-family: Arial;
    background: var(--bg-panel);
}
.topnav .topnav_logo{
    display: flex;
    margin: 4px 0;
    background: var(--bg-panel);
    padding: 3px 3px;
    width: 120px;
    height: 60px;
}


.topnav .topnavitem{
    margin: 0 5px;
    display: inline-flex;
    align-items: center;
    max-width: 60%;
    white-space: nowrap; 
}
.topnav .topnavitem .index_search_box_button{
    display: block;
    visibility: hidden;
    background: var(--bg-page);
}
.seperated_text {
    font-family: Arial, sans-serif;
    font-size: 25px;
    margin: 10px 0;
}

.topnavitem svg{
    width: 18px;
    height: 18px;
    pointer-events: none;
    opacity: 0.4;
}

.topnav #site-title {
    font-family: 'Open Sans', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;



    font-weight: bold;
    font-size: 22px;
    letter-spacing: 0.5px;
    font-variant: small-caps;
    color: white;
}




.index_search_box{ /*Surrounding of input*/
    display: flex;
    width: 800px;
    padding: 5px 6px;
    border-radius: 2px;
    background: var(--bg-page);
    border:solid 2px var(--border);
}
.index_search_box:hover{
    border:solid 2px var(--accent);
}
.index_search_box svg {
  fill: white;                    /* Make SVG icon white */
  width: 24px;
  height: 24px;
  margin-right: 8px;
}




.searchbox{
    background: var(--bg-page);
    outline: none;
    -webkit-appearance: none;
    border: none;
    width: 100%;
    padding: 0 4px;
    font-family: Arial, sans-serif, Georgia;
    font-size: 17px;
}
.input_box{
    background: var(--border);
    outline: none;
    -webkit-appearance: none;
    border: 2px solid transparent;
    width: 100%;
    padding: 0 4px;
    font-family: Arial, sans-serif, Georgia;
    font-size: 17px;
}
.input_box_missing{
    color: red;
    font-size: 11px;
}
.insert_github_box{
    background: var(--bg-panel);
    width: 100%;
    outline: none;
    -webkit-appearance: none;
    border: none;
    padding: 0 4px;
    font-family: Arial, sans-serif, Georgia;
    font-size: 20px;
}
.content {
    margin-top: 20px;
    flex: 1;
}
.page{
    display: none;
    flex-direction: column;
    min-height: 100%;
    border-radius: 3px;
    font-family: Arial, sans-serif;
}
.page .projects_bar .project_header{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}
.page .projects_bar .project_header .project_header_element{
    border: 1px solid black;
    flex-direction: row;
    cursor: pointer;
    padding: 10px 10px;
    border-radius: 1px;
    background: var(--border);
}
.page .projects{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    grid-gap: 10px;
}
.page .project{
    overflow-wrap: break-word;
    scrollbar-width:thin;
    position: relative;
    display: grid;
    border: 2px solid var(--bg-page);
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 20px;
    width: 350px;
    height: 380px;
    background: var(--border);
    text-align: left;
    padding:7px;
    border-radius: 2px;
}
.page .project:hover{
    border: 2px solid var(--accent);
}
.page .project .project_thumbnail{
    grid-column: 1/2;
    grid-row:1;
    border-radius: 2px;
    background: #cccccc;
    width:200px;
    height:200px;
}
.page .project_detail{
    grid-row: 2/3;
    grid-column: 1/4;
}
.page .project_detail h3{
    font-size: 20px;
    margin: 8px 0;
}
.page .project_detail p{
    overflow-wrap: break-word;
    font-family: Arial, sans-serif;
    font-size: 17px;
    margin:3px 0;
    opacity: 0.7;
}
.page .project_price{
    position: absolute;
    white-space: nowrap;
    padding: 10px 10px;
    background: var(--accent);
    color: white;
    font-size: 27px;
    cursor: pointer;
    border-radius: 3px;
}
.page .project_minor {
    grid-row: 1;
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    opacity: 0.8;
}

.page .project_minor_left{
    margin-left: 10px;
    grid-column: 1;
}
.page .project_minor_right{
    margin-left: 10px;
    grid-column: 2;
}
.page .project_minor_left img{
    width: 16px;
    height: 16px;
}


.login {
    margin: 10px;
    display: flex;
    justify-content: center;
}
.login_window{
    border: 1px solid var(--accent);
    position: relative;
    display: flex;
    flex-direction: column;
    width: 400px;
    text-align: left;
    padding: 25px;
    border-radius: 2px;
    background: var(--bg-panel);
    font-size: 17px;
}
.login_window .login_symbol_top_right{
    position: absolute;
    top:5px;
    right: 15px;
    width: 25px;
    height: 25px;
}



.login_window input {
    font-size: 17px;
    padding: 2px 5px;
    margin-bottom: 5px; /* spacing below each input */
    width: 100%;
}
.login_window button{
    width: 100%;
    background: var(--accent);
    border:none;
    border-radius: 4px;
    color: white;
    height: 30px;
    margin: 1% 0% 1% 0%;
}
.login_window button:hover{
    background: var(--accent-hover);
}
.login_window .forgot_password{
    font-size: 14px;
    opacity: 0.7;
}

.login_window label{
    opacity: 0.7;
    
    margin-top: 3px; /* spacing above each label */
    margin-bottom: 2px; /* spacing below label */
}
.login_window p{
    font-size: 22px;
}
#my-signin2 {
  display: flex;
  justify-content: center;
}

.company {
    padding: 10px;
}
.company .company_window {
    border: 2px solid var(--accent);
    padding: 5px 40px;
    border-radius: 2px;
    background: var(--bg-panel);
    font-family: Arial, sans-serif;
}


.upload {
    background: var(--bg-page);
    padding: 0px 100px;
}
.upload_step {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    border-bottom: var(--bg-hover) 1px solid;
    background: var(--bg-panel);
    padding: 10px 20px;
    font-family: Arial, sans-serif;
}
.upload_step button{
    background: var(--accent);
    border: none;
    border-radius: 4px;
    width: 200px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    height: 45px;
}

.upload_step button:hover{

    background: #1868a8;
}
.upload_step_number{
    overflow: hidden;           /* hides anything overflowing */
    display: flex;              /* allow control of children */
    margin: 20px 0;
    font-size: 22px;
}
.upload_step_number span {

    padding: 5px 20px;
    border-radius: 2px;
    white-space: nowrap;
}
.upload_step_detail input[type="checkbox"] {
    height: 15px;
    width: 15px;
}
.dropContainer{
    position: relative;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    font-family: Arial, sans-serif;
    border:4px dashed var(--border);
    height:200px;
}
#fileInput{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.upload_index_search_box{
    margin-bottom: 10px;
    display: flex;
    width: 100%;
    padding: 5px 6px;
    border-radius: 2px;
    border:solid 2px #454545;
}
.upload_index_search_box:hover{
    border:solid 2px var(--accent);
}
.upload_insert_github_box{
    background: var(--bg-panel);
    width: 100%;
    resize: vertical;
    outline: none;
    -webkit-appearance: none;
    border: none;
    padding: 0 4px;
    font-family: Arial, sans-serif, Georgia;
    font-size: 20px;
}


/* /upload progress under the drop zone (upload.js setProgress): a slim track + %, indeterminate while the server hashes / preanalyses */
.upload-progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; max-width: 100%; }
.upload-progress[hidden] { display: none; }
.upload-progress-track { flex: 1 1 auto; min-width: 0; height: 6px; border-radius: 999px; background: var(--border-soft); overflow: hidden; }
.upload-progress-bar { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width .15s linear; }
.upload-progress-txt { flex: 0 0 auto; min-width: 4ch; text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.upload-progress.is-processing .upload-progress-bar { width: 40%; animation: upload-progress-indet 1.2s ease-in-out infinite; }
@keyframes upload-progress-indet { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .upload-progress-bar { transition: none; } .upload-progress.is-processing .upload-progress-bar { animation: none; width: 100%; opacity: .6; } }

.upload_step.collapsed .upload_step_detail,
.upload_step.collapsed .dropContainer {
    display: none;
}

/* optional visual hint */
.upload_step.collapsed .upload_step_number span::after {
    content: " ▼";
    font-size: 14px;
}





.split-hero {
  width: 100%;
  height: 40vh;
  display: flex;
  overflow: hidden;

}

/* shared panel behaviour */
.split-hero .panel{
  flex: 1 1 50%;         /* each panel gets half the width              */
  position: relative;

}

.split-hero .panel img{
  width: 100%;
  height: 100%;
  object-fit: cover;     /* fill the panel, cropping if necessary       */
  object-position: center top;  /* or left, right, bottom etc. */
  display: block;
}

/* clip the LEFT image into an arrow-head pointing right */
.split-hero .disassembly img{
  clip-path: polygon(
    0 0,          /* TL */
    85% 0,        /* just before arrow base (top) */
    100% 50%,     /* arrow tip                     */
    85% 100%,     /* arrow base (bottom)           */
    0 100%        /* BL */
  );
}

.split-hero .decompilation img{
  clip-path: polygon(
    0   0,        /* TL */
    100% 0,       /* TR */
    100% 100%,    /* BR */
    0   100%,     /* BL */
    15% 50%,
    0% 0%
  );
}
.split-hero .disassembly {
  z-index: 0; /* stay on top */
  margin-right: -15%; /* tweak this to align arrow overlap */
}
.split-hero .decompilation {
  z-index: 0;
}

.split-hero .disassembly::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* behind the image */
  background-color: var(--accent); /* your blue */
  clip-path: polygon(
    0 0,
    85% 0,
    100% 50%,
    85% 100%,
    0 100%
  );
  filter: blur(2px);      /* soft glow-like edge */
  transform: scale(1.01); /* slight scale for border effect */
}

.split-hero .decompilation::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Behind the image */
  background-color: var(--accent); /* Blue accent */
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 100%,
    15% 50%,
    0% 0%
  );
  filter: blur(2px);       /* Creates a soft glow */
  transform: scale(1.01);  /* Slight enlargement to show behind */
}

.index_sections {

       overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  text-align: center; /* centers the inline-table when it fits */
  padding: 56px 5%;
  margin: 0;
  background: var(--bg-page);
  background-image: linear-gradient(to bottom, var(--bg-page), var(--bg-page-deep));
  text-align: center;
}


  

.index_sections .image-wrapper {
  display: flex;
  flex-direction: column; /* stack image above caption */
  align-items: center;    /* center caption under image */
  margin-top: 0.5rem;
}

.index_sections .image-wrapper img {
  max-width: 60%;  /* adjust size if desired */
  height: auto;
  display: block;
}

.index_sections .image-wrapper figcaption {
  font-size: 22px;
  color: #aaa;
  margin-top: 6px; /* space between image and caption */
  text-align: center;
}



.video_wrapper iframe {
  display: block;
  margin: 0 auto;       /* ✅ centers the iframe horizontally */
  border: none;
}


.dark_table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--bg-page);
  color: white;
  font-size: 14px;
  font-family: Arial, sans-serif;
}

.dark_table th, .dark_table td {
  border: 1px solid var(--border);
  padding: 12px;
  text-align: left;
  vertical-align: top;
}

.dark_table thead {
  background-color: var(--bg-panel);
  font-weight: bold;
}

.dark_table ul {
  padding-left: 20px;
  margin: 0;
}

.dark_table li {
  list-style-type: disc;
  margin-bottom: 5px;
}
/* Profile-only tweaks */
.profile{padding:72px 12px 24px}
.profile .dark_table{table-layout:fixed;word-break:break-word;overflow-wrap:anywhere}

@media(max-width:600px){
  .profile .dark_table th,.profile .dark_table td{padding:10px}
}

/* Mobile: rows → two-line cards, clean corners */
@media(max-width:560px){
  .profile .dark_table{display:block;background:transparent;border-collapse:separate;border-spacing:0;width:100%}
  .profile .dark_table thead{display:none}
  .profile .dark_table tbody{display:grid;gap:12px}
  .profile .dark_table tbody tr{display:block;background:var(--bg-page);border:1px solid var(--border);border-radius:10px;overflow:hidden}
  .profile .dark_table td{display:block;background:transparent;border:0;padding:12px 14px;margin:0;word-break:break-word;overflow-wrap:anywhere}
  .profile .dark_table td:first-child{font-weight:600;color:#a9a9a9;border-bottom:1px solid var(--border-soft);margin:0}
  .profile .dark_table td:last-child{color:#fff;border-bottom:0} /* no border so bottom corners stay clean */
  #cancelSubscriptionBtn,#deleteAccountBtn{width:100%}
  .profile .shop_card{padding:14px}
  .profile .profile_avatar{width:72px;height:72px}
}





#chat_box {
  display: flex;
  flex-direction: column;
  height: 400px;                 /* tweak to taste */
  max-width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  resize: vertical;           /* allow vertical resizing */
  min-height: 200px;          /* optional minimum height */
  transition: height 0.5s ease;   /* smooth expand / collapse */
}

/* scrolling message pane */
#chat_messages {
  flex: 1 1 auto;
  padding: 12px;
  overflow-y: auto;
  font-family: Arial, sans-serif;
  font-size: 15px;
}

#chat_input {
  overflow-y: auto;              /* allow scroll when capped */
  -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
  scrollbar-width: none;         /* Firefox */
}
#chat_input::-webkit-scrollbar { display: none; } /* WebKit/iOS */

/* individual bubbles */
.chat_msg {
  margin-bottom: 8px;
  line-height: 1.4;
}
.chat_me   { text-align: left; }
.chat_them   { text-align: left; }

/* only style the actual bubble span (typing), not hljs spans */
.chat_me span.chat_bubble   { background:var(--accent); }
.chat_them span.chat_bubble { background:var(--border); }
/* Only style the top-level span bubble (typing indicator),
   not every span inside (so hljs token spans keep their colors) */
.chat_msg > span.chat_bubble {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 6px;
  color: #fff;
  max-width: 70%;
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* Keep a basic style for any bare <pre> you might render */
.chat_msg pre {
  background: var(--bg-inset-alt);
  border-radius: 8px;
  padding: 8px 12px;
  color: #f1f1f1;
  overflow-x: auto;
  font-family: Consolas, "Courier New", monospace;
  white-space: pre;
}


/* input field */
#chat_form {
  border-top: 1px solid var(--border);
}
#chat_input {
  width: 100%;
  padding: 10px;
  background: var(--bg-page);
  border: none;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 15px;
  resize: none;      /* allow manual resize */
    overflow-y: auto;        /* allow it to scroll once maxed-out */
  line-height: 1.4em;      /* a known line-height */
  max-height: calc(1.4em * 5); /* cap at 5 lines */
}

#chat_input:focus {
  outline: none;
}

.chat_msg {
  display: flex;                 /* avatar + bubble side-by-side */
  align-items: flex-end;
}
.chat_me   { flex-direction: row-reverse; } /* avatar on the right */
.chat_avatar {
  width: 28px;
  height: 28px;
  border-radius: 90%;
  object-fit: cover;
  margin: 0 6px;

  user-select: none;        /* Prevent selection */
  -webkit-user-drag: none;  /* Prevent drag in Safari */
  pointer-events: none;     /* Optional: disables right-click context menu */
}



/* enlarge chat when file is uploaded */
#chat_box.expanded {
    height: clamp(300px, 55vh, 55vh);
}


.chat_code {
  background-color: #1e1e1e;
  color: #dcdcdc;
  padding: 10px;
  border-radius: 6px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  white-space: pre-wrap;
  line-height: 1.5;
  margin-top: 5px;
}

.chat_code code {
  color: inherit;
  background: none;
}

.chat_block {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  border-radius: 6px;
  max-width: 80%;       /* Limit width */
  overflow-x: auto;     /* Enable horizontal scrolling if needed */
  background: var(--border);
  color: #fff;
  word-wrap: break-word;
  white-space: normal;
}
.chat_me .chat_block {
  background: var(--accent);
}

.chat_block p {
  margin: 0 0 8px 0;
}

.chat_block p:last-child {
  margin-bottom: 0;
}
/* style.css */
.chat_code_wrapper {
  position: relative;
  background: #1a1a1a; 
  border-radius: 6px;
  padding: 1rem 1rem 1rem 1.25rem;
  overflow-x: auto;
}

.chat_code_wrapper pre {
  margin: 0;
  font-family: Consolas, Menlo, monospace;
  font-size: 0.9rem;
  color: #c9d1d9;
  background: none;
  white-space: pre;
  overflow-x: auto;

  display: block;
  min-width: 100%;   /* ⬅️ this makes it fill the wrapper */
  box-sizing: border-box;
}


.chat_attachment {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #151515;
  border: 1px solid var(--border);
}

.chat_attachment_icon img {
  width: 20px;
  height: 20px;
  opacity: 0.9;
}

.chat_attachment_body {
  flex: 1;
  min-width: 0;
}

.chat_attachment_name {
  font-size: 13px;
  color: var(--text-on-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat_attachment_meta {
  font-size: 11px;
  color: var(--text-dim);
}

.chat_attachment_btn {
  border-radius: 6px;
  border: 1px solid var(--border);
  padding: 6px 10px;
  font-size: 12px;
  text-decoration: none;
  color: #fff;
  background: var(--accent);
  white-space: nowrap;
}

.chat_attachment_btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent);
}




/* copy icon */
.copy_icon {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  fill: #8b949e;
  cursor: pointer;
  transition: fill 0.15s ease;
}

.copy_icon:hover {
  fill: var(--accent-soft);
}

.copy_icon.copied {
  fill: #2ea043;            /* turns green briefly after copy */
}



/* === Pricing === */

@media (max-width: 650px) {
  .pricing_grid--eval {
    grid-template-columns: 1fr !important;
  }
}

.pricing_section {
  width: 100%;
  padding: 56px 0;
  margin: 0;
  background: var(--bg-page);
  background-image: linear-gradient(to bottom, var(--bg-page), var(--bg-page-deep));
}

.pricing {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.pricing_title {
  margin: 0 0 14px 0;
  font-size: 28px;
  text-align: center;
  letter-spacing: .3px;
}

.pricing_toggle {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}

.toggle_btn {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
}
.toggle_btn:hover { border-color: var(--accent); }
.toggle_btn.is-active {
  background: var(--accent); /* matches your accent */
  border-color: var(--accent);
}

.toggle_btn .save {
  opacity: .8;
  font-size: 12px;
  margin-left: 4px;
}

.pricing_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 16px;
}

.plan-card {
  overflow: visible; /* allows tooltip to escape */
  position: relative;
  background: var(--bg-panel);          /* your dark panels */
  border: 1px solid var(--border);    /* your border color */
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: border-color .15s ease, transform .15s ease;
}
.plan-card:hover {
    
  z-index: 1;
  border-color: var(--accent);        /* blue edge on hover, like .project */
  transform: translateY(-2px);
}

.plan-card--popular {
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px rgba(27,117,189,0.15);
}
.plan-card--popular .plan-cta { background: var(--accent); } /* strong CTA */

.plan-head {
  display: flex;
  flex-direction: column;
  gap: 4px;        /* 🔑 consistent space between h3, price, note */
  margin-bottom: 12px;
}

.plan-head h3,
.plan-head .price,
.plan-head .price_note {
  margin: 0;       /* remove default browser margins */
  padding: 0;
}


.price {
  font-size: 34px;
  font-weight: bold;
  line-height: 1.1;
}
.price_note {
  margin-top: 2px;
  opacity: .7;
  font-size: 13px;
}

.plan-features {
  margin: 12px 0 14px 0;
  padding: 0;
  list-style: none;
}
.plan-features li {
  margin: 6px 0;
  padding-left: 22px;
  position: relative;
  opacity: .9;
}
.plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  opacity: .9;
  /* subtle blue check to match theme */
  color: var(--accent);
}

.plan-cta {
  align-self: stretch;
  text-align: center;
  margin-top: auto;
  background: var(--border);          /* rests on dark background */
  border-color: var(--border);
}
.plan-cta:hover {
  border-color: var(--accent);
}

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(180deg, #1c1b18, #0f0f0f); /* blackened bronze vibe */
  border: 1px solid var(--border);
  padding: 4px 8px;
  font-size: 11px;
  letter-spacing: .3px;
  border-radius: 999px;
  opacity: .95;
}


.info-icon {
  display: inline-block;
  position: relative;
  margin-left: 5px;
  cursor: pointer;
  top: -1px; /* fine-tune if needed */
}

.info-icon img {
  filter: brightness(0) invert(1);
  width: 23px;
  height: 23px;
  vertical-align: middle;
}

.tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 125%; /* position above the icon */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 6px 8px;
  border-radius: 4px;
  white-space: normal;
  width: 200px;
  font-size: 0.85em;
  line-height: 1.4em;

  z-index: 9999; /* or a suitably high value */
  /* fade effect */
  transition: opacity 0.2s;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%; /* arrow on bottom */
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.info-icon:hover .tooltip,
.info-icon:focus .tooltip {
  visibility: visible;
  opacity: 1;
}

/* Responsive */
@media (max-width: 1024px) {
  .pricing_grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 550px) {
  .pricing_grid { grid-template-columns: 1fr; }
}


/* === Shop / Checkout (scoped to .shop) === */
.shop {
  padding: 30px 20px;
  max-width: 1100px;
  margin: 40px auto 0;
}

.shop .shop_title {
  margin: 0 0 14px 0;
  font-size: 28px;
  text-align: center;
}

.shop .shop_grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  align-items: stretch;   /* both columns end on one line: no gap under the shorter one */
}

/* the second card of each column takes the rest of its height */
.shop .shop_form { display: grid; gap: 16px; grid-template-rows: auto 1fr; }
.shop .shop_sidebar { display: grid; gap: 16px; grid-template-rows: auto 1fr; }

.shop .shop_card {
  background: var(--bg-panel);
  border: 1px solid var(--accent);  /* blue border like login */
  border-radius: 6px;
  padding: 16px;
}

.shop .shop_head {
  margin: 6px 0 12px 0;
  font-size: 18px;
}

.shop .field { margin: 10px 0; }
.shop .field.inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.shop .field label {
  display: block;
  opacity: .85;
  margin-bottom: 6px;
  font-size: 14px;
}
.shop .field .muted { opacity: .7; font-size: 12px; }

.shop .input_box {
  width: 100%;
  height: 40px;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: #111;
  color: #fff;
}

.shop .radio_row { display: flex; gap: 12px; flex-wrap: wrap; }
.shop .radio input { margin-right: 6px; }
.shop .checkbox input { margin-right: 8px; }

.shop .paypal_area,
.shop .card_area { margin-top: 8px; }
.shop .card_area.is-hidden { display: none; }

.shop .paypal_btn {
  width: 100%;
  height: 42px;
  border: 1px solid var(--border);
  background: var(--border);
  color: white;
  border-radius: 4px;
  font-weight: 600;
  cursor: not-allowed;
}

.shop .summary_list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
}
.shop .summary_list .row,
.shop .grand.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.shop .summary_list .row:last-child { border-bottom: none; }
.shop .grand { margin-top: 6px; font-size: 18px; }

.shop .order_btn {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  font-size: 16px;
  background: var(--accent);
  color: white;
  margin-top: 8px;
  opacity: .6;
  cursor: not-allowed;
}
.shop .order_btn.is-enabled { opacity: 1; cursor: pointer; }
.shop .order_btn.is-enabled:hover { background: var(--accent-hover); }

.shop .agree a { color: var(--accent); text-decoration: none; }
.shop .agree a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 980px) {
  .shop .shop_grid { grid-template-columns: 1fr; }
  .shop .shop_sidebar { order: 2; }
}
@media (max-width: 520px) {
  .shop .field.inline { grid-template-columns: 1fr; }
}



.legal-wrapper {
  background: var(--bg-panel);       /* match your panels */
  border: 1px solid var(--border); /* subtle border */
  border-radius: 6px;
  padding: 20px 30px;
  max-width: 1000px;
  margin: 0 auto;            /* center it */
}
.legal-wrapper h1, 
.legal-wrapper h2, 
.legal-wrapper p, 
.legal-wrapper li, 
.legal-wrapper table {
  color: #fff;               /* keep consistent text color */
}





/* Make profile tables roundy on all corners */
/* Round all corners on .dark_table without changing anything else */
.dark_table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  /* Visually clip the corners so header/background can't poke out */
  clip-path: inset(0 round 12px);
}

.dark_table thead tr:first-child th:first-child {
  border-top-left-radius: 12px;
}

.dark_table thead tr:first-child th:last-child {
  border-top-right-radius: 12px;
}

/* Row hover effect for profile tables */
.dark_table tbody tr {
  transition: background-color 0.2s ease;
}

.dark_table tbody tr:hover {
  background-color: var(--bg-panel); /* dark gray hover */
}





/* === Syntax highlighting for code blocks === */
.code_body.hljs {
  color: #e5e7eb;
}

/* keywords, types, etc. */
.hljs-keyword,
.hljs-literal,
.hljs-symbol,
.hljs-name {
  color: #60a5fa;
}

/* strings, function names, attrs */
.hljs-string,
.hljs-title,
.hljs-attr {
  color: #a3e635;
}

/* numbers */
.hljs-number {
  color: #f97316;
}

/* comments */
.hljs-comment {
  color: #9ca3af;
  font-style: italic;
}

/* builtins / functions */
.hljs-built_in,
.hljs-function {
  color: #22c55e;
}


/* ===========================
   Legal / TOS page layout
   =========================== */

/* Desktop / default styling */
.legal-wrapper {
  max-width: 900px;          /* keep the text from becoming too wide */
  margin: 0 auto;            /* center within .content */
  padding: 2rem 1.5rem 3rem;
  line-height: 1.6;
  overflow-wrap: break-word; /* break long URLs/words on small screens */
}

.legal-wrapper h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.legal-wrapper h2 {
  font-size: 1.35rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.legal-wrapper p {
  margin-bottom: 0.75rem;
}

.legal-wrapper ul {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}

.legal-wrapper li {
  margin-bottom: 0.4rem;
}

/* ===========================
   Footer tweaks (stack cols)
   =========================== */

/* assumes .foot_row_detail is already display:flex on desktop */
@media (max-width: 900px) {
  .foot_row_detail {
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .foot_row_detail_column {
    flex: 1 1 45%;
  }
}

@media (max-width: 600px) {
  .foot {
    padding: 1.5rem 1rem;
  }

  .foot_row_detail_column {
    flex: 1 1 100%;  /* one column per row on small screens */
  }

  .foot_row_detail_column ul {
    margin: 0;
  }
}

/* ===========================
   Mobile typography
   =========================== */

@media (max-width: 768px) {
  .legal-wrapper {
    padding: 1.5rem 1.25rem 2.5rem;
  }

  .legal-wrapper h1 {
    font-size: 1.7rem;
  }

  .legal-wrapper h2 {
    font-size: 1.2rem;
  }

  .legal-wrapper p,
  .legal-wrapper li {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .legal-wrapper {
    padding: 1.25rem 1rem 2rem;
  }

  .legal-wrapper h1 {
    font-size: 1.5rem;
  }

  .legal-wrapper h2 {
    font-size: 1.1rem;
  }

  .legal-wrapper p,
  .legal-wrapper li {
    font-size: 0.9rem;
  }
}
.table_note,
.benchmark_notes {
  max-width: 1100px;
  margin: 12px auto 0;
  text-align: left;
  font-family: Arial, sans-serif;
}

.benchmark_notes {
  margin-top: 20px;
}

.benchmark_notes h3 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: white;
  opacity: 1;
}

.benchmark_notes p {
  margin: 0 0 10px 0;
}

.benchmark_notes ul {
  margin: 0;
  padding-left: 14px;
}

.benchmark_notes li {
  margin-bottom: 6px;
}

/* Match pricing-page prose style for selected homepage sections */
#benchmark,
.supported-section,
section .faq,
#benchmark p,
#benchmark li,
#benchmark td,
#benchmark th,
#benchmark .table_note,
#benchmark .benchmark_notes,
.supported-section p,
.supported-section li,
.supported-section td,
.supported-section th,
section .faq p,
section .faq summary {
  font-family: Arial, sans-serif;
}

/* Body copy */
#benchmark .table_note,
#benchmark .benchmark_notes p,
#benchmark .benchmark_notes li,
.supported-section td,
.supported-section li,
section .faq p {
  font-size: 14px;
  line-height: 1.75;
  color: white;
  opacity: .88;
}

/* Table text */
#benchmark .dark_table,
.supported-section .dark_table {
  font-size: 14px;
}

#benchmark .dark_table th,
.supported-section .dark_table th {
  font-weight: 700;
  opacity: 1;
}

/* Section labels/headings */
#benchmark .section_kicker,
.supported-section .section_kicker,
section .section_kicker {
  font-size: 14px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}

#benchmark .section_head,
.supported-section .section_head,
section .video_title {
  font-size: 25px;
  line-height: 1.15;
  font-weight: 700;
}

/* FAQ specifics */
.faq summary {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  color: white;
}

.faq p {
  margin-top: 10px;
}

/* Evaluation Details block stays fully white */
#benchmark .benchmark_notes,
#benchmark .benchmark_notes p,
#benchmark .benchmark_notes li,
#benchmark .benchmark_notes strong,
#benchmark .benchmark_notes h3 {
  color: white;
  opacity: 1;
}

/* ---- /upload additions (kept in style.css so upload.html's own <style> stays untouched) ---- */
.decomp_info_btn { display:inline-flex; align-items:center; margin-left:6px; padding:0; border:0; background:transparent; cursor:pointer; vertical-align: middle; opacity:.7; line-height:0; }
.decomp_info_btn img { width:14px; height:14px; display:block; }
.decomp_info_btn:hover { opacity:1; }
.decomp_info_pop { margin-top:8px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background: var(--bg-inset); font-size:12.5px; line-height:1.55; color: var(--text); max-width: 560px; }
.decomp_info_pop[hidden] { display:none; }
.decomp_info_row + .decomp_info_row { margin-top:6px; }
.decomp_info_row.muted { color: var(--text-dim); font-size:12px; }
.decomp_info_row b { color: var(--accent-soft); }

/* ---- /upload chat: mobile fit (override in style.css; upload.html's own <style> is untouched) ----
   100vw includes the scrollbar and ignores the page's box, so the chat box
   overflowed horizontally on phones. Use 100% of the container instead and
   clamp everything inside it. Code blocks in bot answers wrap instead of
   forcing the bubble wider than the screen. Desktop is unaffected. */
@media (max-width: 720px) {
  #chat_box:not(.fullscreen) { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
  #chat_messages { max-width: 100%; overflow-x: hidden; }
  .chat_msg > span.chat_bubble { max-width: 92%; overflow-wrap: anywhere; word-break: break-word; }
  .chat_msg pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
  .chat_input_wrap { width: 100% !important; max-width: 100%; box-sizing: border-box; padding: 0 8px; }
  #chat_input { max-width: 100%; }
  html, body { overflow-x: hidden; }   /* belt and braces: no sideways scroll on the upload page */
}

/* ---- /upload: highlighted C viewer (View dialog) ---- */
.upload_src_code { margin:0; max-height:420px; overflow:auto; padding:10px 12px; border:1px solid var(--border-code); border-radius:8px; background: var(--bg-inset); font-family: var(--font-mono); font-size:12.5px; line-height:1.5; color: var(--text-code); white-space:pre; }

/* ---- pricing/shop (credit plans) ---- */
/* Credit-model additions for /pricing and /shop. Tokens only; the pages'
   own <style> blocks are byte-frozen, so everything new lives here. */
.credit_intro { max-width: 760px; margin: 0 auto 22px auto; text-align: center; color: var(--text-muted); font-size: 14px; line-height: 1.6; }
.credit_costs { max-width: 760px; margin: 34px auto 18px auto; }
.credit_costs_title { margin: 0 0 12px 0; font-size: 20px; text-align: center; letter-spacing: .3px; }
.credit_table_wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--bg-inset); }
.credit_table { width: 100%; border-collapse: collapse; font-size: 14px; }
.credit_table th, .credit_table td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--border-soft); color: var(--text-on-light); }
.credit_table th { font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-dim); background: var(--bg-inset-alt); }
.credit_table th:last-child, .credit_table td:last-child { text-align: right; white-space: nowrap; font-family: var(--font-mono); }
.credit_table tbody tr:last-child td { border-bottom: 0; }
.credit_table tbody tr:hover td { background: var(--bg-inset-alt); }
.credit_costs_note { margin: 10px 0 0 0; text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--text-dim); }
.shop_plan_meta { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: var(--text-dim); }
.shop_plan_meta b { color: var(--accent-soft); font-weight: 600; }

/* ---- site header on narrow phones (QA lane A) ---- */
/* Below ~520px the logged-in nav (logo 120px + avatar + Pricing + Upload +
   Logout) is wider than the viewport. Tighter logo/paddings and an icon-only
   Logout make it *nearly* fit at 360px, but font metrics vary per phone and
   an earlier `overflow:hidden` here clipped Logout (and anything right of
   it) with no way to reach it. The nav row is therefore a horizontal
   scroller on phones: no wrapping, no shrinking, touch momentum scrolling,
   scrollbar hidden (the row is one swipe wide at most). Desktop rules
   (>640px) are untouched. */
@media (max-width: 640px) {
  .topnav {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;             /* Firefox */
    -ms-overflow-style: none;
  }
  .topnav::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
  /* max-width:none here (not only in the early 640px block: the base
     `.topnav .topnavitem {max-width:60%}` rule comes later in the file and
     won that tie, so the button group was capped at 60% and its buttons
     overflowed the group box, which is why the trailing padding never
     showed up in the scroll width) */
  .topnav .topnavitem { flex: 0 0 auto; max-width: none; }
  /* the last group is what gets cut off: give it its own trailing space so
     the Logout button is never flush under the viewport edge / scrollbar */
  .topnav .topnavitem:last-child { padding-right: 12px; }
}
@media (max-width: 520px) {
  .topnav { padding-left: 8px; padding-right: 8px; }
  .topnav .topnav_logo { width: 88px; }
  .topnav .topnavitem { margin: 0 2px; }
  .topnav .icon_button { margin-left: 6px; padding: 8px 8px; }
  .thread_user .topnav .icon_button[href="/logout"] span { display: none; }
  .thread_user .topnav .icon_button[href="/logout"] img { margin-right: 0; }
}

/* ---- /upload file list scrollbar (QA lane A) ---- */
/* The list scrolls inside the card; the browser-default light scrollbar was a
   solid white bar beside the dark cards. Tokens only. */
.uploaded_scroller { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

/* ---- /upload card actions: undo the legacy step-button box (QA lane A) ---- */
/* style.css:616 `.upload_step button { width:200px; height:45px }` was written
   for the old big "Decompile" button and still hits the four icon buttons on
   every card: each icon sat in a 200px box, so the row spread across the
   card and squeezed the file name down to "x86_nose...". Icon buttons are
   icon-sized. */
.upload .upload_step .upload_actions .icon-btn { width: 32px; height: 32px; }

/* ---- /upload: finished whole-program runs on a card ---- */
/* One row per run (engine x level) with Download .zip + View icon buttons; the
   row area takes the card's full width under the actions. Icons come from
   /icons (black-on-transparent svg) and are forced white by the img filter. */
.upload_runs { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; min-height: 26px; padding-top: 4px; }
.upload_runs_none { font-size: 12px; color: var(--text-dim); }
.upload_run { display: inline-flex; align-items: center; gap: 6px; }
.upload_run_name { font-family: var(--font-mono); font-size: 12px; color: var(--text-on-light); }
.upload_run_live { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.upload .upload_step .upload_run_btn {
  display: inline-grid; place-items: center; width: 30px; height: 26px; padding: 0; margin: 0;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg-panel);
  color: var(--text-dim); cursor: pointer; line-height: 0; font-weight: normal;
}
.upload .upload_step .upload_run_btn:hover { border-color: var(--accent); background: var(--bg-hover); color: var(--text); }
.upload .upload_step .upload_run_btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.upload .upload_step .upload_run_btn[disabled] { opacity: .5; cursor: default; }
.upload .upload_step .upload_run_btn img { width: 14px; height: 14px; display: block; filter: brightness(0) invert(1); opacity: .8; }
.upload .upload_step .upload_run_btn:hover img { opacity: 1; }
@media (max-width: 720px) { .upload .upload_uploaded_file_box .upload_runs { width: 100%; flex-basis: auto; } }

/* ---- /upload: View dialog = the zip's file list + one highlighted file (QA lane F) ---- */
/* Inside DAI.uiAlert({wide}); the list scrolls on the left, the code pane on
   the right; on phones they stack (list on top, capped). Tokens only. */
.upload_zipview { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; height: min(72vh, 680px); }
.upload_zipfiles { overflow: auto; border-right: 1px solid var(--border); padding: 6px 0; background: var(--bg-inset-alt); }
.upload_zipfile { display: block; width: 100%; text-align: left; padding: 5px 12px; border: 0; background: transparent; color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload_zipfile:hover { background: var(--bg-hover); color: var(--text); }
.upload_zipfile.is-active { background: var(--bg-hover); color: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.upload_zipfile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.upload_zipview .upload_src_code { max-height: none; height: 100%; min-height: 0; }
@media (max-width: 720px) {
  .upload_zipview { grid-template-columns: 1fr; grid-template-rows: minmax(0, 32%) 1fr; }
  .upload_zipfiles { border-right: 0; border-bottom: 1px solid var(--border); }
}

/* ---- /upload: highlighted C in the View dialog (DAI.highlightC token classes) ---- */
/* Same token colours as inspect.css .ins-code (kw/cm/st/nu), tokens only. */
.upload_src_code { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.upload_src_code .kw { color: var(--accent-soft); }
.upload_src_code .cm { color: var(--text-dim); }
.upload_src_code .st { color: var(--text-muted); }
.upload_src_code .nu { color: var(--accent-soft); }

/* ---- /upload: card content fits phones (QA lane F) ---- */
/* The page's frozen inline <style> handles the base layout; these live here (new
   CSS never edits a page's inline <style>) and win by the extra .upload ancestor. */
/* A long, space-less binary name in the status line ("Uploading <name>...") shot
   straight through the drop zone's dashed border on phones - wrap it, and keep a
   little side padding so wrapped text stays clear of the border. */
.upload #upload_status { overflow-wrap: anywhere; padding: 0 10px; }
@media (max-width: 720px) {
  .upload .upload_uploaded_file_box { max-width: 100%; }
  /* Stretch the stacked card so a long file name wraps inside it instead of
     sizing .upload_file_meta to its content and pushing the row past the card
     border (which also gave the scroller a horizontal scrollbar). Overrides the
     inline <style>'s align-items:flex-start via the extra .upload ancestor. */
  .upload .upload_uploaded_file_box { flex-direction: column; align-items: stretch; }
  .upload .upload_file_meta { width: 100%; min-width: 0; }
  .upload .upload_file_name { overflow-wrap: anywhere; }
}

/* ---- svg icons white on dark: shared header + upload cards (QA lane F) ---- */
/* Several site icons are black-on-transparent SVGs (search, download, eye,
   info) and the header/profile icons are white only through per-path fill
   attributes. A colour filter makes every <img> icon in the nav and on the
   cards white regardless of the file's fill or of mask support in the phone
   browser. Scoped to .svg sources: the logo (blue squares) and real avatars
   (png/jpg/data:) are untouched. */
.topnav .icon_button img[src$=".svg"],
.topnav .profile_button .profile_avatar[src$=".svg"],
.decomp_info_btn img[src$=".svg"] { filter: brightness(0) invert(1); }
.upload .upload_file_meta img[src$=".svg"] { filter: brightness(0) invert(1); opacity: .8; }

/* ---- /pricing: plan header on phones (QA lane F) ---- */
/* The global `header {height:59px}` (style.css, site nav) also hits
   `<header class="plan-head">`: the head is fixed at 59px while its content
   (h3 + 34px price + note) is ~78px, so "price on request" sat 1-2px above
   the feature list and overlapped it on phones (taller system fonts). Below
   768px the head grows with its content; the price wraps instead of
   overflowing. Desktop (>=769px) is unchanged. */
@media (max-width: 768px) {
  .pricing_grid .plan-card .plan-head { height: auto; min-height: 59px; }
  .pricing_grid .plan-card .price { overflow-wrap: anywhere; }
}
/* ---- shared in-app dialogs + toasts (common.js: DAI.uiConfirm / uiAlert / uiPrompt / toast) ---- */
/* One styled replacement for the browser's alert()/confirm()/prompt() on
   every page. Overlay dims the page; the card never exceeds the viewport
   (16px gutter), scrolls its body when the message is long, and the buttons
   wrap to full width on phones. Esc cancels, Enter confirms, Tab is trapped
   inside the card; focus returns to the opener when it closes. */
.dai-dialog { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px; background: var(--overlay); font-family: var(--font); }
.dai-dialog-card { width: min(460px, 100%); max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); display: flex; flex-direction: column;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-pop); overflow: hidden; }
.dai-dialog-card.is-wide { width: min(1100px, 100%); }
.dai-dialog-card.is-wide .dai-dialog-body { white-space: normal; padding: 0; }
.dai-dialog-card.is-wide .upload_src_code { max-height: none; border: 0; border-radius: 0; }
.dai-dialog-head { padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 16px; color: var(--text); overflow-wrap: anywhere; }
.dai-dialog-body { padding: 14px; color: var(--text-muted); font-size: 14px; line-height: 1.5; overflow: auto; overflow-wrap: anywhere; white-space: pre-line; }
.dai-dialog-body input, .dai-dialog-body textarea { display: block; width: 100%; margin-top: 10px; padding: 8px 10px; background: var(--bg-inset); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font: inherit; white-space: pre; }
.dai-dialog-body textarea { min-height: 96px; resize: vertical; white-space: pre-wrap; }
.dai-dialog-body input:focus-visible, .dai-dialog-body textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.dai-dialog-err { color: var(--danger-bright); font-size: 12.5px; margin-top: 6px; min-height: 1.2em; white-space: pre-wrap; max-height: 180px; overflow: auto; }
.dai-dialog-err.is-busy { color: var(--text-muted); }
.dai-dialog-err.is-ok { color: var(--success); }
.dai-dialog-err.is-log { font-family: var(--font-mono); font-size: 12px; }
.dai-dialog-err:empty { display: none; }
.dai-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--border); }
.dai-dialog-actions button { min-width: 88px; }
.dai-dialog-actions .btn_secondary { background: var(--bg-elevated); }
.dai-dialog-actions .dai-btn-danger { background: var(--danger); border-color: var(--danger); color: var(--text); }
.dai-dialog-actions .dai-btn-danger:hover { border-color: var(--danger-bright); }
.dai-dialog-actions .dai-btn-danger:focus-visible { outline: 2px solid var(--danger-bright); outline-offset: 2px; }
@media (max-width: 480px) { .dai-dialog-actions button { flex: 1 1 auto; } }
.dai-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 10001; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 14px; font-size: 13px; color: var(--text); box-shadow: var(--shadow-pop); max-width: calc(100vw - 16px); overflow-wrap: anywhere; font-family: var(--font); pointer-events: none; }
.dai-toast.is-err { border-color: var(--danger-bright); }
.dai-toast.is-ok { border-color: var(--success); }

/* slide switch: a small iOS-style toggle over a visually-hidden checkbox. Shared house
   component - .upload_switch is the upload raw-image mode, .switch the generic form used
   elsewhere (e.g. the profile "collective names" opt-in). Off = dim track, on = accent
   track with the knob slid right. Drive it with role="switch" and keep aria-checked synced. */
.upload_mode { display: flex; justify-content: flex-end; margin-top: 6px; }
.upload_switch, .switch { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); cursor: pointer; user-select: none; }
.upload_switch input, .switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.upload_switch_track, .switch_track { position: relative; flex: none; width: 28px; height: 16px; border-radius: 8px; background: var(--border); transition: background .15s; }
.upload_switch_track::after, .switch_track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg-panel); transition: transform .15s; }
.upload_switch input:checked + .upload_switch_track, .switch input:checked + .switch_track { background: var(--accent); }
.upload_switch input:checked + .upload_switch_track::after, .switch input:checked + .switch_track::after { transform: translateX(12px); }
.upload_switch input:focus-visible + .upload_switch_track, .switch input:focus-visible + .switch_track { outline: 2px solid var(--accent); outline-offset: 2px; }
.upload_switch input:checked ~ .upload_switch_text, .switch input:checked ~ .switch_text { color: var(--text); }
.upload_switch input:disabled + .upload_switch_track, .switch input:disabled + .switch_track { opacity: .5; }
.upload_switch:has(input:disabled), .switch:has(input:disabled) { cursor: default; }

/* /upload: a member opened out of an APK sits nested under its package (upload.js nestMembers) */
.upload .upload_uploaded_file_box.upload_member { margin-left: calc(28px * var(--depth, 1)); border-left: 2px solid var(--border); }