/* =========================================================
   NEXA TODO
   Premium Productivity Interface
   ========================================================= */

:root {

  --black: #000000;

  --surface: #080808;

  --surface-2: #0d0d0d;

  --surface-3: #121212;

  --white: #ffffff;

  --muted: #858585;

  --muted-2: #555555;

  --line: rgba(255, 255, 255, 0.09);

  --cyan: #00e5ff;

  --pink: #ff00c8;

  --gradient:
    linear-gradient(
      100deg,
      #00e5ff 0%,
      #ff00c8 100%
    );

  --radius-xl: 28px;

  --radius-lg: 20px;

  --radius-md: 14px;

  --ease:
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

}


/* =========================================================
   RESET
   ========================================================= */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}


html {

  scroll-behavior: smooth;

}


body {

  min-height: 100vh;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(0, 229, 255, 0.07),
      transparent 35%
    ),
    #000;

  color: var(--white);

  font-family:
    "Space Grotesk",
    sans-serif;

  font-weight: 500;

  overflow-x: hidden;

}


/* =========================================================
   AMBIENT LIGHT
   ========================================================= */

.ambient {

  position: fixed;

  width: 500px;

  height: 500px;

  border-radius: 50%;

  filter: blur(130px);

  pointer-events: none;

  opacity: 0.035;

  z-index: -1;

}


.ambient-one {

  top: 20%;

  left: -300px;

  background: var(--cyan);

}


.ambient-two {

  right: -300px;

  top: 55%;

  background: var(--pink);

}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {

  position: relative;

  border-bottom:
    1px solid var(--line);

}


.nav-container {

  width: min(
    1180px,
    calc(100% - 40px)
  );

  min-height: 76px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;

}


.brand {

  display: flex;

  justify-content: center;

}


.brand-logo {

  width: 108px;

  height: auto;

  object-fit: contain;

  display: block;

}


.back-link {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  width: fit-content;

  color: #aaa;

  text-decoration: none;

  font-size: 13px;

  font-weight: 600;

  transition:
    color 0.25s ease,
    transform 0.25s ease;

}


.back-link:hover {

  color: #fff;

  transform: translateX(-3px);

}


.back-arrow {

  font-size: 18px;

  line-height: 1;

}


.header-status {

  justify-self: end;

  display: flex;

  align-items: center;

  gap: 8px;

  color: #666;

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  font-weight: 600;

}


.status-dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: #39ff88;

  box-shadow:
    0 0 12px
    rgba(57, 255, 136, 0.7);

}


/* =========================================================
   MAIN
   ========================================================= */

.main-container {

  width: min(
    1080px,
    calc(100% - 40px)
  );

  margin: 0 auto;

  padding:
    82px 0 70px;

}


/* =========================================================
   HERO
   ========================================================= */

.hero {

  text-align: center;

  max-width: 760px;

  margin:
    0 auto 55px;

}


.eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 22px;

  color: #777;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.2em;

}


.eyebrow span {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: var(--cyan);

  box-shadow:
    0 0 12px
    rgba(0, 229, 255, 0.8);

}


.hero h1 {

  font-size:
    clamp(
      48px,
      7vw,
      78px
    );

  line-height: 0.98;

  letter-spacing: -0.055em;

  font-weight: 700;

}


.hero h1 span {

  display: block;

  background: var(--gradient);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

}


.hero p {

  margin-top: 23px;

  color: #777;

  font-size: 15px;

  line-height: 1.7;

}


/* =========================================================
   APP CONTAINER
   ========================================================= */

.todo-app {

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.035),
      rgba(255,255,255,0.008)
    );

  border:
    1px solid rgba(255,255,255,0.10);

  border-radius: var(--radius-xl);

  padding: 34px;

  box-shadow:
    0 40px 100px
    rgba(0,0,0,0.65);

  backdrop-filter: blur(20px);

}


/* =========================================================
   APP TOP
   ========================================================= */

.app-top {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 28px;

}


.app-label {

  color: #555;

  font-size: 10px;

  letter-spacing: 0.16em;

  font-weight: 700;

  margin-bottom: 7px;

}


.app-top h2 {

  font-size: 28px;

  line-height: 1;

  letter-spacing: -0.035em;

}


.date-display {

  color: #777;

  font-size: 12px;

  font-weight: 600;

}


/* =========================================================
   PROGRESS
   ========================================================= */

.progress-section {

  margin-bottom: 26px;

}


.progress-info {

  display: flex;

  justify-content: space-between;

  color: #666;

  font-size: 11px;

  margin-bottom: 9px;

}


.progress-track {

  height: 4px;

  width: 100%;

  background: #151515;

  border-radius: 99px;

  overflow: hidden;

}


.progress-fill {

  height: 100%;

  background: var(--gradient);

  border-radius: inherit;

  transition:
    width 0.55s var(--ease);

}


/* =========================================================
   COMPOSER
   ========================================================= */

.task-composer {

  background: #050505;

  border:
    1px solid rgba(255,255,255,0.09);

  border-radius: var(--radius-lg);

  padding: 16px;

  margin-bottom: 30px;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;

}


.task-composer:focus-within {

  border-color:
    rgba(0,229,255,0.3);

  box-shadow:
    0 0 0 4px
    rgba(0,229,255,0.035);

}


.composer-main {

  display: flex;

  align-items: center;

  gap: 13px;

}


.composer-icon {

  width: 34px;

  height: 34px;

  display: grid;

  place-items: center;

  border-radius: 10px;

  background:
    rgba(0,229,255,0.08);

  color: var(--cyan);

  font-size: 20px;

  flex-shrink: 0;

}


#todoInput {

  width: 100%;

  border: none;

  outline: none;

  background: transparent;

  color: #fff;

  font-family: inherit;

  font-size: 16px;

  font-weight: 600;

}


#todoInput::placeholder {

  color: #444;

}


.composer-controls {

  display: grid;

  grid-template-columns:
    170px
    165px
    1fr;

  gap: 10px;

  margin-top: 14px;

}


.composer-controls select,

.composer-controls input[type="date"] {

  min-width: 0;

  height: 46px;

  padding:
    0 13px;

  border:
    1px solid rgba(255,255,255,0.08);

  border-radius: 11px;

  background: #0a0a0a;

  color: #888;

  font-family: inherit;

  font-size: 12px;

  font-weight: 600;

  outline: none;

  transition:
    border-color 0.2s ease,
    color 0.2s ease;

}


.composer-controls select:focus,

.composer-controls input[type="date"]:focus {

  border-color:
    rgba(0,229,255,0.35);

  color: #fff;

}


.composer-controls option {

  background: #0a0a0a;

  color: #fff;

}


.add-task-btn {

  height: 46px;

  border: none;

  border-radius: 11px;

  background: var(--gradient);

  color: #000;

  font-family: inherit;

  font-size: 13px;

  font-weight: 700;

  cursor: pointer;

  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s ease;

}


.add-task-btn span {

  margin-left: 8px;

  opacity: 0.55;

}


.add-task-btn:hover {

  transform: translateY(-2px);

  box-shadow:
    0 10px 30px
    rgba(0,229,255,0.12);

}


.add-task-btn:active {

  transform: translateY(0);

}


/* =========================================================
   TOOLBAR
   ========================================================= */

.toolbar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 15px;

  margin-bottom: 18px;

}


.filter-group {

  display: flex;

  gap: 5px;

}


.filter-btn {

  border: none;

  background: transparent;

  color: #666;

  border-radius: 9px;

  padding:
    9px 13px;

  font-family: inherit;

  font-size: 11px;

  font-weight: 700;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease;

}


.filter-btn:hover {

  color: #bbb;

}


.filter-btn.active {

  background: #151515;

  color: #fff;

}


.toolbar-right {

  display: flex;

  align-items: center;

  gap: 10px;

}


.search-box {

  height: 38px;

  min-width: 200px;

  display: flex;

  align-items: center;

  gap: 7px;

  padding:
    0 11px;

  background: #080808;

  border:
    1px solid rgba(255,255,255,0.07);

  border-radius: 9px;

}


.search-box span {

  color: #555;

  font-size: 18px;

}


.search-box input {

  width: 100%;

  border: none;

  outline: none;

  background: transparent;

  color: #ddd;

  font-family: inherit;

  font-size: 11px;

}


.search-box input::placeholder {

  color: #444;

}


.clear-btn {

  border: none;

  background: transparent;

  color: #555;

  font-family: inherit;

  font-size: 10px;

  font-weight: 700;

  cursor: pointer;

  transition:
    color 0.2s ease;

}


.clear-btn:hover:not(:disabled) {

  color: #aaa;

}


.clear-btn:disabled {

  cursor: default;

  opacity: 0.3;

}


/* =========================================================
   TODO LIST
   ========================================================= */

.todo-list {

  display: flex;

  flex-direction: column;

  gap: 8px;

}


.todo-item {

  min-height: 72px;

  display: flex;

  align-items: center;

  gap: 14px;

  padding:
    13px 15px;

  border:
    1px solid rgba(255,255,255,0.065);

  border-radius: 14px;

  background:
    linear-gradient(
      100deg,
      #090909,
      #060606
    );

  transition:
    transform 0.25s var(--ease),
    border-color 0.25s ease,
    background 0.25s ease,
    opacity 0.25s ease;

  animation:
    taskIn 0.4s var(--ease);

}


.todo-item:hover {

  transform: translateY(-1px);

  border-color:
    rgba(255,255,255,0.13);

  background: #0b0b0b;

}


.todo-item.removing {

  opacity: 0;

  transform:
    translateX(20px)
    scale(0.98);

}


/* =========================================================
   PRIORITY ACCENTS
   ========================================================= */

.todo-item.priority-high {

  border-left:
    2px solid #ff3b81;

}


.todo-item.priority-normal {

  border-left:
    2px solid rgba(0,229,255,0.5);

}


.todo-item.priority-low {

  border-left:
    2px solid #555;

}


/* =========================================================
   CHECK
   ========================================================= */

.check-button {

  width: 24px;

  height: 24px;

  border:
    1px solid #333;

  border-radius: 50%;

  background: transparent;

  color: #000;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  font-size: 12px;

  font-weight: 700;

  cursor: pointer;

  transition:
    background 0.25s var(--ease),
    border-color 0.25s ease,
    transform 0.25s ease;

}


.check-button:hover {

  border-color: var(--cyan);

  transform: scale(1.08);

}


.todo-item.completed .check-button {

  border-color: transparent;

  background: var(--gradient);

}


.todo-item.completed {

  opacity: 0.48;

}


.todo-content {

  flex: 1;

  min-width: 0;

}


.todo-text {

  color: #eee;

  font-size: 14px;

  line-height: 1.45;

  font-weight: 600;

  overflow-wrap: anywhere;

}


.todo-item.completed .todo-text {

  text-decoration:
    line-through;

  text-decoration-thickness: 1px;

}


.todo-meta {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 7px;

}


.priority-badge {

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

}


.priority-badge.high {

  color: #ff5b98;

}


.priority-badge.normal {

  color: var(--cyan);

}


.priority-badge.low {

  color: #666;

}


.due-date,

.created-date {

  color: #4d4d4d;

  font-size: 9px;

  font-weight: 600;

}


.meta-icon {

  color: #666;

  margin-right: 2px;

}


/* =========================================================
   ACTIONS
   ========================================================= */

.todo-actions {

  display: flex;

  align-items: center;

  gap: 3px;

  opacity: 0;

  transform:
    translateX(5px);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;

}


.todo-item:hover .todo-actions {

  opacity: 1;

  transform:
    translateX(0);

}


.action-button {

  width: 32px;

  height: 32px;

  border: none;

  border-radius: 8px;

  background: transparent;

  color: #555;

  font-family: inherit;

  font-size: 17px;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease;

}


.action-button:hover {

  background: #161616;

  color: #fff;

}


.delete-action:hover {

  color: #ff4d91;

}


.edit-input {

  width: 100%;

  border: none;

  border-bottom:
    1px solid var(--cyan);

  outline: none;

  background: transparent;

  color: #fff;

  padding:
    4px 0;

  font-family: inherit;

  font-size: 14px;

  font-weight: 600;

}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.empty-state {

  display: none;

  text-align: center;

  padding:
    70px 20px 60px;

}


.empty-state.visible {

  display: block;

  animation:
    fadeIn 0.35s ease;

}


.empty-icon {

  width: 54px;

  height: 54px;

  display: grid;

  place-items: center;

  margin:
    0 auto 18px;

  border:
    1px solid rgba(0,229,255,0.16);

  border-radius: 50%;

  color: var(--cyan);

  background:
    rgba(0,229,255,0.04);

  font-size: 18px;

}


.empty-state h3 {

  font-size: 16px;

  margin-bottom: 7px;

}


.empty-state p {

  color: #555;

  font-size: 12px;

}


/* =========================================================
   APP FOOTER
   ========================================================= */

.app-footer {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 20px;

  margin-top: 28px;

  padding-top: 23px;

  border-top:
    1px solid rgba(255,255,255,0.06);

}


.footer-stat {

  display: flex;

  align-items: center;

  gap: 7px;

  color: #555;

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  font-weight: 700;

}


.stat-number {

  color: #aaa;

  font-size: 13px;

}


.footer-divider {

  width: 1px;

  height: 15px;

  background: #222;

}


/* =========================================================
   BRAND NOTE
   ========================================================= */

.brand-note {

  text-align: center;

  padding-top: 65px;

}


.brand-note-line {

  width: 35px;

  height: 1px;

  margin:
    0 auto 17px;

  background: var(--gradient);

}


.brand-note p {

  color: #777;

  font-size: 12px;

}


.brand-note strong {

  color: #fff;

}


.brand-note span {

  display: block;

  margin-top: 7px;

  color: #3f3f3f;

  font-size: 10px;

}


/* =========================================================
   SITE FOOTER
   ========================================================= */

.site-footer {

  border-top:
    1px solid rgba(255,255,255,0.05);

  padding:
    25px 20px;

  text-align: center;

}


.site-footer p {

  color: #3d3d3d;

  font-size: 10px;

  letter-spacing: 0.04em;

}


.site-footer span {

  margin:
    0 7px;

  color: #222;

}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes taskIn {

  from {

    opacity: 0;

    transform:
      translateY(8px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


@keyframes fadeIn {

  from {

    opacity: 0;

    transform:
      translateY(5px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


.shake {

  animation:
    shake 0.45s ease;

}


@keyframes shake {

  0%,
  100% {

    transform: translateX(0);

  }

  20% {

    transform: translateX(-7px);

  }

  40% {

    transform: translateX(7px);

  }

  60% {

    transform: translateX(-5px);

  }

  80% {

    transform: translateX(5px);

  }

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

  .main-container {

    padding-top: 60px;

  }


  .todo-app {

    padding: 24px;

  }


  .composer-controls {

    grid-template-columns:
      1fr 1fr;

  }


  .add-task-btn {

    grid-column:
      1 / -1;

  }


  .toolbar {

    align-items: stretch;

    flex-direction: column;

  }


  .toolbar-right {

    width: 100%;

  }


  .search-box {

    flex: 1;

  }

}


@media (max-width: 560px) {

  .nav-container {

    width:
      calc(100% - 28px);

    min-height: 66px;

  }


  .header-status {

    display: none;

  }


  .brand-logo {

    width: 94px;

  }


  .back-link {

    font-size: 12px;

  }


  .main-container {

    width:
      calc(100% - 24px);

    padding:
      48px 0 55px;

  }


  .hero {

    margin-bottom: 35px;

  }


  .hero h1 {

    font-size: 47px;

  }


  .hero p {

    font-size: 13px;

  }


  .todo-app {

    padding: 17px;

    border-radius: 21px;

  }


  .app-top h2 {

    font-size: 23px;

  }


  .date-display {

    font-size: 10px;

  }


  .composer-controls {

    grid-template-columns: 1fr;

  }


  .add-task-btn {

    grid-column: auto;

  }


  .toolbar-right {

    flex-direction: column;

    align-items: stretch;

  }


  .search-box {

    width: 100%;

    min-width: 0;

  }


  .clear-btn {

    text-align: left;

  }


  .todo-item {

    padding:
      12px;

    gap: 10px;

  }


  .todo-actions {

    opacity: 1;

    transform: none;

  }


  .action-button {

    width: 29px;

    height: 29px;

  }


  .app-footer {

    gap: 13px;

  }


  .footer-stat {

    font-size: 8px;

  }


  .stat-number {

    font-size: 11px;

  }

}