/* =========================================================
   NEXA NOTES
   Premium NEXA DIGITALS Design System
   ========================================================= */

:root {

  --void: #000000;
  --charcoal: #080808;
  --card: #0d0d0d;
  --card-soft: #111111;

  --white: #ffffff;
  --gray: #a2a2a2;
  --muted: #686868;

  --cyan: #00e5ff;
  --magenta: #ff00c8;

  --lime: #c4ff00;
  --electric: #7cff00;

  --border: rgba(255, 255, 255, 0.08);
  --cyan-border: rgba(0, 229, 255, 0.18);

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

  --lime-gradient:
    linear-gradient(
      100deg,
      #c4ff00,
      #7cff00
    );

  --shadow:
    0 30px 80px rgba(0, 0, 0, 0.55);

  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;

}


/* =========================================================
   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%
    ),
    var(--void);

  color: var(--white);

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

  overflow-x: hidden;

}


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

.ambient {

  position: fixed;

  width: 380px;
  height: 380px;

  border-radius: 50%;

  filter: blur(120px);

  opacity: 0.05;

  pointer-events: none;

  z-index: -1;

}


.ambient-one {

  background: var(--cyan);

  top: 15%;
  left: -200px;

}


.ambient-two {

  background: var(--magenta);

  bottom: 5%;
  right: -220px;

}


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

.site-header {

  position: sticky;

  top: 0;

  z-index: 20;

  background:
    rgba(0, 0, 0, 0.78);

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

  backdrop-filter:
    blur(20px);

}


.nav-container {

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

  height: 76px;

  margin: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

}


.back-link {

  display: flex;

  align-items: center;

  gap: 10px;

  color: var(--gray);

  text-decoration: none;

  font-size: 13px;

  font-weight: 500;

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

}


.back-link:hover {

  color: var(--white);

  transform:
    translateX(-3px);

}


.back-arrow {

  color: var(--cyan);

  font-size: 18px;

}


.brand-mark {

  display: flex;

  align-items: baseline;

  gap: 5px;

  position: absolute;

  left: 50%;

  transform:
    translateX(-50%);

}


.brand-main {

  font-size: 20px;

  font-weight: 700;

  letter-spacing: 2px;

  background:
    var(--brand-gradient);

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

}


.brand-sub {

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 2.5px;

  color: #858585;

}


.header-status {

  display: flex;

  align-items: center;

  gap: 8px;

  color: #666;

  font-size: 9px;

  letter-spacing: 1.2px;

  font-weight: 600;

}


.status-dot {

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--lime);

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

}


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

.main-container {

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

  margin: auto;

  padding:
    70px 0 90px;

}


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

.hero {

  text-align: center;

  margin-bottom: 55px;

}


.eyebrow {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  color: var(--cyan);

  font-size: 9px;

  letter-spacing: 2.5px;

  font-weight: 700;

  margin-bottom: 22px;

}


.eyebrow-line {

  width: 30px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--cyan)
    );

}


.eyebrow-line:last-child {

  background:
    linear-gradient(
      90deg,
      var(--magenta),
      transparent
    );

}


.hero h1 {

  font-size:
    clamp(42px, 7vw, 76px);

  line-height: 0.98;

  letter-spacing: -3px;

  font-weight: 700;

  margin-bottom: 20px;

}


.hero h1 span {

  background:
    var(--brand-gradient);

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

}


.hero > p {

  max-width: 560px;

  margin: auto;

  color: var(--gray);

  font-size: 15px;

  line-height: 1.7;

  font-weight: 400;

}


.hero-signature {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 9px;

  margin-top: 22px;

  color: #575757;

  font-size: 10px;

  letter-spacing: 1.5px;

  text-transform: uppercase;

}


.hero-signature span:first-child {

  color: var(--lime);

}


.signature-dot {

  color: #333;

}


/* =========================================================
   WORKSPACE
   ========================================================= */

.workspace {

  display: flex;

  flex-direction: column;

  gap: 22px;

}


.panel {

  position: relative;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.035),
      rgba(255,255,255,0.012)
    ),
    var(--card);

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

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

  box-shadow:
    var(--shadow);

  overflow: hidden;

}


/* =========================================================
   EDITOR
   ========================================================= */

.editor-panel {

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

}


.panel-top {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding:
    17px 20px;

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

  background:
    rgba(0,0,0,0.18);

}


.panel-top > div:first-child {

  display: flex;

  align-items: center;

  gap: 12px;

}


.panel-label {

  color: #707070;

  font-size: 9px;

  letter-spacing: 2px;

  font-weight: 700;

}


.save-state {

  color: var(--lime);

  font-size: 9px;

  letter-spacing: 0.5px;

}


.icon-btn {

  width: 30px;
  height: 30px;

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

  background:
    rgba(255,255,255,0.025);

  color: #777;

  border-radius: 9px;

  cursor: pointer;

  font-size: 18px;

  line-height: 1;

  transition:
    all 0.2s ease;

}


.icon-btn:hover {

  color: white;

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

}


.editor-body {

  padding: 30px;

}


.note-title {

  width: 100%;

  border: none;

  outline: none;

  background: transparent;

  color: white;

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

  font-size:
    clamp(25px, 4vw, 38px);

  font-weight: 700;

  letter-spacing: -1.3px;

  margin-bottom: 18px;

}


.note-title::placeholder {

  color: #333;

}


.note-content {

  width: 100%;

  min-height: 230px;

  resize: vertical;

  border: none;

  outline: none;

  background: transparent;

  color: #d4d4d4;

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

  font-size: 15px;

  line-height: 1.8;

  font-weight: 400;

}


.note-content::placeholder {

  color: #383838;

}


.editor-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  margin-top: 18px;

  padding-top: 15px;

  border-top:
    1px solid var(--border);

}


.editor-stats {

  display: flex;

  gap: 9px;

  color: #565656;

  font-size: 10px;

  font-weight: 500;

}


.stat-divider {

  color: #292929;

}


.editor-hint {

  display: flex;

  align-items: center;

  gap: 5px;

  color: #4d4d4d;

  font-size: 9px;

}


kbd {

  padding:
    3px 6px;

  border:
    1px solid #252525;

  border-radius: 5px;

  color: #777;

  background:
    #080808;

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

}


.save-btn {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  margin-top: 22px;

  padding: 17px 22px;

  border: none;

  border-radius: 13px;

  background:
    var(--brand-gradient);

  color: #000;

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

  font-size: 14px;

  font-weight: 700;

  cursor: pointer;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

}


.save-btn:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 15px 35px
    rgba(0, 229, 255, 0.12);

}


.save-icon {

  font-size: 17px;

}


.btn-arrow {

  margin-left: auto;

  font-size: 18px;

}


/* =========================================================
   PAYWALL
   ========================================================= */

.paywall {

  padding: 35px;

  border:
    1px solid transparent;

  background:
    linear-gradient(
      var(--card),
      var(--card)
    ) padding-box,

    var(--brand-gradient)
    border-box;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

}


.paywall.hidden {

  display: none;

}


.paywall.attention {

  animation:
    paywallShake 0.5s ease;

}


@keyframes paywallShake {

  0%, 100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-7px);
  }

  75% {
    transform: translateX(7px);
  }

}


.pro-badge {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding:
    6px 10px;

  border:
    1px solid
    rgba(196,255,0,0.2);

  border-radius: 50px;

  color: var(--lime);

  font-size: 8px;

  letter-spacing: 1.5px;

  font-weight: 700;

  margin-bottom: 20px;

}


.pro-badge span {

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--lime);

  box-shadow:
    0 0 8px var(--lime);

}


.paywall h2 {

  font-size:
    clamp(25px, 4vw, 36px);

  line-height: 1.1;

  letter-spacing: -1px;

  margin-bottom: 13px;

}


.paywall h2 span {

  background:
    var(--brand-gradient);

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

}


.paywall > p {

  max-width: 650px;

  color: #858585;

  font-size: 13px;

  line-height: 1.7;

  font-weight: 400;

}


.pro-features {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 10px;

  margin:
    25px 0;

}


.pro-feature {

  padding:
    12px 14px;

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

  border-radius: 10px;

  color: #9b9b9b;

  font-size: 11px;

  font-weight: 500;

}


.feature-check {

  color: var(--lime);

  margin-right: 7px;

}


.price-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;

  padding-top: 20px;

  border-top:
    1px solid var(--border);

}


.price-label {

  display: block;

  color: #555;

  font-size: 8px;

  letter-spacing: 1.4px;

  margin-bottom: 4px;

}


.price-row strong {

  font-size: 25px;

}


.unlock-btn {

  display: flex;

  align-items: center;

  gap: 20px;

  border: none;

  border-radius: 12px;

  padding:
    14px 18px;

  background:
    var(--lime-gradient);

  color: #000;

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

  font-size: 12px;

  font-weight: 700;

  cursor: pointer;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

}


.unlock-btn:hover {

  transform:
    translateY(-2px);

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

}


.secure-note {

  margin-top: 15px;

  text-align: right;

  color: #3f3f3f !important;

  font-size: 9px !important;

}


/* =========================================================
   NOTES
   ========================================================= */

.notes-panel {

  padding: 25px;

}


.notes-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 20px;

}


.notes-header h2 {

  margin-top: 6px;

  font-size: 23px;

  letter-spacing: -0.5px;

}


.notes-count {

  min-width: 35px;

  height: 35px;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid
    rgba(196,255,0,0.18);

  border-radius: 10px;

  color: var(--lime);

  font-size: 11px;

  font-weight: 700;

}


/* =========================================================
   SEARCH
   ========================================================= */

.search-container {

  position: relative;

  margin-bottom: 18px;

}


.search-container input {

  width: 100%;

  height: 48px;

  padding:
    0 45px;

  background:
    #080808;

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

  border-radius: 12px;

  outline: none;

  color: white;

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

  font-size: 12px;

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

}


.search-container input:focus {

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

  box-shadow:
    0 0 0 3px
    rgba(0,229,255,0.04);

}


.search-container input::placeholder {

  color: #444;

}


.search-icon {

  position: absolute;

  left: 17px;

  top: 50%;

  transform:
    translateY(-53%);

  color: #606060;

  font-size: 19px;

  pointer-events: none;

}


.clear-search {

  position: absolute;

  right: 10px;

  top: 50%;

  transform:
    translateY(-50%);

  width: 28px;
  height: 28px;

  border: none;

  border-radius: 8px;

  background: transparent;

  color: #666;

  cursor: pointer;

  display: none;

}


.clear-search.visible {

  display: block;

}


.clear-search:hover {

  color: white;

  background: #171717;

}


/* =========================================================
   NOTE CARDS
   ========================================================= */

.notes-list {

  display: flex;

  flex-direction: column;

  gap: 11px;

}


.note-item {

  position: relative;

  padding:
    18px;

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

  border-radius: 15px;

  background:
    rgba(0,0,0,0.32);

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

  animation:
    noteAppear 0.35s ease both;

}


.note-item:hover {

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

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

  transform:
    translateY(-2px);

}


@keyframes noteAppear {

  from {

    opacity: 0;

    transform:
      translateY(8px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


.note-card-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 10px;

}


.note-indicator {

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--brand-gradient);

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

}


.note-meta {

  color: #4d4d4d;

  font-size: 9px;

  font-weight: 500;

}


.note-item h3 {

  color: white;

  font-size: 16px;

  letter-spacing: -0.2px;

  margin-bottom: 8px;

}


.note-item p {

  color: #777;

  font-size: 12px;

  line-height: 1.65;

  font-weight: 400;

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

}


.note-card-bottom {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  margin-top: 15px;

  padding-top: 13px;

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

}


.note-card-stats {

  color: #3f3f3f;

  font-size: 9px;

}


.note-actions {

  display: flex;

  align-items: center;

  gap: 5px;

}


.note-action {

  padding:
    7px 9px;

  border:
    1px solid transparent;

  border-radius: 7px;

  background: transparent;

  color: #666;

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

  font-size: 9px;

  font-weight: 600;

  cursor: pointer;

  transition:
    all 0.2s ease;

}


.note-action:hover {

  border-color:
    var(--cyan-border);

  color: var(--cyan);

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

}


.note-action.danger:hover {

  border-color:
    rgba(255,0,200,0.2);

  color: var(--magenta);

  background:
    rgba(255,0,200,0.03);

}


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

.empty-state {

  min-height: 230px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 35px;

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

  border-radius: 15px;

}


.empty-icon {

  width: 48px;
  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 15px;

  border:
    1px solid
    rgba(196,255,0,0.15);

  border-radius: 14px;

  color: var(--lime);

  background:
    rgba(196,255,0,0.025);

  font-size: 20px;

}


.empty-state h3 {

  font-size: 17px;

  margin-bottom: 8px;

}


.empty-state p {

  max-width: 360px;

  color: #5d5d5d;

  font-size: 11px;

  line-height: 1.6;

  font-weight: 400;

}


.empty-action {

  margin-top: 17px;

  border: none;

  background: transparent;

  color: var(--cyan);

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

  font-size: 11px;

  font-weight: 700;

  cursor: pointer;

}


.empty-action:hover {

  color: var(--lime);

}


.search-empty {

  min-height: 180px;

}


/* =========================================================
   TOAST
   ========================================================= */

.toast {

  position: fixed;

  left: 50%;

  bottom: 25px;

  z-index: 100;

  display: flex;

  align-items: center;

  gap: 9px;

  padding:
    12px 16px;

  border:
    1px solid
    rgba(196,255,0,0.18);

  border-radius: 11px;

  background:
    rgba(12,12,12,0.95);

  box-shadow:
    0 15px 40px
    rgba(0,0,0,0.5);

  backdrop-filter:
    blur(15px);

  transform:
    translate(-50%, 30px);

  opacity: 0;

  pointer-events: none;

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

  color: #aaa;

  font-size: 11px;

}


.toast.show {

  opacity: 1;

  transform:
    translate(-50%, 0);

}


.toast-icon {

  width: 18px;
  height: 18px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background:
    rgba(196,255,0,0.1);

  color: var(--lime);

  font-size: 10px;

}


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

.site-footer {

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

  margin: auto;

  padding:
    30px 0 40px;

  border-top:
    1px solid var(--border);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

}


.footer-brand {

  display: flex;

  flex-direction: column;

  gap: 4px;

}


.footer-brand strong {

  font-size: 10px;

  letter-spacing: 1.5px;

  background:
    var(--brand-gradient);

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

}


.footer-brand span {

  color: var(--lime);

  font-size: 8px;

  letter-spacing: 1px;

}


.footer-copy {

  color: #404040;

  font-size: 9px;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .nav-container {

    width:
      calc(100% - 28px);

    height: 65px;

  }


  .brand-mark {

    position: static;

    transform: none;

  }


  .header-status {

    display: none;

  }


  .back-link span:last-child {

    display: none;

  }


  .main-container {

    width:
      calc(100% - 28px);

    padding:
      48px 0 65px;

  }


  .hero {

    margin-bottom: 35px;

  }


  .hero h1 {

    letter-spacing: -2px;

  }


  .hero > p {

    font-size: 13px;

  }


  .editor-body {

    padding: 22px;

  }


  .note-content {

    min-height: 200px;

  }


  .editor-footer {

    align-items: flex-start;

    flex-direction: column;

  }


  .editor-hint {

    display: none;

  }


  .paywall {

    padding: 25px;

  }


  .pro-features {

    grid-template-columns: 1fr;

  }


  .price-row {

    align-items: stretch;

    flex-direction: column;

  }


  .unlock-btn {

    width: 100%;

    justify-content: center;

  }


  .secure-note {

    text-align: center;

  }


  .notes-panel {

    padding: 19px;

  }


  .note-card-bottom {

    align-items: flex-start;

    flex-direction: column;

  }


  .note-actions {

    width: 100%;

    overflow-x: auto;

  }


  .note-action {

    white-space: nowrap;

  }


  .site-footer {

    align-items: flex-start;

    flex-direction: column;

  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

  .brand-sub {

    display: none;

  }


  .eyebrow-line {

    width: 18px;

  }


  .eyebrow {

    gap: 8px;

    letter-spacing: 1.5px;

  }


  .hero-signature {

    font-size: 8px;

  }


  .notes-header h2 {

    font-size: 20px;

  }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
a:focus-visible {

  outline:
    2px solid var(--lime);

  outline-offset: 3px;

}


::selection {

  background:
    rgba(196,255,0,0.2);

  color: white;

}