* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%;
  height: 100%;
  overflow: auto;
}
body {
  background: #0a0a0f;
}
#root {
  width: 100%;
  height: 100%;
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.3; }
  94% { opacity: 1; }
  95% { opacity: 0.5; }
  96% { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@keyframes glitch {
  0%, 100% { transform: translate(0); }
  10% { transform: translate(-2px, -2px); }
  20% { transform: translate(2px, 2px); }
  30% { transform: translate(-1px, 2px); }
  40% { transform: translate(2px, -2px); }
  50% { transform: translate(-2px, 1px); }
  60% { transform: translate(1px, -1px); }
  70% { transform: translate(-1px, -2px); }
  80% { transform: translate(2px, 1px); }
  90% { transform: translate(-2px, -1px); }
}
@keyframes glitchText {
  0%, 100% { clip-path: inset(0 0 0 0); }
  5% { clip-path: inset(40% 0 20% 0); transform: translate(-2px); }
  10% { clip-path: inset(10% 0 60% 0); transform: translate(2px); }
  15% { clip-path: inset(0 0 0 0); transform: translate(0); }
}
@keyframes dataStream {
  0% { background-position: 0 0; }
  100% { background-position: 0 1000px; }
}
@keyframes slideIn {
  0% { transform: translateX(-100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes hexPulse {
  0%, 100% { opacity: 0.05; }
  50% { opacity: 0.15; }
}
@keyframes cornerPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(0, 255, 255, 0.1); }
::-webkit-scrollbar-thumb { background: #00ffff; }
::-webkit-scrollbar-thumb:hover { background: #ff00ff; }
.task-list::-webkit-scrollbar { width: 8px; }
.task-list::-webkit-scrollbar-track { background: rgba(0,255,255,0.02); }
.task-list::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#00ffff,#ff00ff); border-radius: 8px; }
.task-list::-webkit-scrollbar-thumb:hover { background: #ff00ff; }
.task-list { scrollbar-color: #00ffff rgba(0,0,0,0.6); scrollbar-width: thin; }
@media screen and (min-width: 769px) {
  html, body {
    min-width: 1280px;
    min-height: 720px;
  }
  #root {
    min-width: 1280px;
    min-height: 720px;
  }
}
@media screen and (max-width: 768px) {
  html, body {
    min-width: 100%;
    width: 100%;
    min-height: 100vh;
  }
  #root {
    min-width: 100%;
    width: 100%;
    min-height: 100vh;
  }
  .app-header {
    padding: 15px 20px !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px;
  }
  .app-header h1 {
    font-size: 24px !important;
    letter-spacing: 6px !important;
    text-align: center;
  }
  .app-header > div:first-child,
  .app-header > div:last-child {
    text-align: center !important;
  }
  .app-header > div:first-child > div {
    font-size: 8px !important;
  }
  .main-grid {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 15px !important;
    gap: 15px !important;
  }
  .right-column {
    order: -1 !important;
    width: 100% !important;
  }
  .gif-slot-2 {
    display: none !important;
  }
  .gif2-container {
    padding: 0 15px !important;
    margin: 15px auto 0 !important;
  }
  .gif2-container > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
  }
  .ticker-container {
    display: none !important;
  }
  footer {
    bottom: 0 !important;
    padding: 8px !important;
    font-size: 9px !important;
    letter-spacing: 2px !important;
  }
  body > div {
    padding-bottom: 40px !important;
  }
  .main-grid > div:not(.gif-slot),
  .right-column > div:not(.gif-slot) {
    font-size: 9px !important;
  }
  .main-grid h2,
  .right-column h2 {
    font-size: 10px !important;
    letter-spacing: 2px !important;
  }
  .main-grid > div:not(.gif-slot),
  .right-column > div:not(.gif-slot) {
    height: auto !important;
    max-height: 70vh !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .gif-slot-1 {
    display: flex !important;
    height: 120px !important;
    min-height: 120px !important;
    flex-shrink: 0 !important;
    touch-action: none !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }
  .gif-slot img {
    pointer-events: none !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
  }
  .main-grid > div > div,
  .right-column > div > div {
    min-height: auto !important;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
  }
  .task-list {
    overflow-y: auto !important;
    max-height: 45vh !important;
    flex: 1 1 auto !important;
  }
  .main-grid button[style*="marginTop"],
  .main-grid > div > button:last-child {
    margin-top: auto !important;
    flex-shrink: 0 !important;
  }
  button {
    min-height: 44px !important;
    padding: 10px 15px !important;
    font-size: 8px !important;
  }
  .nav-btn {
    font-size: 16px !important;
    padding: 8px 12px !important;
  }
  .delete-btn {
    font-size: 28px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
  }
  input, textarea {
    font-size: 10px !important;
    padding: 10px !important;
  }
  .task-list > div {
    padding: 10px !important;
  }
  ::-webkit-scrollbar {
    width: 4px !important;
  }
  .task-list::-webkit-scrollbar {
    width: 4px !important;
  }
  canvas {
    position: fixed !important;
  }
  .app-header button,
  .main-grid button {
    touch-action: manipulation;
  }
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
@media screen and (max-width: 576px) {
  .app-header h1 {
    font-size: 20px !important;
    letter-spacing: 4px !important;
  }
  .main-grid {
    padding: 0 10px !important;
    gap: 12px !important;
  }
  button {
    font-size: 7px !important;
  }
  .nav-btn {
    font-size: 14px !important;
  }
  .delete-btn {
    font-size: 26px !important;
  }
  footer {
    font-size: 8px !important;
    letter-spacing: 1px !important;
  }
  .main-grid > div,
  .right-column > div {
    max-height: 65vh !important;
  }
  .task-list {
    max-height: 45vh !important;
  }
}