/* Albumik 0.1.9 - tagi tylko z zakładki Tagi + poprawki UI */
:root{
  --a-bg:#f7f9fd;
  --a-card:#fff;
  --a-text:#141429;
  --a-muted:#7a748f;
  --a-border:#e8eaf2;
  --a-dark:#0b1628;
  --a-dark2:#071120;
  --a-pink:#d93695;
  --a-purple:#8b5cf6;
  --a-blue:#3b82f6;
  --a-green:#22c55e;
  --a-orange:#f59e0b;
  --a-red:#ef4444;
  --a-shadow:0 18px 48px rgba(26,31,55,.08);
}

body{
  background:linear-gradient(115deg,#f8fbff 0%,#fff8fc 100%)!important;
}

.app-shell{
  grid-template-columns:260px minmax(0,1fr) 250px!important;
  background:linear-gradient(115deg,#f8fbff 0%,#fff8fc 100%)!important;
}

.sidebar{
  background:linear-gradient(180deg,#101b2f 0%,#071120 100%)!important;
  border-radius:0!important;
  box-shadow:18px 0 45px rgba(10,17,32,.08)!important;
}

.sidebar-brand,
.brand{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}

.sidebar-brand .brand-badge,
.brand-badge{
  width:42px!important;
  height:42px!important;
  border-radius:13px!important;
  background:linear-gradient(135deg,var(--a-pink),var(--a-purple))!important;
  box-shadow:0 12px 30px rgba(217,54,149,.35)!important;
  color:#fff!important;
  font-weight:900!important;
}

.sidebar-brand img.albumik-app-logo,
.albumik-app-logo{
  width:42px!important;
  height:42px!important;
  object-fit:contain!important;
  border-radius:10px!important;
}

.sidebar button,
.sidebar a,
.nav-btn{
  border-radius:12px!important;
  min-height:44px!important;
  font-weight:800!important;
  letter-spacing:-.1px!important;
  color:rgba(255,255,255,.78)!important;
}

.sidebar button:hover,
.sidebar a:hover,
.nav-btn:hover{
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
}

.sidebar button.active,
.sidebar a.active,
.nav-btn.active{
  background:linear-gradient(135deg,var(--a-pink),#b43bd6)!important;
  color:#fff!important;
  box-shadow:0 14px 34px rgba(217,54,149,.28)!important;
}

.sidebar button[data-view="library"],
.sidebar .nav-btn[data-view="library"]{
  display:none!important;
}

.main,.content,main{
  max-width:none!important;
  width:100%!important;
  padding:28px 28px 54px!important;
}

.rightbar,.aside,.side-panel{
  display:block!important;
  width:250px!important;
  max-width:250px!important;
  padding:28px 18px 40px 0!important;
}

.rightbar .card,.aside .card,.side-panel .card,.panel-card{
  background:#fff!important;
  border:1px solid var(--a-border)!important;
  border-radius:22px!important;
  box-shadow:0 16px 42px rgba(26,31,55,.06)!important;
  padding:18px!important;
  margin-bottom:16px!important;
}

.albumik-avatar-wrap{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:8px 0 18px!important;
}

.albumik-avatar{
  width:44px!important;
  height:44px!important;
  border-radius:999px!important;
  overflow:hidden!important;
  display:grid!important;
  place-items:center!important;
  color:#fff!important;
  font-weight:900!important;
  background:linear-gradient(135deg,var(--a-pink),var(--a-purple))!important;
  border:2px solid rgba(255,255,255,.18)!important;
}

.albumik-avatar img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

.albumik-avatar-upload{
  border:1px solid rgba(255,255,255,.16)!important;
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
  border-radius:12px!important;
  padding:8px 10px!important;
  font-weight:800!important;
  cursor:pointer!important;
}

.albumik-topline{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:18px;
}

.albumik-page-title h1{
  margin:0 0 8px!important;
  font-size:34px!important;
  line-height:1.05!important;
  letter-spacing:-.9px!important;
  color:#141429!important;
}

.albumik-page-title p{
  margin:0!important;
  color:#6f7286!important;
  font-size:15px!important;
}

.albumik-actionbar{
  display:grid;
  grid-template-columns:minmax(340px,1fr) auto auto auto;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
}

.albumik-search{
  height:52px!important;
  background:#fff!important;
  border:1px solid var(--a-border)!important;
  border-radius:17px!important;
  box-shadow:0 12px 30px rgba(26,31,55,.045)!important;
  padding:0 17px!important;
}

.albumik-search input{
  width:100%!important;
  height:100%!important;
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  padding:0!important;
}

.library-shell{display:block!important;margin-top:0!important}

.library-content{
  background:#fff!important;
  border:1px solid var(--a-border)!important;
  border-radius:26px!important;
  box-shadow:var(--a-shadow)!important;
  padding:22px!important;
  min-height:650px!important;
}

.library-toolbar{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:14px!important;
  flex-wrap:wrap!important;
  margin-bottom:20px!important;
}

.library-path code,#librarySummary{
  display:block!important;
  padding:10px 13px!important;
  background:#f4f5fb!important;
  border-radius:13px!important;
  color:#50566f!important;
  font-weight:800!important;
  white-space:nowrap!important;
  border:0!important;
}

.library-btn{
  border:0!important;
  border-radius:14px!important;
  padding:13px 17px!important;
  font-weight:900!important;
  cursor:pointer!important;
  background:linear-gradient(135deg,var(--a-pink),var(--a-purple))!important;
  color:#fff!important;
  box-shadow:0 12px 28px rgba(217,54,149,.18)!important;
}

.library-btn.secondary{
  background:#fff!important;
  color:var(--a-text)!important;
  border:1px solid var(--a-border)!important;
  box-shadow:0 8px 22px rgba(26,31,55,.05)!important;
}

.library-folders{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;
  gap:14px!important;
  margin:8px 0 24px!important;
}

.library-folder-card{
  border:1px solid var(--a-border)!important;
  background:#fbfcff!important;
  border-radius:17px!important;
  padding:15px!important;
  min-height:78px!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  cursor:pointer!important;
  text-align:left!important;
  color:var(--a-text)!important;
  transition:.16s ease!important;
}

.library-folder-card:hover{
  border-color:rgba(217,54,149,.34)!important;
  background:#fff5fa!important;
  transform:translateY(-1px)!important;
}

.library-folder-icon{
  width:42px;
  height:42px;
  min-width:42px;
  border-radius:13px;
  background:#fff0d9;
  display:grid;
  place-items:center;
  color:#f59e0b;
}

.library-folder-card strong{
  display:block;
  font-size:14px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.library-folder-card span{
  color:var(--a-muted);
  font-size:12px;
  font-weight:700;
}

.library-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(285px,1fr))!important;
  gap:20px!important;
}

.library-photo{
  position:relative!important;
  height:235px!important;
  border-radius:19px!important;
  overflow:hidden!important;
  background:#dce4f2!important;
  box-shadow:0 16px 36px rgba(26,31,55,.10)!important;
  border:1px solid rgba(255,255,255,.9)!important;
  cursor:pointer!important;
  margin:0!important;
  transition:.16s ease!important;
}

.library-photo:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 24px 46px rgba(26,31,55,.17)!important;
}

.library-photo img,.library-photo video{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}

.library-photo figcaption{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  padding:34px 12px 12px!important;
  color:#fff!important;
  font-weight:900!important;
  font-size:12px!important;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.82))!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

.library-card-actions{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  gap:8px;
  z-index:3;
}

.library-card-action{
  width:34px!important;
  height:34px!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.45)!important;
  background:rgba(10,14,28,.42)!important;
  color:#fff!important;
  backdrop-filter:blur(10px)!important;
  cursor:pointer!important;
  font-weight:900!important;
}

.library-card-tags{
  position:absolute;
  left:10px;
  top:10px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  z-index:2;
  max-width:calc(100% - 56px);
}

.albumik-tag-pill,
.library-card-tag{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  color:#fff!important;
  border-radius:999px!important;
  font-size:11px!important;
  font-weight:900!important;
  padding:5px 8px!important;
  max-width:132px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  border:1px solid rgba(255,255,255,.18)!important;
}

.albumik-tag-icon svg{
  width:13px!important;
  height:13px!important;
  display:block!important;
  stroke:currentColor!important;
}

.library-video-badge{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  font-size:17px;
  background:linear-gradient(135deg,rgba(23,16,46,.82),rgba(139,92,246,.55));
}

.library-empty,.library-error{
  padding:22px!important;
  border-radius:18px!important;
  background:#fbfcff!important;
  border:1px dashed var(--a-border)!important;
  color:var(--a-muted)!important;
  font-weight:800!important;
}

.library-error{color:#dc2626!important;background:#fff7f7!important}

.albumik-viewer{
  position:fixed!important;
  inset:0!important;
  z-index:99999!important;
  background:rgba(4,8,18,.94)!important;
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr) 330px 64px!important;
  gap:18px!important;
  padding:34px!important;
}

.albumik-viewer.hidden{display:none!important}

.albumik-viewer-arrow{
  align-self:center!important;
  width:52px!important;
  height:72px!important;
  border-radius:18px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
  font-size:32px!important;
  cursor:pointer!important;
}

.albumik-viewer-arrow:hover{background:rgba(255,255,255,.18)!important}

.albumik-viewer-main{
  min-width:0;
  display:grid;
  grid-template-rows:1fr auto;
  gap:14px;
}

.albumik-viewer-inner{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.albumik-viewer-media img,
.albumik-viewer-media video{
  max-width:calc(100vw - 620px)!important;
  max-height:82vh!important;
  width:auto!important;
  height:auto!important;
  display:block!important;
  border-radius:18px!important;
  box-shadow:0 30px 90px rgba(0,0,0,.45)!important;
  background:#000!important;
}

.albumik-viewer-caption{
  color:rgba(255,255,255,.88);
  font-weight:800;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.albumik-viewer-side{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:24px;
  padding:20px;
  color:#fff;
  align-self:stretch;
  overflow:auto;
  backdrop-filter:blur(18px);
}

.albumik-viewer-side h3{
  margin:0 0 8px;
  color:#fff;
  font-size:20px;
}

.albumik-viewer-side p{
  margin:0 0 18px;
  color:rgba(255,255,255,.66);
  font-size:13px;
  word-break:break-word;
}

.albumik-tag-list,.albumik-quick-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:12px 0 16px;
}

.albumik-tag-chip,.albumik-quick-tag{
  border:0;
  border-radius:999px;
  color:#fff;
  font-weight:900;
  padding:8px 10px;
  cursor:pointer;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.albumik-tag-chip::after{
  content:" ×";
  opacity:.7;
}

.albumik-tag-form{
  display:flex;
  gap:8px;
}

.albumik-tag-form input{
  flex:1;
  min-width:0;
  background:rgba(255,255,255,.12)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  color:#fff!important;
  border-radius:14px!important;
}

.albumik-tag-form input::placeholder{color:rgba(255,255,255,.55)!important}

.albumik-tag-form button,.albumik-slide-btn{
  border:0!important;
  border-radius:14px!important;
  padding:11px 13px!important;
  background:#fff!important;
  color:#17102e!important;
  font-weight:900!important;
  cursor:pointer!important;
}

.albumik-slide-btn{width:100%;margin:10px 0 18px}

.albumik-viewer-close{
  position:fixed!important;
  top:22px!important;
  right:26px!important;
  width:46px!important;
  height:46px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:rgba(255,255,255,.12)!important;
  color:#fff!important;
  font-size:24px!important;
  cursor:pointer!important;
  z-index:100000!important;
}

@media(max-width:1320px){
  .app-shell{grid-template-columns:250px minmax(0,1fr)!important}
  .rightbar,.aside,.side-panel{display:none!important}
  .library-grid{grid-template-columns:repeat(auto-fill,minmax(235px,1fr))!important}
  .albumik-viewer{grid-template-columns:54px minmax(0,1fr) 54px!important}
  .albumik-viewer-side{display:none!important}
  .albumik-viewer-media img,.albumik-viewer-media video{max-width:calc(100vw - 180px)!important}
}

@media(max-width:900px){
  .app-shell{grid-template-columns:1fr!important}
  .albumik-actionbar{grid-template-columns:1fr!important}
  .library-grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr))!important}
  .library-photo{height:155px!important}
  .albumik-viewer{grid-template-columns:1fr!important;padding:18px!important}
  .albumik-viewer-arrow{position:fixed;top:50%;z-index:100001}
  #albumikPrev{left:12px}
  #albumikNext{right:12px}
  .albumik-viewer-media img,.albumik-viewer-media video{max-width:96vw!important;max-height:74vh!important}
}
/* Albumik 0.1.9 marker */