/* App Icon Styles */

.icon-finder {
  background: linear-gradient(180deg, #e3e3e3 0%, #c7c7c7 100%);
  position: relative;
  overflow: hidden;
}

.icon-finder::after {
  content: ':)';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  font-size: 30px;
  font-weight: bold;
  color: #2a62b3;
  font-family: monospace;
}

.icon-safari {
  background: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23fff'/%3E%3Ccircle cx='50' cy='50' r='45' fill='%231facfd'/%3E%3Cpath d='M50 5 L50 95 M5 50 L95 50' stroke='rgba(255,255,255,0.3)' stroke-width='1'/%3E%3Cpolygon points='50,10 60,45 90,50 55,60 50,90 40,55 10,50 45,40' fill='white'/%3E%3Cpolygon points='50,10 55,45 50,50 45,45' fill='%23ea4335'/%3E%3C/svg%3E");
  background-size: cover;
}

.icon-terminal {
  background: #222;
  position: relative;
}

.icon-terminal::after {
  content: '>_';
  color: #fff;
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: monospace;
  font-size: 24px;
  font-weight: bold;
}

.icon-text {
  background: linear-gradient(180deg, #fdfdfd 0%, #dcdcdc 100%);
  position: relative;
}

.icon-text::after {
  content: '';
  position: absolute;
  top: 15px;
  left: 10px;
  right: 10px;
  height: 2px;
  background: #999;
  box-shadow: 0 5px 0 #999, 0 10px 0 #999, 0 15px 0 #999;
}

.icon-paint {
  background: linear-gradient(45deg, #ff3b30, #ff9500, #ffcc00, #4cd964, #5ac8fa, #007aff, #5856d6, #ff2d55);
}

.icon-paint::after {
  content: '\f1fc';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: white;
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.icon-calc {
  background: #333;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 5px;
  gap: 2px;
}

.icon-calc div {
  background: #ff9f0a;
  border-radius: 4px;
}

.icon-calc div:nth-child(1),
.icon-calc div:nth-child(2) {
  background: #555;
}

.icon-studio {
  background: linear-gradient(135deg, #3a1c71, #d76d77, #ffaf7b);
  position: relative;
}

.icon-studio::after {
  content: '\f008';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: white;
  font-size: 28px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icon-settings {
  background: linear-gradient(180deg, #8e8e93 0%, #636366 100%);
  position: relative;
}

.icon-settings::after {
  content: '\f013';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: #ddd;
  font-size: 35px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icon-trash {
  background: linear-gradient(180deg, #f2f2f7 0%, #d1d1d6 100%);
  position: relative;
}

.icon-trash::after {
  content: '\f1f8';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: #777;
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Full Trash Icon */
.icon-trash.full::after {
  content: '\f2ed';
  color: #555;
}