* { box-sizing: border-box; margin:0; padding:0; font-family:Poppins,sans-serif; }

body { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; background:linear-gradient(135deg,#0d1321,#1d2d44); color:#f0ebd8; padding:20px; }

.top { width:100%; max-width:1000px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; margin-bottom:20px; }
.title { font-size:32px; font-weight:600; }
.logo img { width:72px; height:72px; border-radius:15%; box-shadow:0 4px 15px rgba(0,0,0,0.4); }

.category-bar { display:flex; justify-content:center; align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
#categoryName { font-size:22px; font-weight:600; text-align:center; transition: opacity 0.3s ease; }
.tooltip { width:22px; height:22px; border-radius:50%; background:#748cab; color:#0d1321; display:flex; justify-content:center; align-items:center; cursor:pointer; position:relative; font-weight:600; }
.tooltip-text { position:absolute; top:32px; left:50%; transform:translateX(-50%); background:#0d1321; padding:10px; border-radius:10px; width:260px; font-size:12px; color:#f0ebd8; opacity:0; visibility:hidden; transition:opacity 0.25s ease; text-align:center; z-index:10; }
.tooltip:hover .tooltip-text { opacity:1; visibility:visible; }

.box { width:900px; max-width:95%; background: linear-gradient(180deg,#1d2d44,#3e5c76); border-radius:20px; padding:30px; display:flex; flex-direction:column; gap:10px; position:relative; transition: opacity 0.3s ease; }
.hint { text-align:center; font-size:14px; opacity:0.8; }

.list { display:flex; flex-direction:column; gap:12px; position:relative; }

.item {
    padding:16px 20px;
    border-radius:16px;
    cursor:grab;
    user-select:none;
    font-size:16px;
    font-weight:600;
    background: linear-gradient(90deg,#3e5c76,#1d2d44);
    display:flex;
    justify-content:center;
    align-items:center;
    transition: transform 0.25s ease, background 0.3s ease;
}

.item.dragging {
    opacity:0.9;
    cursor:grabbing;
    position:absolute;
    width:calc(100% - 40px);
    z-index:1000;
    pointer-events:none;
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    transition: none;
}

.item.placeholder {
    background: rgba(255,255,255,0.2);
    border:2px dashed #748cab;
    transition: background 0.25s ease, transform 0.25s ease;
}

.first { background: linear-gradient(90deg,#7fa2bd,#5f7fa6); color:#0d1321; }
.second { background: linear-gradient(90deg,#5c7f9b,#344b6b); color:#0d1321; }
.third { background: linear-gradient(90deg,#4a6a86,#263955); color:#0d1321; }
.aktualny { background: linear-gradient(90deg,#3e5c76,#1d2d44); }

.nav {
    display: flex;
    justify-content: space-between;
    margin-top: 26px;
    flex-wrap: wrap;
    gap: 10px;
}

.nav-left, .nav-right {
    display: flex;
    gap: 10px;
}

button {
    background:#748cab;
    color:#0d1321;
    border:none;
    border-radius:14px;
    padding:12px 26px;
    font-size:15px;
    cursor:pointer;
    transition:background 0.2s ease;
}
button:hover { background:#5c7092; }

@media (max-width:1000px){ 
    .box{width:90%; padding:20px;} 
    .title{font-size:28px; text-align:center; width:100%; margin-bottom:10px;} 
    .logo{width:100%; display:flex; justify-content:center; margin-bottom:10px;} 
}

@media (max-width:600px){ 
    .box{width:95%; padding:18px;} 
    .title{font-size:24px;} 
    .item{font-size:14px; padding:12px 16px;} 
    button{padding:10px 18px; font-size:14px;} 
    #categoryName{font-size:18px;} 
}