 
  
 <style>
  :root{
    --bg: #f7f9fa;
    --card: #ffffff;
    --accent: #2ecc71;
    --accent-dark: #27ae60;
    --muted: #6b7280;
    --danger: #e11d48;
  }

  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;
    font-family:"Verdana", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background:linear-gradient(180deg,#fbfdfb 0%,var(--bg) 100%);
    color:#111827;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.45;
    padding:40px 16px;
  }

  .wrap{
    width:100%;
    max-width:1900px;
    background:var(--card);
    border-radius:16px;
    box-shadow:0 10px 30px rgba(2,6,23,0.08);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    margin:0 auto;
  }

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:5px 32px;
  border-bottom:1px solid #eef2f6;
  position:relative;
  flex-wrap:nowrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

nav{
  display:flex;
  align-items:center;
  gap:10px;
}
  
 .powitanie{
order:1;
} 
  
  .logo{
    width:75px;
    height:75px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 18px rgba(46,204,113,0.18);
  }
  .brand h1{font-size:18px; margin:0;}
  .brand p{margin:0; font-size:13px; color:var(--muted)}



  .btn, .art-button {
    padding:10px 14px;
    border-radius:10px;
    border:0;
    cursor:pointer;
    font-weight:600;
    text-decoration:none;
  }


  /* HAMBURGER MENU */
  .hamburger{
    display:none;
    background:transparent;
    border:none;
    font-size:26px;
    cursor:pointer;
    color:#111 !important;
    z-index:9999;
    position:relative;
  }

  .hero h2{font-size:34px; margin:0 0 12px 0; line-height:1.05;}
  .hero p.lead{color:var(--muted); font-size:16px; margin:0 0 20px;}
  .hero .cta{display:flex; gap:12px; flex-wrap:wrap;}
  .feature-list{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;}

  .card{
    background:var(--card);
    padding:22px;
    border-radius:10px;
    box-shadow:0 6px 18px rgba(17,24,39,0.06);
  }

  .mock-list{flex:1; overflow:auto;}
  .mock-list h4{margin:6px 0 2px 0; font-size:13px; color:var(--muted);}
  .mock-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 10px;
    border-radius:10px;
    margin:8px 0;
    background:#f4fff4;
    box-shadow:inset 0 -1px 0 rgba(0,0,0,0.02);
  }
  .mock-item.done{
    background:#eef8ee;
    opacity:0.85;
    text-decoration:line-through;
    color:#6b6b6b;
  }
  .mock-item .name{font-weight:600; font-size:18px;}

  .how{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:20px;
  }
  .how .step{
    padding:14px;
    border-radius:10px;
    background:linear-gradient(180deg,#fff,#fbfbfb);
    text-align:center;
    box-shadow:0 6px 14px rgba(10,20,30,0.04);
  }
  .how .step .ico{font-size:22px; margin-bottom:8px;}
  .how .step p{margin:0; color:var(--muted); font-size:14px;}

  /* FULL-WIDTH SECTIONS */
  .full-width-section {
    width: 100%;
    padding: 40px 20px;
    background: var(--bg);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .full-width-section .benefit,
  .full-width-section .package {
    flex: 1 1 220px;
    max-width: 800px;
  }

  footer{
    padding:20px 32px;
    border-top:1px solid #eef2f6;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
  }
  .legal{color:var(--muted); font-size:13px;}

  /* FORM ELEMENTS */
  form { display:block; margin-top:8px; }
  label.field { display:block; margin-bottom:8px; font-size:13px; color:var(--muted); }
form input,
form select,
form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 14px;
  background: #fff;
  box-sizing: border-box;
}
  select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #999 50%), 
                      linear-gradient(135deg, #999 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(1em + 2px), 
                         calc(100% - 13px) calc(1em + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
  }
  .row { display:flex; gap:10px; flex-wrap:wrap; }
  .checkbox { display:flex; align-items:center; gap:8px; margin:10px 0; color:var(--muted); font-size:14px; }

  .note { font-size:13px; color:var(--muted); margin-top:8px; }
  .error { color:var(--danger); background: rgba(225,29,72,0.06); padding:10px; border-radius:6px; margin-bottom:12px; }
  .success { color:#065f46; background:rgba(6,95,70,0.06); padding:10px; border-radius:6px; margin-bottom:12px; }

  .priceold{font-size:24px; font-weight:700; margin-bottom:12px; text-decoration:line-through;}

  /* PHONE MOCKUP */
  .phone-mock{
    width:100%;
    max-width:380px;
    margin:0 auto;
    display:flex;
    justify-content:center;
  }
  .phone {
    width:320px;
    height:640px;
    border-radius:28px;
    background:linear-gradient(180deg,#f8fff7,#ffffff);
    border:12px solid #0f1720;
    position:relative;
    box-shadow:0 15px 40px rgba(6,20,10,0.25);
    overflow:hidden;
  }
  .phone .screen{
    position:absolute;
    inset:14px;
    border-radius:14px;
    background:linear-gradient(180deg,#ffffff,#fbfff9);
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    font-size:15px;
  }
  
  
  
  .zapiszBtn {
  background-color: #f39c12; /* pomarańczowy */
  color: white;
  border: none;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s ease;
  width: auto; 
}

.zapiszBtn:hover {
  background-color: #e67e22; /* ciemniejszy pomarańczowy po najechaniu */
}


.kupioneBtn {
  background-color: #2ecc71; /* zielony */
  color: white;
  border: none;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s ease;
  width: auto; 
}

.kupioneBtn:hover {
  background-color: #27ae60; /* ciemniejszy zielony po najechaniu */
}






.usunBtn {
  background-color: #e74c3c; /* czerwony */
  color: white;
  border: none;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s ease;
  width: auto; 
}

.usunBtn:hover {
  background-color: #c0392b; /* ciemniejszy czerwony po najechaniu */
}



.parzysty { background-color: #cce6cc; }
.nieparzysty { background-color: #ffffff; }

.lista { font-size:22px; }


/* Kolory przycisków nagrywania */
.voiceBtn.start { background-color: #2ecc71; color: white; }
.voiceBtn.stop { background-color: #e74c3c; color: white; }


.kopiujBtn {
  background-color: #8e44ad; /* fioletowy */
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s ease;
}

.kopiujBtn:hover {
  background-color: #732d91; /* ciemniejszy fiolet */
}
  
  
  
  

  /* RESPONSYWNOŚĆ */
  @media (max-width:1000px){
    main{grid-template-columns:1fr; padding:24px;}
    .phone{width:300px; height:560px; margin-top:24px;}
    .how{grid-template-columns:1fr;}
  }

  @media (max-width:600px){
    body{padding:18px;}
    header{padding:16px;}
    .logo{width:44px; height:44px;}
    .hero h2{font-size:26px;}
    .phone{width:260px; height:480px;}
    nav{
display:none;
flex-direction:column;
width:100%;
background:white;
padding:10px 0;
}

nav.show{
display:flex;
}
    nav a{padding:8px 0; width:100%; text-align:center;}
    .hamburger{display:block !important;}
	
	
	header{
flex-direction:column;
align-items:flex-start;
}

.brand{
width:100%;
}

.userbox{
width:100%;
margin-top:8px;
}
	
	
	
	
	
  }

  @media (max-width:520px){
    .card{padding:16px;}
  }
  

  
  /* Wrapper do przewijania tabel */
.table-responsive {
  width: 100%;
  overflow-x: auto;
}

/* Tabele i komórki */
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

/* Kolory parzyste/nieparzyste */
tr.parzysty { background-color: #f9f9f9; }
tr.nieparzysty { background-color: #ffffff; }

/* Przyciski w jednej linii lub blokowe */
form.inline {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

form.inline input,
form.inline button {
  flex: 1 1 auto;
  min-width: 80px;
}



/* Textarea elastyczna */
textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Tooltip */
.tooltip {
  display: inline-block;
  margin-left: 10px;
  color: green;
}


  
  
  /* ===== TABELA ===== */

table{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
}

th, td{
  padding:8px 6px;
  text-align:left;
  vertical-align:middle;
}

th{
  font-weight:600;
}

/* kolory wierszy */
.parzysty { background:#f7fff7; }
.nieparzysty { background:#ffffff; }

/* nazwa listy */
.lista{
  font-size:20px;
}

/* formularze w jednej linii */
form.inline{
  display:inline-flex;
  gap:6px;
  align-items:center;
}

/* input kodu */
.input-inline {
width: auto;      /* lub pozostaw w spokoju jeśli już ustawione */
  max-width: initial;
  box-sizing: border-box;
}



.akcje{
display:flex;
gap:6px;
flex-wrap:wrap;
}



/* kolumna z kodem */
td:nth-child(3){
  overflow:visible;
}

/* kontener kod + przycisk */
.kodBox{
  display:flex;
  gap:4px;
  align-items:center;
}




.user-info{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}

.user-name{
display:flex;
align-items:center;
gap:5px;
}

.user-name a{
text-decoration:none;
color:blue;
}

.user-coins{
display:flex;
gap:8px;
}

.coin{
display:flex;
align-items:center;
border-radius:8px;
padding:5px 10px;
color:white;
font-weight:bold;
}

.euronetki{
background:#008000;
}

.psujki{
background:#FFD700;
color:black;
}


.menu{
display:flex;
list-style:none;
margin:0;
padding:0;
}

.menu-item{
position:relative;
}

.mega-menu{
display:none;
position:absolute;
left:0;
top:100%;
width:600px;
background:white;
padding:20px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
border-radius:10px;
gap:30px;
}

.mega-col{
display:flex;
flex-direction:column;
min-width:160px;
}

.mega-col h4{
margin:0 0 10px 0;
font-size:14px;
color:#666;
}

.mega-col a{
text-decoration:none;
padding:5px 0;
color:#111;
font-size:14px;
}

.mega-col a:hover{
color:#2ecc71;
}

/* hover */

.has-mega:hover .mega-menu{
display:flex;
}





  
  
  
  
  /* Ogólne style tabeli */
table {
    width: 100%;
    border-collapse: collapse;
}

/* Komórki nagłówka i danych */
th, td {
    padding: 6px 4px;
    text-align: left;
    font-size: 14px; /* mniejszy font na smartfony */
    word-wrap: break-word; /* zawijanie długich słów */
}

/* Nagłówki tabeli */
th {
    font-weight: bold;
}


.akcje-form {
  display: flex;
  flex-wrap: wrap; /* pozwala elementom przechodzić do nowego wiersza */
  gap: 5px;
  align-items: center;
}



.btn-wrapper {
  display: flex;
  gap: 5px;
}















.table-responsive table {
    width: 100%;
    table-layout: auto; /* wymusza równy podział kolumn */
    border-collapse: collapse;
}

.table-responsive td {
    width: auto;          /* każda komórka po 1/3 szerokości */
    text-align: center;   /* wyśrodkowanie przycisków */
    vertical-align: middle;
    word-break: break-word; /* zawijanie tekstu jeśli za długi */
    padding: 10px;
}

.table-responsive button {
        width: auto;
    max-width: 100%;       /* przycisk zajmuje całą szerokość komórki */
    white-space: normal; /* pozwala zawijać tekst */
}





/* Kontener kolumn */
.main-columns {
  display: flex;
  flex-direction: row;   /* wiersz na duże ekrany */
  gap: 20px;             /* odstęp między kolumnami */
}

/* Lewa kolumna - np. treść główna */
.left-col {
  flex: 2;               /* zajmuje 2/3 szerokości kontenera */
}

/* Prawa kolumna - np. panel boczny */
.right-col {
  flex: 1;               /* zajmuje 1/3 szerokości kontenera */
}



textarea[name="produkty"] {
    max-width: 1200px; /* maksymalna szerokość na duże ekrany */
    width: 100%;       /* wypełnia rodzica */
}

/* ===== SMARTFON ===== */


.lpColumn {
  width: 10%;
}

.lista {
  width: 90%;
}


@media (max-width:768px){

/* ===== TABELA ===== */

table{
width:100%;
table-layout:auto;
}





th, td{

font-size:11px;
padding:3px;
text-align:center;
white-space:normal;
overflow:visible;
text-overflow:ellipsis;
box-sizing:border-box;
}






td:last-child{
white-space:normal;
text-align:right;
}


/* ===== PRZYCISKI ===== */



.dodajBtn,
.zapiszBtn,
.usunBtn{
padding:4px 6px;
}

/* ===== LISTA ===== */

.lista{
font-size:13px;
}

/* ===== TABLE RESPONSIVE ===== */

.table-responsive{
width:100%;
overflow-x:auto;
}

.table-responsive td{
padding:10px;
text-align:center;
vertical-align:middle;
}

/* ===== CENY ===== */

.priceold{
font-size:18px;
text-decoration:line-through;
color:#888;
}

.price{
font-size:24px;
font-weight:bold;
color:var(--accent);
}

/* ===== LAYOUT KOLUMN ===== */

.main-columns{
flex-direction:column;
}

.left-col,
.right-col{
flex:unset;
width:100%;
}

/* ===== TEXTAREA ===== */

textarea[name="produkty"]{
width:100%;
max-width:768px;
height:100px;
padding:8px;
box-sizing:border-box;
resize:vertical;
}

/* ===== HEADER ===== */

header{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}

.userbox{
order:1;
display:flex;
justify-content:center;
width:100%;
}

.hamburger{
order:2;
align-self:flex-end;
}

nav{
order:3;
display:flex;
flex-direction:column;
width:100%;
}

.brand{
order:4;
display:flex;
justify-content:center;
align-items:center;
width:100%;
}

.brand img{
width:40px;
height:40px;
}

/* ===== USER INFO ===== */

.user-info{
flex-direction:column;
align-items:flex-start;
}

/* ===== MEGA MENU MOBILE ===== */

.mega-menu{
position:static;
display:none;
width:100%;
padding:10px 0;
box-shadow:none;
flex-direction:column;
}

.has-mega.open .mega-menu{
display:flex;
}

}



.install-box{
  width:100%;
  display:flex;
  justify-content:center;
  padding:0 20px;     /* odstęp lewo + prawo */
  box-sizing:border-box;
}

.install-box button{
  max-width:100%;
}


.dodajBtn {
  background: #3498db; /* niebieski */
  color: white;
  border: none;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s ease;
  text-decoration:none;

}

.dodajBtn:hover {
  background: #2980b9; /* ciemniejszy niebieski po najechaniu */
}

  .btn-ghost{background:transparent; color:var(--muted);}
  .btn-primary{background:#2ecc71; color:white; box-shadow:0 6px 12px rgba(39,174,96,0.14);}
  .btn-primary:hover {
  background: #27ae60; /* trochę ciemniejszy */
}
  .btn-outline{background:transparent; border:1px solid #e6eef0; color:#111;}
  
  
  	 .art-button {
      padding:10px 14px;
      border-radius:10px;
      border:0;
      cursor:pointer;
      font-weight:600;
      text-decoration:none;
	  font-size:15px;
    }
  
  		 .art-button-zapisz {
      padding:10px 14px;
      border-radius:10px;
      border:0;
      cursor:pointer;
      font-weight:600;
      text-decoration:none;
	  font-size:15px;
    }
	
		 .art-button-wiecej {
      padding:10px 14px;
      border-radius:10px;
      border:0;
      cursor:pointer;
      font-weight:600;
      text-decoration:none;
	  font-size:15px;
    }
	.art-button{background:red; color:white; box-shadow:0 6px 12px rgba(39,174,96,0.14);}
	.art-button:hover{background:#c0392b; color:white; box-shadow:0 6px 12px rgba(39,174,96,0.14);}
    .art-button-zapisz{background:green; color:white; box-shadow:0 6px 12px rgba(39,174,96,0.14);}
	.art-button-zapisz:hover{background:#27ae60; color:white; box-shadow:0 6px 12px rgba(39,174,96,0.14);}
	.art-button-wiecej{background:blue; color:white; box-shadow:0 6px 12px rgba(39,174,96,0.14);}
	.art-button-wiecej:hover{background:#2980b9; color:white; box-shadow:0 6px 12px rgba(39,174,96,0.14);}
	
	
	
	
	.breadcrumbs {
    font-size: 13px;
    color: #6b7280; /* lekko szary */
	text-decoration: none;
}


.article-tags {
    margin-top: 40px;
    font-size: 14px;
}

.article-tags a {
    display: inline-block;
    margin-right: 8px;
    padding: 4px 8px;
    background: #f3f4f6;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
}


#toc {
    background: #f9fafb;
    padding: 20px;
    margin: 30px 0;
    border-radius: 10px;
}

#toc ul {
    list-style: none;
    padding-left: 0;
}

#toc li {
    margin-bottom: 8px;
}

#toc a {
    text-decoration: none;
    color: #2563eb;
}

#toc a:hover {
    text-decoration: underline;
}


.breadcrumbs a {
    text-decoration: none;
    color: #555; /* opcjonalnie */
}

.breadcrumbs a:hover {
    text-decoration: underline; /* lekki efekt po najechaniu */
}
	
.has-mega .mega-menu{
  display:none;
}

.has-mega.open .mega-menu{
  display:flex;
}	
	
	
	
	.art-button,
.art-button-zapisz,
.art-button-wiecej,
.dodajBtn,
.zapiszBtn,
.usunBtn {
  display:inline-block;
  background:red;
  color:white;
}
	
</style>
