.techr-alert-wrapper {
   position: fixed;
   top: 10px;
   left: 50%;
   transform: translateX(-50%) translateY(-120%);
   z-index: 9999;
   width: 360px;
   transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
   background: #f2f2f2;
   box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.techr-alert-wrapper.show {
   transform: translateX(-50%) translateY(0);
}

.techr-alert {
   background: var(--color-background-primary);
   border: 0.5px solid var(--color-border-secondary);
   border-radius: var(--border-radius-lg);
   padding: 14px 16px 14px 14px;
   display: flex;
   align-items: flex-start;
   gap: 12px;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
   overflow: hidden;
   position: relative;
}

.techr-alert::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 3px;
   border-radius: 99px 0 0 99px;
}

.techr-alert.success::before {
   background: #1D9E75;
}

.techr-alert.error::before {
   background: #E24B4A;
}

.techr-alert.warning::before {
   background: #EF9F27;
}

.techr-alert.info::before {
   background: #378ADD;
}

.techr-alert-icon {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-size: 14px;
}

.success .techr-alert-icon {
   background: #E1F5EE;
}

.error .techr-alert-icon {
   background: #FCEBEB;
}

.warning .techr-alert-icon {
   background: #FAEEDA;
}

.info .techr-alert-icon {
   background: #E6F1FB;
}

.techr-alert-content {
   flex: 1;
   padding-top: 2px;
}

.techr-alert-title {
   font-size: 13px;
   font-weight: 500;
   color: var(--color-text-primary);
   margin-bottom: 2px;
}

.techr-alert-message {
   font-size: 12px;
   color: var(--color-text-secondary);
   line-height: 1.5;
}

.techr-alert-close {
   width: 22px;
   height: 22px;
   border-radius: 50%;
   border: none;
   background: transparent;
   color: var(--color-text-secondary);
   cursor: pointer;
   font-size: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   line-height: 1;
   transition: background 0.15s;
   margin-top: 2px;
}

.techr-alert-close:hover {
   background: var(--color-background-secondary);
}

.techr-alert-progress {
   position: absolute;
   bottom: 0;
   left: 0;
   height: 2px;
   border-radius: 0 0 var(--border-radius-lg) 0;
   animation: shrink linear forwards;
}

.success .techr-alert-progress {
   background: #1D9E75;
}

.error .techr-alert-progress {
   background: #E24B4A;
}

.warning .techr-alert-progress {
   background: #EF9F27;
}

.info .techr-alert-progress {
   background: #378ADD;
}

@keyframes shrink {
   from {
      width: 100%;
   }

   to {
      width: 0%;
   }
}

.demo-area {
   min-height: 380px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
   padding: 2rem 1rem;
}

.demo-label {
   font-size: 12px;
   color: var(--color-text-secondary);
   margin-bottom: 4px;
   font-weight: 500;
   letter-spacing: 0.04em;
   text-transform: uppercase;
}

.btn-row {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   justify-content: center;
}

.demo-btn {
   font-family: 'DM Sans', sans-serif;
   font-size: 13px;
   font-weight: 500;
   padding: 8px 16px;
   border-radius: var(--border-radius-md);
   border: 0.5px solid var(--color-border-secondary);
   cursor: pointer;
   background: var(--color-background-primary);
   color: var(--color-text-primary);
   transition: background 0.15s, transform 0.1s;
}

.demo-btn:hover {
   background: var(--color-background-secondary);
}

.demo-btn:active {
   transform: scale(0.97);
}

.demo-btn.success {
   border-color: #1D9E75;
   color: #0F6E56;
}

.demo-btn.error {
   border-color: #E24B4A;
   color: #A32D2D;
}

.demo-btn.warning {
   border-color: #EF9F27;
   color: #854F0B;
}

.demo-btn.info {
   border-color: #378ADD;
   color: #185FA5;
}

.code-block {
   background: var(--color-background-secondary);
   border: 0.5px solid var(--color-border-tertiary);
   border-radius: var(--border-radius-md);
   padding: 12px 16px;
   font-family: monospace;
   font-size: 12px;
   color: var(--color-text-secondary);
   max-width: 360px;
   width: 100%;
   line-height: 1.6;
}

.code-block .kw {
   color: #378ADD;
}

.code-block .str {
   color: #1D9E75;
}