:root {
  --ink: #2d1f3f;
  --muted: #7d6b8c;
  --pink: #df77bd;
  --pink-2: #f7c7e7;
  --purple: #c9a4ff;
  --lavender: #f0e5ff;
  --cream: #fff7ed;
  --white: #ffffff;
  --line: rgba(79, 46, 91, .12);
  --shadow: 0 18px 45px rgba(91, 49, 112, .13);
  --shadow-sm: 0 10px 24px rgba(91, 49, 112, .10);
  --success: #54c999;
  --warning: #ffc778;
  --danger: #ff938f;
  --info: #a9d6ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 5%, rgba(247, 199, 231, .7), transparent 28%),
    radial-gradient(circle at 86% 8%, rgba(201, 164, 255, .58), transparent 24%),
    linear-gradient(135deg, #fff8f1 0%, #fff2fa 48%, #f6edff 100%);
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; border: 0; }

.navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 247, 250, .86);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #e676bf, #c36eee);
  color: white;
  font-size: 25px;
  box-shadow: 0 16px 35px rgba(205, 97, 191, .28);
}
.brand strong { display: block; font-size: 20px; line-height: 1.1; }
.brand small { color: var(--muted); font-weight: 700; }
.nav-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.container { max-width: 1240px; margin: 0 auto; padding: 34px 20px 70px; }
.hero { text-align: center; padding: 46px 0 32px; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow-sm);
  color: #664775;
  font-weight: 800;
}
.hero h1 {
  margin: 22px auto 10px;
  font-size: clamp(38px, 7vw, 70px);
  line-height: .98;
  max-width: 940px;
  background: linear-gradient(135deg, #d66fb2, #a16bdc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -1.8px;
}
.hero p { max-width: 720px; margin: 0 auto; color: #655272; font-size: 18px; line-height: 1.7; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(64, 34, 78, .08);
  transition: .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn.primary { color: white; background: linear-gradient(135deg, #df77bd, #bd75f4); border-color: transparent; }
.btn.danger { color: #923d46; background: #ffe4e4; }
.btn.success { color: #286548; background: #d9f7e9; }
.btn.small { padding: 8px 13px; font-size: 13px; }
.btn.ghost { background: transparent; box-shadow: none; }

.panel, .card, .auth-card, .section-card {
  background: rgba(255,255,255,.86);
  border: 1px solid var(--line);
  border-radius: 30px;
  box-shadow: var(--shadow);
}
.section-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 16px;
  margin: 30px 0 18px;
}
.section-head h2 { margin: 0; font-size: 27px; }
.section-head p { margin: 6px 0 0; color: var(--muted); font-weight: 700; }

.search-row { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 24px auto 14px; }
.search-box {
  width: min(680px, 100%);
  position: relative;
}
.search-box input, .input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  border-radius: 18px;
  padding: 14px 16px;
  outline: none;
  color: var(--ink);
  font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.search-box input { padding-left: 46px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); }
textarea { min-height: 92px; resize: vertical; border-radius: 22px; }

.tabs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 16px 0 12px; }
.tab { padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.85); border: 1px solid var(--line); font-weight: 900; color: var(--ink); }
.tab.active { background: var(--pink); color: white; border-color: transparent; }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.artist-card { padding: 24px; min-height: 170px; transition: .22s ease; animation: floatIn .35s ease both; }
.artist-card:hover { transform: translateY(-4px); }
.artist-top { display: flex; align-items: center; gap: 14px; }
.avatar {
  width: 58px; height: 58px;
  border-radius: 20px;
  display: grid; place-items: center;
  font-weight: 1000;
  color: white;
  font-size: 20px;
  background: linear-gradient(135deg, #df77bd, #a873f2);
  box-shadow: 0 12px 26px rgba(200, 100, 210, .25);
  overflow: hidden;
  flex: 0 0 auto;
}
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.profile-picture-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,.55);
}
.profile-avatar-preview {
  width: 78px;
  height: 78px;
  border-radius: 24px;
  font-size: 24px;
}
.public-artist-avatar {
  width: 74px;
  height: 74px;
  margin: 18px auto 0;
  border-radius: 25px;
  font-size: 24px;
}
.artist-card h3, .commission-card h3 { margin: 0 0 4px; font-size: 22px; }
.slug { color: var(--pink); font-weight: 900; }
.artist-stats { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.stat { padding: 9px 13px; background: #fff6fb; border: 1px solid var(--line); border-radius: 999px; font-weight: 900; color: #675071; font-size: 13px; }

.commission-card { padding: 24px; transition: .22s ease; animation: floatIn .35s ease both; cursor: pointer; position: relative; overflow: hidden; }
.commission-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(91, 49, 112, .18); }
.commission-card.completed { background: linear-gradient(135deg, rgba(228,255,242,.96), rgba(255,255,255,.9)); border-color: rgba(84,201,153,.28); }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.card-meta { color: var(--muted); font-weight: 800; margin: 10px 0; }
.card-desc { color: #6b5778; line-height: 1.55; min-height: 48px; }
.badges { display: flex; flex-wrap: wrap; gap: 9px; margin: 14px 0; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-weight: 900; font-size: 13px; }
.badge.waiting { background: #fae8f7; color: #7b5d80; }
.badge.sketch { background: #ffe0b2; color: #835323; }
.badge.lineart { background: #e8ddff; color: #62499b; }
.badge.coloring { background: #ffc8ee; color: #8e3e7c; }
.badge.final { background: #d9eaff; color: #315b90; }
.badge.done { background: #d9f7e9; color: #286548; }
.badge.unpaid { background: #ffd8d5; color: #9a4541; }
.badge.dp { background: #ffe7bd; color: #835323; }
.badge.paid { background: #d7f5e9; color: #216243; }
.badge.private { background: #fff0fa; color: #bc4d99; }
.progress-row { display: flex; justify-content: space-between; align-items: center; font-weight: 900; color: #665371; margin: 12px 0 7px; font-size: 14px; }
.progress-track { height: 11px; background: #f7e7f2; border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #de77bd, #d3a2ff); transition: width .45s ease; }
.note { border-left: 3px solid #f1a6d8; margin-top: 14px; padding-left: 12px; color: var(--muted); font-style: italic; font-weight: 700; }

.queue-list { padding: 10px; display: grid; gap: 12px; }
.queue-item { display: grid; grid-template-columns: 62px 1.2fr 1fr 1fr 1fr; gap: 12px; align-items: center; padding: 16px; background: rgba(255,255,255,.84); border: 1px solid var(--line); border-radius: 22px; }
.queue-number { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 15px; background: var(--lavender); font-weight: 1000; color: #8757c6; }
.queue-label { display: none; color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; }

.kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kanban-col { padding: 16px; border-radius: 26px; border: 1px solid var(--line); background: rgba(255,255,255,.6); min-height: 180px; }
.kanban-col h3 { margin: 0 0 12px; display: flex; justify-content: space-between; }
.mini-card { background: white; border: 1px solid var(--line); border-radius: 20px; padding: 14px; box-shadow: 0 8px 18px rgba(64,34,78,.06); margin-bottom: 12px; }
.mini-card strong { display: block; }
.mini-card small { color: var(--muted); font-weight: 800; }

.auth-wrap { display: grid; grid-template-columns: .95fr 1.05fr; gap: 28px; align-items: center; }
.auth-card { padding: 28px; }
.auth-card h2 { margin: 0 0 10px; font-size: 28px; }
.auth-card p { color: var(--muted); font-weight: 700; }
.form { display: grid; gap: 14px; }
.form label { font-weight: 900; color: #60496d; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.help { color: var(--muted); font-size: 13px; font-weight: 700; }

.admin-layout { display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: start; }
.sidebar { position: sticky; top: 96px; padding: 16px; }
.sidebar button, .sidebar a { width: 100%; justify-content: flex-start; margin-bottom: 10px; }
.admin-main { min-width: 0; }
.table-wrap { overflow: auto; border-radius: 24px; border: 1px solid var(--line); background: rgba(255,255,255,.72); }
table { width: 100%; border-collapse: collapse; min-width: 920px; }
th, td { padding: 16px; text-align: left; border-bottom: 1px solid var(--line); }
th { color: #60496d; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
td { font-weight: 800; color: #574064; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

.detail-modal { position: fixed; inset: 0; z-index: 80; background: rgba(45,31,63,.32); display: grid; place-items: center; padding: 20px; }
.detail-box { width: min(760px, 100%); max-height: 90vh; overflow: auto; padding: 26px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.timeline { display: grid; gap: 12px; margin-top: 18px; }
.timeline-item { display: flex; gap: 12px; align-items: center; padding: 12px; background: rgba(255,255,255,.72); border: 1px solid var(--line); border-radius: 18px; }
.dot { width: 18px; height: 18px; border-radius: 50%; background: #eadcef; border: 4px solid white; box-shadow: 0 0 0 1px var(--line); }
.timeline-item.active .dot { background: var(--pink); }
.timeline-item.done .dot { background: var(--success); }
.empty { text-align: center; padding: 40px 22px; color: var(--muted); font-weight: 800; }
.empty .emoji { font-size: 44px; display: block; margin-bottom: 8px; }

.setup-warning { padding: 20px; border-radius: 24px; background: #fff5d7; border: 1px solid #f5d675; color: #6f5524; font-weight: 800; margin-bottom: 20px; }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 120; max-width: 360px; padding: 14px 16px; border-radius: 18px; background: #2d1f3f; color: white; box-shadow: var(--shadow); transform: translateY(20px); opacity: 0; pointer-events: none; transition: .2s ease; font-weight: 800; }
.toast.show { transform: translateY(0); opacity: 1; }
.footer { text-align: center; color: var(--muted); font-weight: 800; padding: 30px 20px 50px; }

@keyframes floatIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 980px) {
  .grid, .grid.two, .grid.four { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .auth-wrap, .admin-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; display: flex; flex-wrap: wrap; gap: 10px; }
  .sidebar button, .sidebar a { width: auto; margin: 0; }
  .kanban { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .nav-inner { align-items: flex-start; flex-direction: column; }
  .nav-actions { width: 100%; justify-content: flex-start; }
  .grid, .grid.two, .grid.four, .kanban, .form-grid { grid-template-columns: 1fr; }
  .hero { text-align: left; padding-top: 28px; }
  .hero h1 { font-size: 42px; }
  .search-row { justify-content: flex-start; }
  .queue-item { grid-template-columns: 1fr; }
  .queue-label { display: block; }
  .queue-number { width: 100%; }
  .brand-icon { width: 48px; height: 48px; }
  .brand strong { font-size: 18px; }
}



/* Compact mobile improvements */
@media (max-width: 680px) {
  .container {
    padding: 18px 12px 46px;
  }

  .nav-inner {
    padding: 12px 14px;
    gap: 10px;
  }

  .brand-icon {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .brand strong {
    font-size: 16px;
  }

  .brand small {
    font-size: 11px;
  }

  .hero {
    padding: 22px 0 18px;
  }

  .hero h1 {
    font-size: 30px;
    letter-spacing: -.7px;
  }

  .hero p {
    font-size: 14px;
    line-height: 1.55;
  }

  .hero-pill {
    padding: 8px 12px;
    font-size: 12px;
  }

  .section-head {
    align-items: flex-start;
    margin: 20px 0 12px;
  }

  .section-head h2 {
    font-size: 22px;
  }

  .section-head p {
    font-size: 13px;
  }

  .artist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }

  .artist-card {
    padding: 14px;
    min-height: 144px;
    border-radius: 22px;
  }

  .artist-top {
    gap: 9px;
    align-items: flex-start;
  }

  .artist-card .avatar {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    font-size: 15px;
  }

  .artist-card h3 {
    font-size: 16px;
    line-height: 1.15;
  }

  .artist-card .slug {
    font-size: 12px;
  }

  .artist-card .card-desc {
    min-height: 34px;
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .artist-stats {
    gap: 6px;
    margin-top: 12px;
  }

  .stat {
    padding: 7px 9px;
    font-size: 10.5px;
  }

  .commission-card {
    padding: 16px;
    border-radius: 22px;
  }

  .commission-card h3 {
    font-size: 18px;
  }

  .badges {
    gap: 6px;
  }

  .badge {
    padding: 6px 9px;
    font-size: 11px;
  }

  .profile-picture-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .profile-avatar-preview,
  .public-artist-avatar {
    width: 64px;
    height: 64px;
    border-radius: 20px;
  }

  .auth-card,
  .section-card,
  .panel,
  .card {
    border-radius: 22px;
  }
}

@media (max-width: 390px) {
  .artist-grid {
    grid-template-columns: 1fr !important;
  }
}