@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Inter:wght@400;500;600;700;800&display=swap");
/* =========================================================
   ARTVISTA — artvista.css
   Tema  : Galeri Seni (Gallery Theme)
   Dibina: Tailwind CSS v3.4.17
   ---------------------------------------------------------
   Susunan fail:
     1) Font galeri (Cormorant Garamond + Inter)
     2) LEGACY  — CSS asal sistem (struktur & susun atur kekal)
     3) TEMA    — lapisan visual galeri seni yang baharu
     4) TAILWIND— utiliti Tailwind (bg-*, text-*, rounded-*, dll)

   Nota: TIADA fail PHP / JS diubah. Hanya fail CSS ini sahaja.
   ========================================================= */


/* ############ 2) LEGACY — CSS ASAL (STRUKTUR) ############ */

:root{
  --navy-950:#08111c;
  --navy-900:#0d1724;
  --navy-850:#111d2c;
  --navy-800:#172437;

  --gold-600:#c88b21;
  --gold-500:#d9a441;
  --gold-400:#edbe5c;
  --gold-100:#fff5df;

  --purple-600:#6845d6;
  --purple-100:#f0eaff;

  --blue-600:#2f7fd1;
  --blue-100:#eaf4ff;

  --green-600:#25845a;
  --green-100:#e9f7ef;

  --red-600:#d74e55;
  --red-100:#fff0f1;

  --ink:#050505;
  --text:#080808;
  --muted:#111111;
  --line:#e5eaf0;
  --surface:#ffffff;
  --canvas:#f5f7fa;
  --soft:#fafbfc;

  --shadow-sm:0 4px 14px rgba(15,23,42,.045);
  --shadow-md:0 12px 30px rgba(15,23,42,.07);

  --r-sm:10px;
  --r-md:14px;
  --r-lg:18px;
}

*{box-sizing:border-box}
html{background:var(--canvas)}
body{
  margin:0;
  color:var(--ink);
  background:var(--canvas);
  font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
svg{display:block}
.muted{color:var(--muted)}
.grow{flex:1}
.mobile-menu{display:none}

/* =========================
   LOGIN / ROLE ENTRY
   ========================= */
.avx-body{background:#eef2f6}
.avx-login{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,58%) minmax(420px,42%);
  background:#fff;
}
.avx-left{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  background:var(--navy-950);
}
.avx-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.84) contrast(1.03) brightness(.9);
}
.avx-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(5,11,18,.94),rgba(5,11,18,.72) 48%,rgba(5,11,18,.34)),
    linear-gradient(0deg,rgba(4,9,15,.86),transparent 60%);
}
.avx-left-content{
  min-height:100vh;
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  padding:38px clamp(44px,6.5vw,110px);
  color:#fff;
}
.avx-left-logo{
  width:176px;
  height:116px;
  object-fit:contain;
  object-position:left center;
}
.avx-copy{
  max-width:650px;
  margin:auto 0 6.5vh;
}
.avx-kicker,
.avx-panel-kicker{
  font-size:0.86rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.avx-kicker{color:var(--gold-400)}
.avx-copy h1{
  margin:14px 0 20px;
  color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3.2rem,5.1vw,5.35rem);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.025em;
}
.avx-copy p{
  max-width:600px;
  margin:0;
  color:#d1d9e3;
  font-size:0.98rem;
  line-height:1.72;
}
.avx-stats{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.avx-stats>div{
  width:132px;
  min-height:72px;
  padding:12px 15px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:13px;
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(7px);
}
.avx-stats b{
  display:block;
  color:var(--gold-400);
  font-size:1.15rem;
  margin-bottom:2px;
}
.avx-stats span{color:#d4dce6;font-size:0.86rem}

.avx-right{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:40px;
  background:
    radial-gradient(circle at 100% 0,rgba(217,164,65,.08),transparent 24%),
    #fff;
}
.avx-card{width:min(500px,100%)}
.avx-mobile-brand{display:none}
.avx-panel-kicker{color:#a96e0e}
.avx-card h2{
  margin:8px 0 7px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:2rem;
  font-weight:500;
  letter-spacing:-.015em;
}
.avx-sub{
  margin:0 0 24px;
  color:var(--muted);
  font-size:0.88rem;
  line-height:1.6;
}
.avx-role-label{
  margin-bottom:9px;
  color:var(--text);
  font-size:0.86rem;
  font-weight:750;
}
.avx-role-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.avx-role{
  min-height:108px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 3px 10px rgba(15,23,42,.02);
  transition:.18s ease;
}
.avx-role:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.avx-role.gallery:hover{border-color:var(--gold-500)}
.avx-role.artist:hover{border-color:var(--purple-600)}
.avx-role.user:hover{border-color:var(--blue-600)}
.avx-icon{
  width:38px;height:38px;
  display:grid;place-items:center;
  margin-bottom:2px;
  border-radius:11px;
}
.avx-icon svg{width:19px;height:19px}
.avx-role.gallery .avx-icon{background:var(--gold-100);color:#b5740d}
.avx-role.artist .avx-icon{background:var(--purple-100);color:var(--purple-600)}
.avx-role.user .avx-icon{background:var(--blue-100);color:var(--blue-600)}
.avx-role b{font-size:0.88rem}
.avx-role small{font-size:0.80rem;color:var(--muted)}
.avx-demo-box{
  margin-top:18px;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--soft);
}
.avx-demo-row{
  display:flex;justify-content:space-between;gap:20px;
  padding:7px 0;
  font-size:0.86rem;
}
.avx-demo-row+.avx-demo-row{border-top:1px solid #edf0f4}
.avx-demo-row span{color:var(--muted)}
.avx-demo-row b{color:var(--text)}
.avx-note{
  margin-top:14px;
  display:flex;
  gap:10px;
  padding:12px 13px;
  border:1px solid #eadfbd;
  border-radius:13px;
  background:#fbf8ef;
  color:#765512;
}
.avx-note svg{width:18px;flex:0 0 auto}
.avx-note b{display:block;font-size:0.86rem}
.avx-note span{display:block;margin-top:2px;font-size:0.80rem;line-height:1.45}

/* =========================
   APP SHELL
   ========================= */
.app{
  min-height:100vh;
  display:grid;
  grid-template-columns:248px minmax(0,1fr);
}
.sidebar,
.sidebar.artist-theme,
.sidebar.user-theme{
  height:100vh;
  position:sticky;
  top:0;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
  padding:16px 13px;
  color:#eef3f8;
  background:linear-gradient(180deg,var(--navy-900),var(--navy-850) 72%,#101927);
  border-right:0;
  z-index:30;
}
.sidebar::-webkit-scrollbar{width:5px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:10px}

/* Brand: stable icon + HTML text. No broken composite image. */
.sidebar-brand{
  min-height:58px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:2px 5px 8px;
  margin-bottom:8px;
}
.sidebar-brand-mark{
  width:48px;
  height:45px;
  object-fit:contain;
  flex:0 0 48px;
}
.sidebar-brand-copy{min-width:0}
.sidebar-brand-copy strong{
  display:block;
  margin:0;
  color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.55rem;
  font-weight:600;
  line-height:1;
  letter-spacing:-.02em;
}
.sidebar-brand-copy small{
  display:block;
  margin-top:5px;
  color:var(--gold-400);
  font-size:0.80rem;
  font-weight:800;
  letter-spacing:.13em;
  white-space:nowrap;
}
.sidebar-brand-copy span{
  display:block;
  margin-top:3px;
  color:#050505;
  font-size:0.80rem;
  font-weight:700;
  letter-spacing:.06em;
  white-space:nowrap;
}

.nav{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.nav a{
  min-height:41px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 11px;
  border-radius:10px;
  color:#e9eef5;
  font-size:0.86rem;
  font-weight:580;
  transition:.16s ease;
}
.nav a svg{width:17px;height:17px;stroke-width:1.9}
.nav a:hover{background:rgba(255,255,255,.06)}
.sidebar .nav a.active{
  color:#fff;
  background:linear-gradient(135deg,#e7ae37,#cf8f20);
  box-shadow:0 8px 18px rgba(207,143,32,.18);
}
.sidebar.artist-theme .nav a.active{
  background:linear-gradient(135deg,#7653e2,#5e3bc5);
  box-shadow:0 8px 18px rgba(94,59,197,.2);
}
.sidebar.user-theme .nav a.active{
  background:linear-gradient(135deg,#3e88d9,#2d6fb9);
  box-shadow:0 8px 18px rgba(45,111,185,.18);
}
.sidebar-spacer{flex:1;min-height:12px}
.sidebar-bottom{flex:0 0 auto;padding-top:8px}

.sidebar-profile,
.sidebar-gallery{
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:11px;
  background:rgba(255,255,255,.045);
}
.sidebar-gallery{margin-top:7px}
.sidebar-profile b,.sidebar-gallery b{
  display:block;
  color:#fff;
  font-size:0.80rem;
  font-weight:680;
}
.sidebar-profile small,.sidebar-gallery small{
  display:block;
  margin-top:2px;
  color:#050505;
  font-size:0.80rem;
}
.sidebar-role-icon{
  width:34px;height:34px;
  flex:0 0 34px;
  display:grid;place-items:center;
  border:1px solid rgba(237,190,92,.18);
  border-radius:9px;
  color:var(--gold-400);
  background:rgba(237,190,92,.08);
}
.sidebar-role-icon svg{width:17px;height:17px}
.avatar{
  width:36px;height:36px;
  display:grid;place-items:center;
  flex:0 0 36px;
  border-radius:50%;
  background:linear-gradient(135deg,#e9bd60,#bc7d17);
  color:#172033;
  font-size:0.80rem;
  font-weight:800;
}
.artist-theme .avatar{
  background:linear-gradient(135deg,#8c72e8,#6143c8);
  color:#fff;
}
.user-theme .avatar{
  background:linear-gradient(135deg,#72ace8,#3477bc);
  color:#fff;
}
.logout-link{
  min-height:39px;
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:8px;
  padding:9px 11px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:10px;
  color:#e9eef5;
  background:rgba(255,255,255,.045);
  font-size:0.86rem;
  font-weight:680;
}
.logout-link svg{width:16px;height:16px}
.logout-link:hover{
  color:#ffd3d5;
  background:rgba(190,52,60,.16);
  border-color:rgba(231,104,111,.25);
}

/* =========================
   MAIN / TOPBAR
   ========================= */
.main{
  min-width:0;
  padding:22px 26px 38px;
  background:var(--canvas);
}
.user-main{background:#fff}
.topbar{
  min-height:51px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
.top-title h1{
  margin:0 0 3px;
  color:var(--ink);
  font-size:1.62rem;
  line-height:1.1;
  letter-spacing:-.02em;
}
.top-title p{margin:0;color:var(--muted);font-size:0.86rem}
.top-actions{display:flex;align-items:center;gap:9px}
.icon-button{
  width:40px;height:40px;
  display:grid;place-items:center;
  position:relative;
  padding:0;
  border:1px solid var(--line);
  border-radius:11px;
  color:#050505;
  background:#fff;
}
.icon-button svg{width:17px;height:17px}
.notif-dot{
  position:absolute;
  right:-4px;top:-5px;
  min-width:17px;height:17px;
  display:grid;place-items:center;
  padding:0 4px;
  border:2px solid #fff;
  border-radius:999px;
  color:#fff;
  background:#d99a21;
  font-size:0.80rem;
  font-weight:800;
}
.date-chip{
  min-height:40px;
  display:flex;align-items:center;gap:7px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:11px;
  color:#050505;
  background:#fff;
  font-size:0.80rem;
}
.date-chip svg{width:15px;height:15px}
.top-profile{display:flex;align-items:center;gap:8px}
.top-profile b{display:block;font-size:0.86rem}
.top-profile small{display:block;margin-top:1px;color:var(--muted);font-size:0.80rem}
.user-search{
  width:min(470px,39vw);
  min-height:40px;
  display:flex;align-items:center;gap:8px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fbfcfd;
}
.user-search input{
  min-width:0;flex:1;
  border:0;outline:0;
  background:transparent;
  color:var(--text);
  font-size:0.86rem;
}
.user-search svg{width:16px;height:16px;color:#050505}

/* =========================
   COMMON CARDS / GRIDS
   ========================= */
.dashboard-grid{display:grid;gap:14px}
.metric-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
.metric-card,
.panel,
.user-metric,
.auction-card,
.ticket-card,
.module-hero,
.module-card{
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.metric-card{
  min-height:105px;
  padding:14px 15px;
  border-radius:14px;
}
.metric-top{display:flex;align-items:center;gap:11px}
.metric-icon{
  width:43px;height:43px;
  display:grid;place-items:center;
  flex:0 0 43px;
  border-radius:12px;
}
.metric-icon svg{width:20px;height:20px}
.metric-card small{display:block;color:#050505;font-size:0.80rem}
.metric-card strong{
  display:block;
  margin-top:3px;
  color:var(--ink);
  font-size:1.40rem;
  line-height:1.05;
}
.metric-foot{margin-top:11px;color:#050505;font-size:0.80rem}
.up{color:var(--green-600)}
.panel{overflow:hidden;border-radius:15px}
.panel-header{
  min-height:47px;
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 15px;
  border-bottom:1px solid var(--line);
}
.panel-header h3{margin:0;font-size:0.88rem}
.panel-header a{color:#4c57d9;font-size:0.80rem;font-weight:650}
.panel-pad{padding:14px}
.grid-2{display:grid;grid-template-columns:1fr 1.08fr;gap:14px}
.grid-3{display:grid;grid-template-columns:1.15fr .84fr .9fr;gap:14px}
.row-card{
  display:flex;align-items:center;gap:11px;
  padding:9px 0;
  border-bottom:1px solid #eef1f4;
}
.row-card:last-child{border-bottom:0}
.thumb{
  width:68px;height:68px;
  object-fit:cover;
  flex:0 0 68px;
  border-radius:9px;
}
.thumb.small{width:42px;height:42px;flex-basis:42px}
.row-card h4{margin:0 0 4px;font-size:0.86rem}
.row-card p{margin:2px 0;color:var(--muted);font-size:0.80rem}
.badge{
  display:inline-flex;
  align-items:center;
  padding:4px 7px;
  border-radius:8px;
  font-size:0.80rem;
  font-weight:700;
  white-space:nowrap;
}
.badge.green{color:#18734b;background:var(--green-100)}
.badge.blue{color:#2566ad;background:var(--blue-100)}
.badge.gold{color:#a96c08;background:var(--gold-100)}
.badge.gray{color:#050505;background:#f0f2f5}
.badge.red{color:#bd4147;background:var(--red-100)}
.badge.purple{color:#5d3fc0;background:var(--purple-100)}
.table-wrap{overflow:auto}
.data-table{
  width:100%;
  border-collapse:collapse;
  color:#050505;
  font-size:0.80rem;
}
.data-table th{
  padding:9px 10px;
  text-align:left;
  border-bottom:1px solid var(--line);
  color:#050505;
  font-weight:650;
  white-space:nowrap;
}
.data-table td{
  padding:9px 10px;
  border-bottom:1px solid #eef1f4;
  vertical-align:middle;
  white-space:nowrap;
}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:13px}
.quick-action{
  min-height:86px;
  display:grid;
  place-items:center;
  padding:10px;
  border:1px solid var(--line);
  border-radius:11px;
  color:#050505;
  background:#fff;
  text-align:center;
  font-size:0.80rem;
  font-weight:650;
}
.quick-action:hover{border-color:#d7b26a;background:#fffaf0}
.quick-action svg{width:22px;height:22px;margin:0 auto 6px}

/* =========================
   ARTIST
   ========================= */
.artist-summary{display:grid;grid-template-columns:1.16fr .84fr;gap:14px}
.donut-wrap{display:flex;align-items:center;gap:28px;padding:17px}
.donut{
  width:148px;height:148px;
  display:grid;place-items:center;
  position:relative;
  flex:0 0 148px;
  border-radius:50%;
  background:conic-gradient(#6845d6 0 33%,#39a660 33% 58%,#dfa021 58% 83%,#8996a9 83%);
}
.donut:after{
  content:"";
  width:91px;height:91px;
  position:absolute;
  border-radius:50%;
  background:#fff;
}
.donut-center{z-index:2;text-align:center}
.donut-center b{display:block;font-size:1.20rem}
.donut-center small{color:var(--muted);font-size:0.80rem}
.legend{display:flex;flex-direction:column;gap:9px;font-size:0.80rem}
.legend span{display:grid;grid-template-columns:9px 1fr auto;align-items:center;gap:7px}
.legend em{font-style:normal;color:#050505}
.dot{width:8px;height:8px;border-radius:3px}
.ai-card{padding:13px}
.ai-card-body{display:grid;grid-template-columns:96px 1fr;gap:12px}
.ai-card img{width:96px;height:106px;object-fit:cover;border-radius:9px}
.ai-card h4{margin:3px 0;font-size:0.86rem}
.ai-price{margin:10px 0;color:#5433bc;font-size:1rem;font-weight:800}
.btn-purple{
  width:100%;
  display:block;
  padding:9px;
  border:0;
  border-radius:9px;
  color:#fff;
  background:linear-gradient(135deg,#7653e2,#5d38c7);
  font-size:0.80rem;
  font-weight:750;
}
.art-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.art-card img{
  width:100%;
  aspect-ratio:1.35/1;
  object-fit:cover;
  border-radius:9px;
}
.art-card h4{margin:7px 0 2px;font-size:0.80rem}
.art-card p{margin:2px 0;color:var(--muted);font-size:0.80rem}
.art-card strong{font-size:0.86rem}
.activity-list{padding:10px 14px}
.activity-item{
  display:flex;
  gap:8px;
  padding:7px 0;
  color:#050505;
  font-size:0.80rem;
  line-height:1.4;
}
.activity-dot{
  width:19px;height:19px;
  display:grid;place-items:center;
  flex:0 0 19px;
  border-radius:5px;
  color:#fff;
}
.activity-dot svg{width:11px;height:11px}
.activity-item small{display:block;margin-top:2px;color:#050505;font-size:0.80rem}
.artist-banner{
  min-height:104px;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;
  overflow:hidden;
  padding:18px 22px;
  border-radius:14px;
  color:#fff;
  background:
    radial-gradient(circle at 83% 20%,rgba(120,75,229,.55),transparent 26%),
    linear-gradient(120deg,#171145,#27145e 58%,#110b32);
}
.artist-banner h3{margin:0 0 5px;font-size:0.90rem}
.artist-banner p{max-width:570px;margin:0;color:#d9d5ef;font-size:0.80rem;line-height:1.5}
.artist-banner button{
  flex:0 0 auto;
  padding:8px 12px;
  border:0;
  border-radius:8px;
  color:#fff;
  background:#7249dd;
  font-size:0.80rem;
  font-weight:700;
}

/* =========================
   USER
   ========================= */
.user-hero{
  min-height:255px;
  position:relative;
  overflow:hidden;
  border-radius:15px;
  background:#111;
}
.user-hero img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  content:url('../images/user-gallery-hero.jpg');
}
.user-hero:after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,9,12,.9),rgba(7,9,12,.32) 63%,rgba(7,9,12,.06));
}
.user-hero-content{
  position:relative;
  z-index:2;
  padding:31px 34px;
  color:#fff;
}
.user-hero-content small{
  color:var(--gold-400);
  font-size:0.80rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.user-hero-content h2{
  margin:7px 0 5px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.90rem;
  font-weight:600;
}
.user-hero-content p{margin:0;font-size:0.86rem}
.gold-btn{
  display:inline-flex;
  margin-top:10px;
  padding:9px 14px;
  border:0;
  border-radius:9px;
  color:#fff;
  background:linear-gradient(135deg,#e5ae39,#cb8b1d);
  font-size:0.80rem;
  font-weight:750;
}
.user-section-title{
  display:flex;align-items:center;justify-content:space-between;
  margin:15px 0 9px;
}
.user-section-title h3{margin:0;font-size:0.88rem}
.user-section-title a,.link-gold{color:#c78618;font-size:0.80rem;font-weight:700}
.user-metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:11px;
}
.user-metric{
  padding:13px;
  border-radius:13px;
}
.user-metric .row{display:flex;align-items:center;gap:9px}
.user-metric .metric-icon{width:37px;height:37px;flex-basis:37px}
.user-metric small{color:var(--muted);font-size:0.80rem}
.user-metric strong{display:block;margin:8px 0 1px;font-size:1.10rem}
.link-gold{display:block;margin-top:7px}
.user-art-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.user-art-card{position:relative}
.user-art-card img{
  width:100%;
  aspect-ratio:1.32/1;
  object-fit:cover;
  border-radius:9px;
}
.heart{
  width:25px;height:25px;
  display:grid;place-items:center;
  position:absolute;
  right:7px;top:7px;
  border-radius:50%;
  color:#050505;
  background:rgba(255,255,255,.87);
}
.heart svg{width:14px;height:14px}
.user-art-card h4{margin:7px 0 2px;font-size:0.80rem}
.user-art-card p{margin:0;color:#050505;font-size:0.80rem}
.user-art-card b{display:block;margin-top:4px;font-size:0.86rem}
.user-bottom{display:grid;grid-template-columns:.9fr 1.1fr;gap:12px}
.auction-card,.ticket-card{padding:13px;border-radius:13px}
.auction-body{display:flex;gap:11px}
.auction-body img{width:86px;height:102px;object-fit:cover;border-radius:9px}
.countdown{display:flex;gap:4px;margin-top:6px}
.countdown span{
  padding:4px 5px;
  border-radius:6px;
  background:#f4f6f8;
  text-align:center;
  font-size:0.80rem;
}
.outline-gold{
  width:100%;
  margin-top:8px;
  padding:7px 10px;
  border:1px solid #d9a441;
  border-radius:8px;
  color:#a66c0e;
  background:#fff;
  font-size:0.80rem;
  font-weight:700;
}
.ticket-info{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;font-size:0.80rem}
.ticket-info span{display:block;margin-bottom:3px;color:#050505;font-size:0.80rem}

/* =========================
   MODULE PLACEHOLDERS
   ========================= */
.module-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:19px;
  margin-bottom:14px;
  border-radius:15px;
}
.module-hero h2{margin:0 0 5px;font-size:1.15rem}
.module-hero p{margin:0;color:var(--muted);font-size:0.86rem}
.module-action{
  padding:9px 13px;
  border:0;
  border-radius:9px;
  color:#fff;
  background:#344154;
  font-size:0.80rem;
  font-weight:750;
}
.gallery-accent .module-action{background:#cb8b1d}
.artist-accent .module-action{background:#6845d6}
.user-accent .module-action{background:#2f7fd1}
.module-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.module-card{min-height:132px;padding:15px;border-radius:14px}
.module-card svg{width:23px;height:23px;margin-bottom:12px;color:#050505}
.module-card h3{margin:0 0 5px;font-size:0.86rem}
.module-card p{margin:0;color:#050505;font-size:0.80rem;line-height:1.55}

/* =========================
   FOOTER / FOCUS
   ========================= */
footer{
  display:flex;
  justify-content:space-between;
  padding:22px 3px 3px;
  color:#050505;
  font-size:0.80rem;
}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid rgba(217,164,65,.72);
  outline-offset:3px;
}

/* =========================
   RESPONSIVE
   ========================= */
@media(max-width:1180px){
  .metric-grid{grid-template-columns:repeat(3,1fr)}
  .grid-2,.grid-3,.artist-summary{grid-template-columns:1fr}
  .user-art-grid{grid-template-columns:repeat(3,1fr)}
  .module-cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .avx-login{grid-template-columns:1fr}
  .avx-left{display:none}
  .avx-right{min-height:100vh;padding:26px}
  .avx-mobile-brand{display:flex;justify-content:center;margin-bottom:20px}
  .avx-mobile-brand img{width:150px;height:110px;object-fit:contain}

  .app{grid-template-columns:1fr}
  .sidebar{
    width:248px;
    left:-270px;
    position:fixed;
    transition:left .2s ease;
    box-shadow:20px 0 45px rgba(0,0,0,.15);
  }
  .sidebar.open{left:0}
  .mobile-menu{display:grid}
  .main{padding:16px}
  .date-chip{display:none}
  .user-search{width:min(390px,44vw)}
  .metric-grid,.user-metrics{grid-template-columns:repeat(2,1fr)}
  .art-grid,.user-art-grid{grid-template-columns:repeat(2,1fr)}
  .user-bottom{grid-template-columns:1fr}
}
@media(max-width:560px){
  .avx-right{padding:18px}
  .avx-role-grid{grid-template-columns:1fr}
  .avx-role{
    min-height:68px;
    display:grid;
    grid-template-columns:42px 1fr;
    grid-template-rows:auto auto;
    justify-items:start;
    padding:9px 11px;
  }
  .avx-icon{grid-row:1/3}
  .avx-role small{grid-column:2}

  .metric-grid,.user-metrics,.module-cards{grid-template-columns:1fr}
  .art-grid,.user-art-grid{grid-template-columns:1fr 1fr}
  .top-profile>div:last-child{display:none}
  .user-search{display:none}
  .donut-wrap{flex-direction:column;align-items:flex-start}
  .artist-banner{align-items:flex-start;flex-direction:column}
}


/* =========================================================
   COMPLETE USER SCOPE — ArtVista
   ========================================================= */
.user-flash{display:flex;align-items:center;gap:9px;margin:-4px 0 14px;padding:11px 13px;border:1px solid #cfe9da;border-radius:11px;color:#196b49;background:#effaf4;font-size:0.86rem}
.user-flash svg{width:17px;height:17px}
.page-intro{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:15px}
.page-intro h2{margin:0 0 4px;font-family:Georgia,"Times New Roman",serif;font-size:1.55rem;font-weight:600}
.page-intro p{margin:0;color:var(--muted);font-size:0.86rem}
.primary-user-btn,.secondary-user-btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 13px;border-radius:9px;font-size:0.80rem;font-weight:750;transition:.16s ease}
.primary-user-btn{border:1px solid #c88b21;color:#fff;background:linear-gradient(135deg,#dfa939,#c78a20)}
.primary-user-btn:hover{filter:brightness(.97);transform:translateY(-1px)}
.secondary-user-btn{border:1px solid var(--line);color:#050505;background:#fff}
.secondary-user-btn:hover{border-color:#c8d0db;background:#fbfcfd}
.primary-user-btn svg,.secondary-user-btn svg{width:15px;height:15px}
.primary-user-btn.full,.secondary-user-btn.full{width:100%}
.button-link{display:flex;justify-content:center;text-align:center}
.back-link{display:inline-flex;align-items:center;gap:6px;margin-bottom:13px;color:#050505;font-size:0.80rem;font-weight:650}
.back-link svg{width:14px;height:14px}
.content-card{padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm)}
.content-card h3{margin:0 0 11px;font-size:0.88rem}
.content-card p{color:var(--muted);font-size:0.80rem;line-height:1.6}
.detail-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(250px,.7fr);gap:14px}
.detail-hero{min-height:320px;position:relative;overflow:hidden;margin-bottom:14px;border-radius:15px;background:#111}
.detail-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.detail-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,9,13,.88),rgba(6,9,13,.2) 65%,rgba(6,9,13,.06))}
.detail-content{position:absolute;left:28px;bottom:28px;z-index:2;color:#fff}
.detail-content h2{margin:9px 0 5px;font-family:Georgia,"Times New Roman",serif;font-size:2rem}
.detail-content p{margin:0;color:#e0e6ed;font-size:0.86rem}
.booking-side .primary-user-btn{width:100%;margin-top:10px}
.exhibition-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.exhibition-card{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm)}
.exhibition-card>img{width:100%;height:190px;object-fit:cover}
.exhibition-card-body{padding:14px}
.exhibition-card-body h3{margin:9px 0 4px;font-size:0.88rem}
.exhibition-card-body p{margin:0;color:#050505;font-size:0.80rem}
.exhibition-card-body small{display:block;margin-top:4px;color:#050505;font-size:0.80rem}
.exhibition-card-body>a{display:flex;align-items:center;gap:5px;margin-top:12px;color:#b5760d;font-size:0.80rem;font-weight:700}
.exhibition-card-body>a svg{width:13px;height:13px}
.mini-art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.mini-art-grid a{display:block;font-size:0.80rem}
.mini-art-grid img{width:100%;height:105px;object-fit:cover;border-radius:8px;margin-bottom:5px}
.filter-bar{display:flex;align-items:center;gap:10px;margin-bottom:13px;padding:10px;border:1px solid var(--line);border-radius:13px;background:#fff}
.filter-search{min-height:39px;display:flex;align-items:center;gap:8px;flex:1;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:#fbfcfd}
.filter-search svg{width:16px;height:16px;color:#050505}
.filter-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;font-size:0.86rem}
.filter-bar select{min-height:39px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#050505;font-size:0.80rem}
.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.catalog-card{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm)}
.catalog-image-wrap{position:relative}
.catalog-image-wrap img{width:100%;height:210px;object-fit:cover}
.badge.floating{position:absolute;left:10px;top:10px;box-shadow:0 4px 10px rgba(0,0,0,.08)}
.catalog-body{padding:13px}
.catalog-body h3{margin:0 0 3px;font-size:0.86rem}
.catalog-body>p{margin:0;color:var(--muted);font-size:0.80rem}
.catalog-meta{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:11px;padding-top:10px;border-top:1px solid #edf0f3}
.catalog-meta span{color:#050505;font-size:0.80rem}
.catalog-meta b{font-size:0.86rem}
.card-action{display:flex;align-items:center;gap:5px;margin-top:11px;color:#a96f0e;font-size:0.80rem;font-weight:700}
.card-action svg{width:13px;height:13px}
.artwork-detail-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);gap:15px}
.artwork-viewer,.artwork-info{border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:var(--shadow-sm)}
.artwork-viewer{overflow:hidden}
.artwork-viewer>img{width:100%;height:560px;object-fit:cover}
.artwork-view-footer{display:flex;gap:9px;padding:11px 13px;border-top:1px solid var(--line)}
.artwork-view-footer span{padding:5px 8px;border-radius:7px;background:#f4f6f8;color:#050505;font-size:0.80rem}
.artwork-info{padding:19px}
.artwork-info h2{margin:10px 0 10px;font-family:Georgia,"Times New Roman",serif;font-size:1.80rem}
.artist-inline{display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:#fafbfc}
.artist-inline>svg{width:18px;height:18px;color:#6a49cf}
.artist-inline small{display:block;color:#050505;font-size:0.80rem}
.artist-inline b{display:block;margin-top:1px;font-size:0.80rem}
.artwork-description{margin:14px 0!important;color:#050505!important}
.info-list{display:grid;gap:0;margin:13px 0}
.info-list>div{display:flex;justify-content:space-between;gap:15px;padding:9px 0;border-bottom:1px solid #edf0f3}
.info-list span{color:#050505;font-size:0.80rem}
.info-list b{font-size:0.80rem;text-align:right}
.action-stack{display:grid;gap:8px}
.action-stack form{margin:0}
.certificate-card{display:flex;gap:10px;margin-top:13px;padding:12px;border-radius:11px;background:#f8f5ec;border:1px solid #eee1bd;color:#6f5114}
.certificate-card>svg{width:20px;flex:0 0 20px}
.certificate-card b{font-size:0.80rem}
.certificate-card p{margin:3px 0!important;font-size:0.80rem!important;color:#856b35!important}
.certificate-card code{font-size:0.80rem}

.artist-directory{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.artist-directory-card{display:grid;grid-template-columns:155px 1fr;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm)}
.artist-directory-card>img{width:155px;height:100%;min-height:190px;object-fit:cover}
.artist-directory-card>div{padding:15px}
.artist-directory-card h3{margin:8px 0 5px;font-size:0.90rem}
.artist-directory-card p{margin:0;color:var(--muted);font-size:0.80rem;line-height:1.55}
.artist-directory-card footer{display:flex;justify-content:space-between;padding:12px 0 0;margin-top:12px;border-top:1px solid #edf0f3;color:#050505;font-size:0.80rem}
.artist-directory-card footer b{display:flex;align-items:center;gap:5px;color:#9e690e}
.artist-directory-card footer svg{width:12px;height:12px}
.artist-profile-hero{display:flex;align-items:center;gap:20px;margin-bottom:14px;padding:18px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:var(--shadow-sm)}
.artist-profile-hero>img{width:170px;height:150px;object-fit:cover;border-radius:12px}
.artist-profile-hero h2{margin:8px 0 4px;font-family:Georgia,"Times New Roman",serif;font-size:1.65rem}
.artist-profile-hero p{margin:0;color:var(--muted);font-size:0.80rem}
.artist-stat{display:flex;align-items:center;gap:8px;margin-top:12px}
.artist-stat b{font-size:1.10rem;color:#5c3ebc}
.artist-stat span{font-size:0.80rem;color:#050505}
.bidding-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.65fr);gap:14px}
.bid-rule{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid #eadfbf;border-radius:9px;background:#fbf7ed;color:#765815;font-size:0.80rem}
.bid-rule svg{width:14px;height:14px}
.live-bid-card{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(360px,1.1fr);overflow:hidden;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:var(--shadow-sm)}
.live-bid-image{position:relative;min-height:510px}
.live-bid-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.live-dot{position:absolute;left:12px;top:12px;padding:5px 7px;border-radius:7px;background:#db4048;color:#fff;font-size:0.80rem;font-weight:850;letter-spacing:.08em}
.live-bid-content{padding:20px}
.live-bid-content h2{margin:10px 0 3px;font-family:Georgia,"Times New Roman",serif;font-size:1.65rem}
.live-bid-content>p{margin:0;color:var(--muted);font-size:0.80rem}
.bid-numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}
.bid-numbers>div{padding:10px;border-radius:10px;background:#f7f8fa}
.bid-numbers span{display:block;color:#050505;font-size:0.80rem}
.bid-numbers b{display:block;margin-top:3px;font-size:0.86rem}
.countdown.large span{padding:7px 9px}
.countdown.large b{font-size:0.86rem}
.bid-form{margin-top:17px;padding-top:15px;border-top:1px solid #edf0f3}
.bid-form label{display:block;margin-bottom:7px;font-size:0.80rem;font-weight:700}
.bid-form>div{display:grid;grid-template-columns:34px 1fr auto;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.bid-form>div>span{display:grid;place-items:center;height:40px;background:#f4f6f8;color:#050505;font-size:0.80rem}
.bid-form input{height:40px;border:0;outline:0;padding:0 10px;min-width:0}
.bid-form .primary-user-btn{height:40px;border-radius:0}
.bid-history{height:max-content}
.bid-history-row{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid #edf0f3}
.avatar.mini{width:29px;height:29px;flex-basis:29px;font-size:0.80rem}
.bid-history-row b{display:block;font-size:0.80rem}
.bid-history-row small{display:block;color:#050505;font-size:0.80rem}
.bid-history-row strong{font-size:0.80rem}
.bidding-note{display:flex;gap:8px;margin-top:12px;padding:10px;border-radius:9px;background:#f5f8fb;color:#050505}
.bidding-note svg{width:17px;flex:0 0 17px}
.bidding-note p{margin:0;font-size:0.80rem}
.booking-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:14px}
.booking-form h3{margin-bottom:14px}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.form-grid.two{grid-template-columns:repeat(2,1fr)}
.form-grid label,.full-label{display:grid;gap:5px}
.form-grid label span,.full-label span{font-size:0.80rem;font-weight:680;color:#050505}
.form-grid input,.form-grid select,.full-label textarea{width:100%;min-height:39px;padding:0 10px;border:1px solid var(--line);border-radius:9px;outline:0;background:#fff;color:#050505;font-size:0.80rem}
.full-label{margin-top:10px}
.full-label textarea{min-height:85px;padding:10px;resize:vertical}
.visit-summary{display:flex;align-items:center;justify-content:space-between;margin:15px 0;padding:12px;border-radius:11px;background:#f8f6ef;border:1px solid #eee3c8}
.visit-summary>div{display:flex;align-items:center;gap:9px}
.visit-summary svg{width:19px;color:#c78a20}
.visit-summary b{display:block;font-size:0.80rem}
.visit-summary small{display:block;color:#050505;font-size:0.80rem}
.gallery-info-card>img{width:100%;height:145px;object-fit:cover;border-radius:9px;margin-bottom:11px}
.gallery-info-card>p{display:flex;align-items:center;gap:6px;margin:6px 0}
.gallery-info-card>p svg{width:14px;height:14px}
.gallery-rules{margin-top:12px;padding-top:11px;border-top:1px solid #edf0f3}
.gallery-rules b{font-size:0.80rem}
.gallery-rules ul{padding-left:17px;color:#050505;font-size:0.80rem;line-height:1.7}
.vvip-hero{min-height:210px;display:flex;align-items:center;margin-bottom:14px;padding:26px;border-radius:15px;color:#fff;background:linear-gradient(120deg,rgba(8,16,27,.98),rgba(15,28,45,.92)),url('../images/user-gallery-hero.jpg') center/cover}
.vvip-hero>div{max-width:650px}
.vvip-hero h2{margin:9px 0 6px;font-family:Georgia,"Times New Roman",serif;font-size:1.80rem}
.vvip-hero p{margin:0;color:#d0d9e3;font-size:0.80rem;line-height:1.6}
.vvip-features{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}
.vvip-features span{display:flex;align-items:center;gap:5px;padding:6px 8px;border:1px solid rgba(255,255,255,.13);border-radius:8px;background:rgba(255,255,255,.06);font-size:0.80rem}
.vvip-features svg{width:13px;height:13px;color:#edbe5c}
.vvip-status-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid #edf0f3}
.vvip-status-row>div{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#fff4df;color:#bd7d12}
.vvip-status-row svg{width:17px}
.vvip-status-row b{display:block;font-size:0.80rem}
.vvip-status-row small{display:block;margin-top:2px;color:#050505;font-size:0.80rem}
.vvip-status-row em{font-style:normal}
.purchase-list,.ticket-list{display:grid;gap:11px}
.purchase-card{display:grid;grid-template-columns:135px 1fr auto;align-items:center;gap:15px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm)}
.purchase-card>img{width:135px;height:105px;object-fit:cover;border-radius:9px}
.purchase-card h3{margin:7px 0 3px;font-size:0.86rem}
.purchase-card p{margin:0;color:var(--muted);font-size:0.80rem}
.purchase-meta{display:flex;gap:22px;margin-top:10px}
.purchase-meta small{display:block;color:#050505;font-size:0.80rem}
.purchase-meta b{display:block;margin-top:2px;font-size:0.80rem}
.purchase-actions{display:grid;gap:7px;min-width:110px}
.text-action{display:flex;align-items:center;justify-content:center;gap:5px;padding:8px;border:0;background:transparent;color:#050505;font-size:0.80rem}
.text-action svg{width:13px;height:13px}
.e-ticket{display:grid;grid-template-columns:180px 1fr 150px;align-items:stretch;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm)}
.ticket-brand{display:flex;align-items:center;gap:8px;padding:16px;background:#0d1724;color:#fff}
.ticket-brand b{display:block;font-family:Georgia,"Times New Roman",serif;font-size:1rem}
.ticket-brand small{display:block;color:#050505;font-size:0.80rem}
.ticket-main{padding:15px}
.ticket-main h3{margin:8px 0 10px;font-size:0.88rem}
.ticket-data{display:flex;gap:25px}
.ticket-data small{display:block;color:#050505;font-size:0.80rem}
.ticket-data b{display:block;margin-top:2px;font-size:0.80rem}
.ticket-code{display:grid;place-items:center;align-content:center;padding:13px;border-left:1px dashed #d7dde5;text-align:center}
.mock-qr{width:52px;height:52px;display:grid;place-items:center;margin-bottom:5px;border:1px solid var(--line);border-radius:7px}
.mock-qr svg{width:32px;height:32px}
.ticket-code b{font-size:0.80rem}
.ticket-code small{margin-top:2px;color:#050505;font-size:0.80rem}
.ticket-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:18px}
.outline-gold.compact{width:auto;margin:0;padding:6px 9px}
.profile-layout{display:grid;grid-template-columns:minmax(240px,.65fr) minmax(0,1.35fr);gap:14px}
.profile-summary{text-align:center}
.profile-avatar-large{width:82px;height:82px;display:grid;place-items:center;margin:4px auto 11px;border-radius:50%;color:#fff;background:linear-gradient(135deg,#4c91d8,#2d6fb9);font-size:1.25rem;font-weight:800}
.profile-summary h3{margin:0 0 3px}
.profile-summary>p{margin:0}
.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.profile-stats>div{padding:9px;border-radius:9px;background:#f7f8fa}
.profile-stats b{display:block;font-size:0.88rem}
.profile-stats span{font-size:0.80rem;color:#050505}
.profile-form .primary-user-btn{margin-top:14px}
.settings-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.settings-layout>.save-settings{grid-column:1/-1;justify-self:end}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:11px 0;border-bottom:1px solid #edf0f3}
.setting-row>div{display:flex;align-items:center;gap:9px}
.setting-row svg{width:17px;color:#050505}
.setting-row b{display:block;font-size:0.80rem}
.setting-row small{display:block;margin-top:2px;color:#050505;font-size:0.80rem}
.setting-row input{width:17px;height:17px;accent-color:#c88b21}
.setting-info{display:flex;gap:9px;padding:11px 0;border-bottom:1px solid #edf0f3}
.setting-info>span{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:9px;background:#f4f6f8;color:#050505}
.setting-info svg{width:17px}
.setting-info b{font-size:0.80rem}
.setting-info p{margin:3px 0 0}
.heart{border:0;cursor:pointer}
.heart.liked{color:#d64a57;background:#fff0f1}
.heart.liked svg{fill:currentColor}
@media(max-width:1180px){
  .catalog-grid,.exhibition-grid{grid-template-columns:repeat(2,1fr)}
  .artwork-detail-grid,.bidding-layout,.booking-layout{grid-template-columns:1fr}
  .live-bid-card{grid-template-columns:.85fr 1.15fr}
  .artist-directory{grid-template-columns:1fr}
}
@media(max-width:820px){
  .detail-layout,.profile-layout,.settings-layout{grid-template-columns:1fr}
  .settings-layout>.save-settings{grid-column:auto;justify-self:stretch}
  .purchase-card{grid-template-columns:95px 1fr}
  .purchase-card>img{width:95px;height:90px}
  .purchase-actions{grid-column:1/-1;grid-template-columns:1fr 1fr}
  .e-ticket{grid-template-columns:1fr}
  .ticket-code{border-left:0;border-top:1px dashed #d7dde5}
  .live-bid-card{grid-template-columns:1fr}
  .live-bid-image{min-height:330px}
}
@media(max-width:560px){
  .catalog-grid,.exhibition-grid{grid-template-columns:1fr}
  .form-grid,.form-grid.two{grid-template-columns:1fr}
  .artwork-viewer>img{height:380px}
  .artist-directory-card{grid-template-columns:105px 1fr}
  .artist-directory-card>img{width:105px;min-height:170px}
  .purchase-meta,.ticket-data{flex-direction:column;gap:6px}
}


/* =========================================================
   GOOGLE-CALENDAR-LIKE BOOKING VIEW — USER SCOPE
   ========================================================= */
.calendar-note,.ticket-policy-banner{
  display:flex;align-items:flex-start;gap:10px;
  margin-bottom:13px;padding:11px 13px;
  border:1px solid #d8e3f0;border-radius:11px;
  background:#f6f9fd;color:#050505;
}
.calendar-note.vvip{border-color:#e5d8fb;background:#faf7ff;color:#5e477e}
.calendar-note>svg,.ticket-policy-banner>svg{width:18px;height:18px;flex:0 0 18px;margin-top:1px}
.calendar-note b,.ticket-policy-banner b{display:block;font-size:0.86rem}
.calendar-note span,.ticket-policy-banner span{display:block;margin-top:2px;color:#050505;font-size:0.80rem;line-height:1.5}

.gcal-shell{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  min-height:760px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.gcal-side{padding:14px;border-right:1px solid var(--line);background:#fbfcfd}
.gcal-side-head{display:grid;grid-template-columns:32px 1fr 32px;align-items:center;gap:6px;margin-bottom:12px}
.gcal-side-head strong{text-align:center;font-size:0.86rem}
.icon-button.mini{width:31px!important;height:31px!important;border-radius:8px}
.icon-button.mini svg{width:14px!important;height:14px!important}
.gcal-mini-week,.gcal-mini-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.gcal-mini-week{margin-bottom:4px}
.gcal-mini-week span{text-align:center;color:#050505;font-size:0.80rem;font-weight:750}
.gcal-mini-grid button,.gcal-mini-grid>span{
  aspect-ratio:1;
  display:grid;place-items:center;
  border:0;border-radius:50%;
  background:transparent;color:#050505;
  font-size:0.80rem;
  position:relative;
}
.gcal-mini-grid button{cursor:pointer}
.gcal-mini-grid button:hover{background:#eef3f8}
.gcal-mini-grid button.selected{color:#fff;background:#3478c7;font-weight:800}
.gcal-mini-grid button.has-event:after{
  content:"";width:4px;height:4px;position:absolute;bottom:2px;border-radius:50%;background:#d79a25;
}
.gcal-mini-grid button.vvip-event-day:after{background:#7653e2}
.gcal-mini-grid button.selected:after{background:#fff}
.gcal-legend{display:grid;gap:7px;margin-top:18px;padding-top:13px;border-top:1px solid #e8edf2}
.gcal-legend>b{font-size:0.80rem}
.gcal-legend span{display:flex;align-items:center;gap:7px;color:#050505;font-size:0.80rem}
.legend-dot{width:9px;height:9px;border-radius:3px;background:#3c84d1}
.legend-dot.visit{background:#3c84d1}.legend-dot.used{background:#9aa5b3}.legend-dot.vvip{background:#7450d7}.legend-dot.pending{background:#d69b2c}

.gcal-main{min-width:0;background:#fff}
.gcal-toolbar{
  min-height:58px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--line);
}
.gcal-toolbar-left{display:flex;align-items:center;gap:7px;min-width:0}
.gcal-toolbar-left h3{margin:0 0 0 5px;font-size:0.86rem;white-space:nowrap}
.secondary-user-btn.compact{min-height:31px;padding:6px 9px;font-size:0.80rem}
.gcal-selects{display:flex;gap:7px}
.gcal-selects select{height:33px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#050505;font-size:0.80rem}
.gcal-day-head{
  display:grid;grid-template-columns:67px 1fr;
  min-height:64px;border-bottom:1px solid var(--line);
}
.gcal-time-label{display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;color:#050505;font-size:0.80rem;border-right:1px solid #eef1f4}
.gcal-day-name{display:flex;align-items:center;gap:8px;padding:8px 14px}
.gcal-day-name small{color:#050505;font-size:0.80rem;font-weight:800}
.gcal-day-name b{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#3478c7;font-size:0.86rem}
.vvip-calendar .gcal-day-name b{background:#6845d6}

.gcal-timeline{height:638px;overflow-y:auto;scrollbar-width:thin}
.gcal-hour{
  width:100%;min-height:56px;
  display:grid;grid-template-columns:67px minmax(0,1fr);
  padding:0;border:0;border-bottom:1px solid #eef1f4;
  background:#fff;text-align:left;
  cursor:pointer;
}
.gcal-hour:hover .gcal-hour-lane{background:#fafcff}
.gcal-hour-label{
  display:block;padding:8px 9px 0 0;
  border-right:1px solid #eef1f4;
  color:#050505;text-align:right;font-size:0.80rem;
}
.gcal-hour-lane{
  min-height:56px;display:flex;align-items:flex-start;gap:6px;padding:4px 6px;position:relative;
  background-image:linear-gradient(to right,transparent 49.8%,rgba(236,240,244,.45) 50%,transparent 50.2%);
}
.gcal-event{
  min-width:180px;max-width:330px;
  display:grid;gap:1px;
  padding:6px 8px;border-radius:7px;
  border-left:3px solid #2874c6;
  color:#1f5f9d;background:#eaf4ff;
  pointer-events:none;
}
.gcal-event.used{border-color:#8e99a7;color:#050505;background:#f0f2f5}
.gcal-event.vvip{border-color:#6741c4;color:#5739a5;background:#f0eaff}
.gcal-event b{font-size:0.80rem}.gcal-event span{font-size:0.80rem}.gcal-event small{font-size:0.80rem;color:inherit;opacity:.75}

.visit-policy-grid,.vvip-rule-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:13px}
.policy-card{display:flex;gap:9px!important;padding:12px!important}
.policy-card>svg{width:19px;height:19px;flex:0 0 19px;color:#3478c7}
.vvip-rule-grid .policy-card>svg{color:#6845d6}
.policy-card h3{margin:0 0 3px!important;font-size:0.80rem!important}
.policy-card p{margin:0!important;font-size:0.80rem!important}

.booking-modal{display:none;position:fixed;inset:0;z-index:1000}
.booking-modal.open{display:block}
.booking-modal-backdrop{position:absolute;inset:0;background:rgba(7,15,25,.52);backdrop-filter:blur(3px)}
.booking-modal-card{
  width:min(560px,calc(100% - 30px));max-height:calc(100vh - 38px);overflow:auto;
  position:absolute;right:24px;top:19px;
  border:1px solid rgba(255,255,255,.25);border-radius:16px;
  background:#fff;box-shadow:0 24px 70px rgba(5,12,20,.25);
}
.booking-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:17px 18px;border-bottom:1px solid var(--line)}
.booking-modal-head h3{margin:4px 0 3px;font-family:Georgia,"Times New Roman",serif;font-size:1.15rem}
.booking-modal-head p{margin:0;color:#050505;font-size:0.80rem}
.modal-kicker{color:#ac7517;font-size:0.80rem;font-weight:850;letter-spacing:.12em}
.booking-modal-form{padding:18px}
.modal-open{overflow:hidden}
.single-use-alert,.vvip-time-preview{
  display:flex;align-items:center;gap:9px;
  margin:13px 0;padding:10px 11px;border-radius:10px;
  background:#f4f8fd;border:1px solid #dce7f3;color:#48617c;
}
.single-use-alert>svg,.vvip-time-preview>svg{width:18px;height:18px;flex:0 0 18px}
.single-use-alert b,.vvip-time-preview b{display:block;font-size:0.80rem}
.single-use-alert span,.vvip-time-preview span{display:block;color:#050505;font-size:0.80rem}
.vvip-time-preview{background:#f8f4ff;border-color:#e6dcf8;color:#60479b}
.booking-price{display:flex;justify-content:space-between;align-items:center;margin:12px 0;padding:11px 0;border-top:1px solid #edf0f3;border-bottom:1px solid #edf0f3}
.booking-price span{font-size:0.80rem;color:#050505}.booking-price b{font-size:0.90rem}
.vvip-btn{background:linear-gradient(135deg,#7958d9,#5d3db9)!important;border-color:#6845d6!important}

.ticket-policy-banner{margin-bottom:13px}
.ticket-validity{display:flex;align-items:center;gap:6px;margin-top:10px;padding:7px 8px;border-radius:8px;background:#f6f8fa;color:#050505;font-size:0.80rem}
.ticket-validity svg{width:14px;height:14px}
.ticket-checkin-form{margin-top:8px}
.used-ticket{opacity:.78}
.mock-qr.disabled{color:#050505;background:#f3f4f6}
.used-label{display:flex;align-items:center;gap:4px;margin-top:7px;color:#9b4a50;font-size:0.80rem;font-weight:700}
.used-label svg{width:12px;height:12px}

@media(max-width:1000px){
  .gcal-shell{grid-template-columns:190px minmax(0,1fr)}
  .visit-policy-grid,.vvip-rule-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .gcal-shell{grid-template-columns:1fr}
  .gcal-side{border-right:0;border-bottom:1px solid var(--line)}
  .gcal-toolbar{align-items:flex-start;flex-direction:column}
  .gcal-toolbar-left{flex-wrap:wrap}
  .gcal-timeline{height:570px}
  .booking-modal-card{right:15px;top:15px}
}


/* =========================================================
   ART VISTA — CLEAN MONTH/DAY CALENDAR BOOKING
   ========================================================= */
.artvista-booking-layout{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(330px,.92fr);
  gap:16px;
  align-items:start;
}

.artvista-calendar-card,
.artvista-booking-form-card{
  border:1px solid #dce4ec;
  border-radius:16px;
  background:#fff;
  box-shadow:0 6px 20px rgba(15,23,42,.05);
}

.artvista-calendar-card{overflow:hidden}

.calendar-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:17px 18px 12px;
}
.calendar-card-top h3{
  margin:0 0 3px;
  color:#192435;
  font-size:0.90rem;
}
.calendar-card-top p{
  margin:0;
  color:#050505;
  font-size:0.80rem;
}
.calendar-badge{
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  color:#4b52c8;
  background:#eef0ff;
  font-size:0.80rem;
  font-weight:750;
  white-space:nowrap;
}
.calendar-badge svg{width:14px;height:14px}
.calendar-badge.vvip{
  color:#6543c2;
  background:#f2edff;
}

.calendar-toolbar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding:10px 16px 12px;
}
.calendar-toolbar-left,
.calendar-toolbar-right{
  display:flex;
  align-items:center;
  gap:6px;
}
.calendar-toolbar-right{justify-content:flex-end}
.calendar-nav-btn,
.calendar-today-btn{
  height:34px;
  border:0;
  border-radius:9px;
  color:#fff;
  background:#24374a;
  display:grid;
  place-items:center;
}
.calendar-nav-btn{width:38px}
.calendar-nav-btn svg{width:16px;height:16px}
.calendar-today-btn{
  padding:0 12px;
  font-size:0.80rem;
  font-weight:650;
  background:#7c8997;
}
.calendar-current-title{
  color:#202c3e;
  font-size:1rem;
  font-weight:800;
  text-align:center;
}
.calendar-select{
  height:34px;
  padding:0 8px;
  border:1px solid #dfe5ec;
  border-radius:8px;
  background:#fff;
  color:#050505;
  font-size:0.80rem;
}
.calendar-view-switch{
  display:flex;
  overflow:hidden;
  border-radius:9px;
  background:#24374a;
}
.calendar-view-switch button{
  min-width:46px;
  height:34px;
  border:0;
  color:#dfe7ef;
  background:transparent;
  font-size:0.80rem;
}
.calendar-view-switch button.active{
  color:#fff;
  background:#132332;
}
.calendar-view-switch.vvip-switch button.active{
  background:#6444c2;
}

.calendar-weekdays{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  border-top:1px solid #dfe5eb;
  border-bottom:1px solid #dfe5eb;
}
.calendar-weekdays span{
  padding:9px 5px;
  border-right:1px solid #e2e7ec;
  color:#253244;
  text-align:center;
  font-size:0.80rem;
  font-weight:750;
}
.calendar-weekdays span:last-child{border-right:0}

.calendar-month-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  grid-auto-rows:minmax(82px,1fr);
}
.calendar-day-cell{
  position:relative;
  min-height:82px;
  padding:8px;
  border:0;
  border-right:1px solid #e3e8ed;
  border-bottom:1px solid #e3e8ed;
  background:#fff;
  text-align:right;
  cursor:pointer;
  transition:.12s ease;
}
.calendar-day-cell:nth-child(7n){border-right:0}
.calendar-day-cell:hover{
  background:#f7faff;
  box-shadow:inset 0 0 0 2px #d8e7f8;
}
.calendar-day-cell.outside{
  color:#050505;
  background:#fbfcfd;
}
.calendar-day-cell.selected{
  background:#fff8dc;
  box-shadow:inset 0 0 0 2px #efd990;
}
.calendar-day-cell.vvip-selected{
  background:#f5f0ff;
  box-shadow:inset 0 0 0 2px #d9c9fa;
}
.day-number{
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:50%;
  font-size:0.80rem;
}
.calendar-day-cell.selected .day-number{
  color:#fff;
  background:#d8a332;
}
.calendar-day-cell.vvip-selected .day-number{
  background:#6947c8;
}

.calendar-day-view{
  border-top:1px solid #dfe5eb;
}
.calendar-day-heading{
  display:grid;
  grid-template-columns:74px 1fr;
  min-height:54px;
  border-bottom:1px solid #dfe5eb;
}
.calendar-time-spacer{
  border-right:1px solid #e4e9ee;
}
.calendar-day-heading>div:last-child{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
}
.calendar-day-heading small{
  color:#050505;
  font-size:0.80rem;
  font-weight:800;
}
.calendar-day-heading strong{
  color:#fff;
  background:#3478c7;
  border-radius:999px;
  padding:6px 10px;
  font-size:0.80rem;
}
.vvip-day-heading strong{background:#6845d6}

.calendar-hour-list{
  height:630px;
  overflow-y:auto;
}
.calendar-hour-row{
  width:100%;
  min-height:56px;
  display:grid;
  grid-template-columns:74px 1fr;
  padding:0;
  border:0;
  border-bottom:1px solid #edf0f3;
  background:#fff;
  text-align:left;
  cursor:pointer;
}
.calendar-hour-label{
  padding:8px 9px 0 0;
  border-right:1px solid #e5e9ee;
  color:#050505;
  text-align:right;
  font-size:0.80rem;
}
.calendar-hour-lane{
  min-height:56px;
  display:flex;
  align-items:center;
  padding:0 12px;
  color:#050505;
}
.calendar-hour-row:hover .calendar-hour-lane{
  background:#f8fbff;
  color:#3478c7;
}
.hour-click-hint{
  opacity:0;
  font-size:0.80rem;
  transition:.12s ease;
}
.calendar-hour-row:hover .hour-click-hint{opacity:1}

.artvista-booking-form-card{
  position:sticky;
  top:20px;
  padding:18px;
}
.booking-form-heading{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:16px;
}
.booking-form-heading .form-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:0 0 38px;
  border-radius:10px;
  color:#2f78c8;
  background:#eaf4ff;
}
.booking-form-heading .form-icon.vvip{
  color:#6845d6;
  background:#f1ecff;
}
.booking-form-heading svg{width:18px;height:18px}
.booking-form-heading h3{
  margin:0 0 3px;
  color:#1d2939;
  font-size:0.90rem;
}
.booking-form-heading p{
  margin:0;
  color:#050505;
  font-size:0.80rem;
  line-height:1.45;
}

.calendar-booking-form{
  display:grid;
  gap:12px;
}
.calendar-form-field{
  display:grid;
  gap:5px;
}
.calendar-form-field>span{
  color:#293649;
  font-size:0.80rem;
  font-weight:750;
}
.calendar-form-field input,
.calendar-form-field select,
.calendar-form-field textarea{
  width:100%;
  min-height:42px;
  padding:0 11px;
  border:1px solid #cfd9e4;
  border-radius:10px;
  outline:0;
  color:#273447;
  background:#fff;
  font-size:0.80rem;
}
.calendar-form-field textarea{
  padding:10px 11px;
  resize:vertical;
}
.calendar-form-field input:focus,
.calendar-form-field select:focus,
.calendar-form-field textarea:focus{
  border-color:#78a9dc;
  box-shadow:0 0 0 3px rgba(52,120,199,.09);
}
.vvip-form-card .calendar-form-field input:focus,
.vvip-form-card .calendar-form-field select:focus,
.vvip-form-card .calendar-form-field textarea:focus{
  border-color:#9d83e6;
  box-shadow:0 0 0 3px rgba(104,69,214,.08);
}
.calendar-form-field small{
  color:#050505;
  font-size:0.80rem;
  line-height:1.35;
}

.ticket-price-box{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:11px;
  border-radius:10px;
  background:#f7f9fb;
}
.ticket-price-box>div{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ticket-price-box>div:last-child{text-align:right}
.ticket-price-box span{
  color:#050505;
  font-size:0.80rem;
}
.ticket-price-box b{
  color:#050505;
  font-size:0.80rem;
}
.ticket-price-box strong{
  color:#b57913;
  font-size:0.90rem;
}

.booking-rule-box{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:11px;
  border-radius:10px;
  color:#45617e;
  background:#f1f6fc;
  border:1px solid #d9e5f2;
}
.booking-rule-box.vvip-rule{
  color:#604795;
  background:#f7f3ff;
  border-color:#e3daf7;
}
.booking-rule-box>svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
}
.booking-rule-box b{
  display:block;
  font-size:0.80rem;
}
.booking-rule-box p{
  margin:2px 0 0;
  color:inherit;
  opacity:.84;
  font-size:0.80rem;
  line-height:1.45;
}

.calendar-submit-btn{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:0;
  border-radius:10px;
  color:#fff;
  background:linear-gradient(135deg,#dca636,#c48619);
  font-size:0.80rem;
  font-weight:800;
  box-shadow:0 8px 18px rgba(196,134,25,.16);
}
.calendar-submit-btn svg{width:16px;height:16px}
.calendar-submit-btn.vvip-submit{
  background:linear-gradient(135deg,#7654d8,#5b3ab7);
  box-shadow:0 8px 18px rgba(91,58,183,.16);
}

.vvip-duration-preview{
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px;
  border:1px solid #e4dbf7;
  border-radius:10px;
  color:#5c4690;
  background:#faf7ff;
}
.vvip-duration-preview svg{
  width:18px;
  height:18px;
}
.vvip-duration-preview span{
  display:block;
  color:#050505;
  font-size:0.80rem;
}
.vvip-duration-preview b{
  display:block;
  margin-top:2px;
  font-size:0.80rem;
}

@media(max-width:1100px){
  .artvista-booking-layout{
    grid-template-columns:1fr;
  }
  .artvista-booking-form-card{
    position:static;
  }
}
@media(max-width:760px){
  .calendar-toolbar{
    grid-template-columns:1fr;
  }
  .calendar-current-title{
    order:-1;
    text-align:left;
  }
  .calendar-toolbar-right{
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .calendar-month-grid{
    grid-auto-rows:minmax(64px,1fr);
  }
  .calendar-day-cell{
    min-height:64px;
  }
  .calendar-weekdays span{
    font-size:0.80rem;
  }
}


/* =========================================================
   USER BIDDING — LIST ACTIVE AUCTIONS FIRST, BID AFTER SELECT
   ========================================================= */
.bidding-page-intro{align-items:flex-start}
.bidding-summary-strip{
  display:grid;
  grid-template-columns:minmax(230px,1.3fr) repeat(2,minmax(140px,.5fr));
  gap:10px;
  margin-bottom:14px;
}
.bidding-summary-main,
.bidding-summary-stat{
  min-height:84px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 15px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.summary-icon{
  width:42px;height:42px;
  display:grid;place-items:center;
  flex:0 0 42px;
  border-radius:11px;
  color:#6845d6;
  background:#f1ebff;
}
.summary-icon svg{width:20px;height:20px}
.bidding-summary-main small,
.bidding-summary-stat small{
  display:block;
  color:#050505;
  font-size:0.80rem;
}
.bidding-summary-main strong{
  display:block;
  margin-top:3px;
  font-size:1.02rem;
}
.bidding-summary-stat{
  display:block;
}
.bidding-summary-stat b{
  display:block;
  margin-top:7px;
  color:#273447;
  font-size:0.88rem;
}
.status-live{
  display:flex!important;
  align-items:center;
  gap:6px;
  color:#25845a!important;
}
.status-live i{
  width:7px;height:7px;
  border-radius:50%;
  background:#30a76e;
  box-shadow:0 0 0 4px rgba(48,167,110,.11);
}

.active-auction-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.active-auction-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  box-shadow:var(--shadow-sm);
  transition:.18s ease;
}
.active-auction-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(15,23,42,.08);
}
.auction-image{
  height:210px;
  display:block;
  position:relative;
  overflow:hidden;
  background:#101826;
}
.auction-image img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .25s ease;
}
.active-auction-card:hover .auction-image img{transform:scale(1.025)}
.auction-live-badge{
  position:absolute;
  left:10px;top:10px;
  display:flex;align-items:center;gap:5px;
  padding:5px 7px;
  border-radius:7px;
  color:#fff;
  background:#db4550;
  font-size:0.80rem;
  font-weight:850;
  letter-spacing:.06em;
}
.auction-live-badge i{
  width:6px;height:6px;
  border-radius:50%;
  background:#fff;
  animation:auctionPulse 1.4s infinite;
}
@keyframes auctionPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(.75)}
}
.auction-countdown-overlay{
  position:absolute;
  left:10px;right:10px;bottom:10px;
  padding:7px 9px;
  border-radius:8px;
  color:#fff;
  background:rgba(8,17,28,.78);
  backdrop-filter:blur(5px);
  text-align:center;
  font-size:0.80rem;
  font-weight:720;
}
.auction-countdown-overlay.ended{background:rgba(90,98,108,.84)}
.active-auction-body{padding:13px}
.active-auction-body h3{
  margin:8px 0 2px;
  color:#1d2938;
  font-size:0.88rem;
}
.active-auction-body>p{
  margin:0;
  color:#050505;
  font-size:0.80rem;
}
.auction-card-stats{
  display:grid;
  grid-template-columns:1.1fr 1fr .75fr;
  gap:7px;
  margin-top:12px;
}
.auction-card-stats>div{
  padding:8px;
  border-radius:9px;
  background:#f7f8fa;
}
.auction-card-stats small{
  display:block;
  color:#050505;
  font-size:0.80rem;
}
.auction-card-stats b{
  display:block;
  margin-top:3px;
  color:#050505;
  font-size:0.80rem;
}
.auction-card-stats>div:first-child b{color:#5f3fc1;font-size:0.86rem}
.auction-card-footer{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid #edf0f3;
}
.auction-card-footer>div small{
  display:block;
  color:#050505;
  font-size:0.80rem;
}
.auction-card-footer>div b{
  display:block;
  margin-top:2px;
  color:#050505;
  font-size:0.80rem;
  font-weight:650;
}
.auction-card-footer .primary-user-btn{
  min-height:34px;
  padding:7px 9px;
  white-space:nowrap;
  font-size:0.80rem;
}
.bidding-help-card{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:13px;
  padding:12px 13px;
  border:1px solid #ddd7f0;
  border-radius:12px;
  color:#59457d;
  background:#faf8ff;
}
.bidding-help-card>svg{width:18px;height:18px;flex:0 0 18px}
.bidding-help-card b{display:block;font-size:0.80rem}
.bidding-help-card p{margin:3px 0 0;color:#050505;font-size:0.80rem;line-height:1.5}
.empty-bidding-state{
  padding:50px 20px;
  border:1px dashed #d5dce5;
  border-radius:15px;
  background:#fff;
  text-align:center;
}
.empty-bidding-state>svg{width:38px;height:38px;margin:0 auto 10px;color:#8b75ca}
.empty-bidding-state h3{margin:0 0 5px;font-size:0.88rem}
.empty-bidding-state p{margin:0 auto 13px;max-width:420px;color:#050505;font-size:0.80rem}

.auction-detail-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:13px;
}
.auction-detail-heading h2{
  margin:8px 0 3px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.55rem;
}
.auction-detail-heading p{
  margin:0;
  color:#050505;
  font-size:0.80rem;
}
.auction-detail-heading p a{color:#6544c5;font-weight:650}
.auction-detail-countdown{
  min-width:190px;
  padding:10px 12px;
  border:1px solid #e5def5;
  border-radius:11px;
  background:#faf8ff;
  text-align:right;
}
.auction-detail-countdown small{
  display:block;
  color:#050505;
  font-size:0.80rem;
}
.auction-detail-countdown strong{
  display:block;
  margin-top:3px;
  color:#6043b8;
  font-size:0.86rem;
}
.auction-detail-countdown strong.ended{color:#9c4b51}

.auction-detail-layout{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);
  gap:14px;
}
.auction-art-preview,
.auction-bid-panel{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.auction-art-preview>img{
  width:100%;
  height:510px;
  object-fit:cover;
}
.auction-art-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:11px 13px;
}
.auction-art-meta span{
  display:flex;align-items:center;gap:5px;
  padding:5px 7px;
  border-radius:7px;
  color:#050505;
  background:#f5f7f9;
  font-size:0.80rem;
}
.auction-art-meta svg{width:13px;height:13px}
.auction-bid-panel{padding:18px}
.auction-price-block{
  padding-bottom:14px;
  border-bottom:1px solid #edf0f3;
}
.auction-price-block small{
  display:block;
  color:#050505;
  font-size:0.80rem;
}
.auction-price-block strong{
  display:block;
  margin:4px 0 2px;
  color:#5b3cb6;
  font-size:1.65rem;
}
.auction-price-block span{
  color:#050505;
  font-size:0.80rem;
}
.auction-bid-info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:13px 0;
}
.auction-bid-info-grid>div{
  padding:9px;
  border-radius:9px;
  background:#f7f8fa;
}
.auction-bid-info-grid small{
  display:block;
  color:#050505;
  font-size:0.80rem;
}
.auction-bid-info-grid b{
  display:block;
  margin-top:3px;
  color:#050505;
  font-size:0.80rem;
}
.auction-start-bid-form{
  margin-top:12px;
  padding-top:13px;
  border-top:1px solid #edf0f3;
}
.auction-start-bid-form label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
}
.auction-start-bid-form label span{
  font-size:0.80rem;
  font-weight:750;
}
.auction-start-bid-form label small{
  color:#050505;
  font-size:0.80rem;
}
.auction-bid-input{
  display:grid;
  grid-template-columns:42px 1fr;
  overflow:hidden;
  margin-bottom:8px;
  border:1px solid #d8dfe7;
  border-radius:9px;
}
.auction-bid-input span{
  display:grid;
  place-items:center;
  color:#050505;
  background:#f3f5f7;
  font-size:0.80rem;
  font-weight:700;
}
.auction-bid-input input{
  height:43px;
  padding:0 11px;
  border:0;
  outline:0;
  color:#273447;
  font-size:0.86rem;
  font-weight:700;
}
.auction-bid-submit{
  width:100%;
  min-height:43px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:0;
  border-radius:9px;
  color:#fff;
  background:linear-gradient(135deg,#7552db,#5937b8);
  font-size:0.80rem;
  font-weight:800;
  box-shadow:0 8px 18px rgba(89,55,184,.16);
}
.auction-bid-submit svg{width:16px;height:16px}
.auction-bid-warning{
  display:flex;
  gap:7px;
  margin-top:10px;
  padding:9px;
  border-radius:8px;
  color:#735c2b;
  background:#fbf7ec;
}
.auction-bid-warning svg{width:15px;height:15px;flex:0 0 15px}
.auction-bid-warning p{margin:0;font-size:0.80rem;line-height:1.45}

.auction-info-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:14px;
}
.auction-art-info>p{
  margin-top:0;
}
.auction-history-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:2px;
}
.auction-history-title h3{margin:0}
.auction-history-title span{
  color:#050505;
  font-size:0.80rem;
}

@media(max-width:1150px){
  .active-auction-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .auction-detail-layout{grid-template-columns:1fr}
  .auction-art-preview>img{height:430px}
}
@media(max-width:760px){
  .bidding-summary-strip{grid-template-columns:1fr 1fr}
  .bidding-summary-main{grid-column:1/-1}
  .active-auction-grid{grid-template-columns:1fr}
  .auction-detail-heading{align-items:flex-start;flex-direction:column}
  .auction-detail-countdown{width:100%;text-align:left}
  .auction-info-layout{grid-template-columns:1fr}
  .auction-art-preview>img{height:360px}
}


/* =========================================================
   PEREKA SENI — logical portrait/profile presentation
   ========================================================= */
.artist-directory-clean{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.artist-directory-profile{
  display:grid!important;
  grid-template-columns:126px minmax(0,1fr)!important;
  min-height:190px;
  overflow:hidden;
}
.artist-directory-photo{
  min-height:100%;
  overflow:hidden;
  background:#eef2f6;
}
.artist-directory-photo img{
  width:100%!important;
  height:100%!important;
  min-height:190px!important;
  object-fit:cover!important;
  object-position:center 35%!important;
}
.artist-directory-content{
  padding:15px!important;
}
.artist-directory-content h3{
  margin:8px 0 4px!important;
  font-size:0.90rem!important;
}
.artist-directory-content>p{
  display:-webkit-box;
  overflow:hidden;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
}
.artist-directory-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  margin-top:10px;
  color:#050505;
}
.artist-directory-meta span{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:0.80rem;
}
.artist-directory-meta svg{
  width:12px;
  height:12px;
}
.artist-directory-content footer{
  margin-top:11px!important;
}

.artist-profile-clean{
  gap:22px!important;
  align-items:center!important;
  padding:20px!important;
}
.artist-profile-photo{
  width:142px;
  height:142px;
  flex:0 0 142px;
  overflow:hidden;
  border-radius:50%;
  border:4px solid #fff;
  box-shadow:0 0 0 1px #e2e7ed,0 8px 22px rgba(15,23,42,.09);
  background:#edf1f5;
}
.artist-profile-photo img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 35%!important;
  border-radius:0!important;
}
.artist-profile-copy{
  min-width:0;
  flex:1;
}
.artist-profile-copy h2{
  margin:8px 0 3px!important;
  font-size:1.70rem!important;
}
.artist-specialty{
  margin:0!important;
  color:#050505!important;
  font-size:0.86rem!important;
}
.artist-profile-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-top:9px;
  color:#050505;
}
.artist-profile-meta span{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:0.80rem;
}
.artist-profile-meta svg{
  width:13px;
  height:13px;
}
.artist-profile-stats{
  display:flex;
  gap:8px;
  margin-top:13px;
}
.artist-profile-stats>div{
  min-width:105px;
  padding:9px 10px;
  border:1px solid #e7ebef;
  border-radius:9px;
  background:#f8f9fb;
}
.artist-profile-stats b{
  display:block;
  color:#314054;
  font-size:0.86rem;
}
.artist-profile-stats span{
  display:block;
  margin-top:2px;
  color:#050505;
  font-size:0.80rem;
}
.artist-section-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin:18px 0 9px;
  padding-top:14px;
  border-top:1px solid #edf0f3;
}
.artist-section-heading h3{
  margin:0 0 2px!important;
}
.artist-section-heading small{
  color:#050505;
  font-size:0.80rem;
}
.artist-section-heading a{
  color:#a96e0d;
  font-size:0.80rem;
  font-weight:700;
}
.artist-work-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.artist-work-card{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:10px;
  padding:8px;
  border:1px solid #e8ecf0;
  border-radius:10px;
  background:#fff;
}
.artist-work-card img{
  width:92px;
  height:88px;
  object-fit:cover;
  border-radius:8px;
}
.artist-work-card h4{
  margin:6px 0 2px;
  font-size:0.80rem;
}
.artist-work-card p{
  margin:0 0 4px!important;
  font-size:0.80rem!important;
}
.artist-work-card b{
  font-size:0.80rem;
}
.artist-auth-note{
  display:flex;
  gap:8px;
  margin-top:12px;
  padding:10px;
  border:1px solid #e6ddc4;
  border-radius:9px;
  color:#71591e;
  background:#faf7ef;
}
.artist-auth-note>svg{
  width:17px;
  height:17px;
  flex:0 0 17px;
}
.artist-auth-note b{
  display:block;
  font-size:0.80rem;
}
.artist-auth-note p{
  margin:3px 0 0!important;
  color:#89713a!important;
  font-size:0.80rem!important;
}
.artist-empty-work{
  padding:20px;
  border:1px dashed #d9dfe6;
  border-radius:10px;
  color:#050505;
  text-align:center;
  font-size:0.80rem;
}

@media(max-width:980px){
  .artist-directory-clean{grid-template-columns:1fr}
}
@media(max-width:620px){
  .artist-directory-profile{grid-template-columns:95px minmax(0,1fr)!important}
  .artist-directory-photo img{min-height:180px!important}
  .artist-profile-clean{align-items:flex-start!important}
  .artist-profile-photo{width:100px;height:100px;flex-basis:100px}
  .artist-profile-stats{flex-wrap:wrap}
  .artist-work-grid{grid-template-columns:1fr}
}


/* =========================================================
   ARTVISTA USER PROTOTYPE — DATABASE / LOGIN POLISH
   ========================================================= */
.prototype-login-card{max-width:480px}
.prototype-login-form{display:grid;gap:15px;margin-top:22px}
.prototype-login-form label>span{display:block;margin-bottom:6px;color:#334155;font-size:0.86rem;font-weight:750}
.prototype-input{
  min-height:48px;display:grid;grid-template-columns:38px 1fr 38px;align-items:center;
  overflow:hidden;border:1px solid #dbe2ea;border-radius:12px;background:#fff;
  transition:.16s ease;
}
.prototype-input:focus-within{border-color:#d7a139;box-shadow:0 0 0 3px rgba(215,161,57,.10)}
.prototype-input>svg{width:17px;height:17px;margin:auto;color:#050505}
.prototype-input input{height:46px;min-width:0;border:0;outline:0;background:transparent;color:#263244;font-size:0.88rem}
.prototype-input button{width:38px;height:46px;display:grid;place-items:center;border:0;background:transparent;color:#050505}
.prototype-input button svg{width:16px;height:16px}
.prototype-login-submit{
  min-height:48px;display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:2px;border:0;border-radius:12px;color:#fff;
  background:linear-gradient(135deg,#dfa939,#c58920);
  box-shadow:0 10px 24px rgba(197,137,32,.18);
  font-size:0.86rem;font-weight:800;
}
.prototype-login-submit svg{width:16px;height:16px}
.prototype-login-error{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 12px;border:1px solid #f1caca;border-radius:10px;color:#9f383e;background:#fff5f5;font-size:0.80rem}
.prototype-login-error svg{width:16px;height:16px}
.prototype-demo-credentials{margin-top:16px;padding:12px;border:1px solid #e8dfc5;border-radius:11px;background:#fbf8ef;color:#71531b}
.prototype-demo-credentials>div{display:flex;align-items:flex-start;gap:9px}
.prototype-demo-credentials svg{width:17px;height:17px;flex:0 0 17px}
.prototype-demo-credentials b{display:block;font-size:0.80rem}
.prototype-demo-credentials small{display:block;margin-top:2px;font-size:0.80rem}
.prototype-setup-link{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:11px;padding:9px;border:1px solid #d8e2ef;border-radius:10px;color:#42658b;background:#f5f9fd;font-size:0.80rem;font-weight:700}
.prototype-setup-link svg{width:15px;height:15px}

.user-flash.error{border-color:#f2cccc!important;color:#a23e45!important;background:#fff5f5!important}
.empty-dashboard-card{min-height:132px;display:flex;flex-direction:column;justify-content:space-between}
.empty-dashboard-card>div{display:flex;align-items:center;gap:9px}
.empty-dashboard-card>div>svg{width:24px;height:24px;color:#d09a2e}
.empty-dashboard-card b{display:block}
.empty-dashboard-card small{display:block;margin-top:3px;color:#050505;font-size:0.80rem}

.prototype-history-section{margin-top:16px}
.prototype-vvip-list{display:grid;gap:8px}
.prototype-vvip-row{
  display:flex;align-items:center;gap:10px;padding:11px 12px;
  border:1px solid var(--line);border-radius:11px;background:#fff;
}
.prototype-vvip-icon{width:36px;height:36px;display:grid;place-items:center;flex:0 0 36px;border-radius:9px;color:#6845d6;background:#f1ecff}
.prototype-vvip-icon svg{width:17px;height:17px}
.prototype-vvip-row b{display:block;font-size:0.80rem}
.prototype-vvip-row small{display:block;margin-top:2px;color:#050505;font-size:0.80rem}

/* Artwork images: use the original high-resolution assets without browser blur. */
.user-art-card img,.catalog-image-wrap img,.artwork-viewer>img,.auction-image img,.auction-art-preview>img,
.exhibition-card>img,.mini-art-grid img,.artist-directory-card>img{
  image-rendering:auto;
  backface-visibility:hidden;
}


/* =========================================================
   USER CART + CHECKOUT FLOW
   ========================================================= */
.top-checkout-btn{
  min-height:40px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 10px;
  border:1px solid #ead9ad;
  border-radius:11px;
  color:#7a5511;
  background:#fff9ea;
  font-size:0.80rem;
  font-weight:800;
  white-space:nowrap;
  transition:.16s ease;
}
.top-checkout-btn:hover{
  border-color:#d9ad4f;
  background:#fff5d9;
  transform:translateY(-1px);
}
.top-checkout-btn>svg{width:16px;height:16px}
.top-checkout-btn>b{
  min-width:21px;
  height:21px;
  display:grid;
  place-items:center;
  padding:0 5px;
  border-radius:999px;
  color:#fff;
  background:#cf8e1d;
  font-size:0.80rem;
}

.catalog-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:11px;
}
.catalog-actions .card-action{margin-top:0}
.catalog-actions form{margin:0}
.catalog-cart-btn{
  min-height:31px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:6px 9px;
  border:1px solid #ddb257;
  border-radius:8px;
  color:#8d5b08;
  background:#fff9eb;
  font-size:0.80rem;
  font-weight:750;
  white-space:nowrap;
}
.catalog-cart-btn:hover{background:#fff3d4}
.catalog-cart-btn.added{
  color:#26704f;
  border-color:#cfe5d8;
  background:#eff9f3;
}
.catalog-cart-btn svg{width:13px;height:13px}
.cart-ready-btn{
  background:linear-gradient(135deg,#26815b,#1c6d4b)!important;
  border-color:#227451!important;
}
.favorite-card-actions{
  display:grid;
  gap:7px;
  margin-top:10px;
}
.favorite-card-actions form{margin:0}

/* Checkout page */
.checkout-intro{align-items:center}
.checkout-count-pill{
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border:1px solid #ead9ad;
  border-radius:999px;
  color:#805812;
  background:#fff9e9;
  font-size:0.80rem;
  font-weight:800;
}
.checkout-count-pill svg{width:14px;height:14px}

.checkout-layout{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(330px,.72fr);
  gap:15px;
  align-items:start;
}
.checkout-items-panel,
.checkout-summary-card{
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.checkout-items-panel{overflow:hidden}
.checkout-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:15px;
  padding:15px 16px;
  border-bottom:1px solid var(--line);
}
.checkout-panel-head h3{margin:0 0 3px;font-size:0.88rem}
.checkout-panel-head p{margin:0;color:#050505;font-size:0.80rem}
.checkout-panel-head>span{
  padding:5px 8px;
  border-radius:8px;
  color:#73500f;
  background:#fff5dd;
  font-size:0.80rem;
  font-weight:750;
}

.checkout-cart-list{display:grid}
.checkout-cart-item{
  display:grid;
  grid-template-columns:118px minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  padding:13px 15px;
  border-bottom:1px solid #edf0f3;
}
.checkout-cart-item:last-child{border-bottom:0}
.checkout-cart-image{
  width:118px;
  height:92px;
  display:block;
  overflow:hidden;
  border-radius:9px;
  background:#eef1f4;
}
.checkout-cart-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.checkout-cart-copy h3{
  margin:6px 0 2px;
  color:#202c3d;
  font-size:0.86rem;
}
.checkout-cart-copy p{
  margin:0;
  color:#050505;
  font-size:0.80rem;
}
.checkout-cart-copy small{
  display:block;
  margin-top:5px;
  color:#050505;
  font-size:0.80rem;
}
.checkout-cart-price{
  min-width:105px;
  text-align:right;
}
.checkout-cart-price>strong{
  display:block;
  color:#273447;
  font-size:0.86rem;
}
.checkout-cart-price form{margin-top:10px}
.checkout-cart-price button{
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:0;
  color:#a3474d;
  background:transparent;
  font-size:0.80rem;
  font-weight:700;
}
.checkout-cart-price button svg{width:13px;height:13px}

.checkout-summary-card{
  position:sticky;
  top:20px;
  padding:17px;
}
.checkout-summary-title{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding-bottom:13px;
  border-bottom:1px solid #edf0f3;
}
.checkout-summary-icon{
  width:38px;height:38px;
  display:grid;place-items:center;
  flex:0 0 38px;
  border-radius:10px;
  color:#b47813;
  background:#fff4dd;
}
.checkout-summary-icon svg{width:18px;height:18px}
.checkout-summary-title h3{margin:0 0 3px;font-size:0.86rem}
.checkout-summary-title p{margin:0;color:#050505;font-size:0.80rem}

.checkout-summary-lines{
  display:grid;
  gap:9px;
  padding:14px 0;
  border-bottom:1px solid #edf0f3;
}
.checkout-summary-lines>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.checkout-summary-lines span{color:#050505;font-size:0.80rem}
.checkout-summary-lines b{color:#050505;font-size:0.80rem}

.checkout-grand-total{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  padding:14px 0;
}
.checkout-grand-total span{font-size:0.80rem;font-weight:750}
.checkout-grand-total strong{
  color:#a86d0b;
  font-size:1.15rem;
}
.checkout-buyer{
  padding:10px 11px;
  border-radius:10px;
  background:#f7f8fa;
}
.checkout-buyer small{display:block;color:#050505;font-size:0.80rem}
.checkout-buyer b{display:block;margin-top:2px;font-size:0.80rem}
.checkout-buyer span{display:block;margin-top:1px;color:#050505;font-size:0.80rem}

.checkout-demo-payment{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:11px 0;
  padding:10px;
  border:1px solid #d9e5f1;
  border-radius:10px;
  color:#48627d;
  background:#f4f8fc;
}
.checkout-demo-payment>svg{width:17px;height:17px;flex:0 0 17px}
.checkout-demo-payment b{display:block;font-size:0.80rem}
.checkout-demo-payment p{margin:2px 0 0;font-size:0.80rem;line-height:1.45}

.checkout-buy-btn{
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:0;
  border-radius:10px;
  color:#fff;
  background:linear-gradient(135deg,#d9a43b,#bf7f14);
  box-shadow:0 9px 20px rgba(191,127,20,.17);
  font-size:0.80rem;
  font-weight:850;
}
.checkout-buy-btn svg{width:15px;height:15px}
.checkout-continue-link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin-top:10px;
  color:#050505;
  font-size:0.80rem;
  font-weight:650;
}
.checkout-continue-link svg{width:12px;height:12px}
.checkout-empty{min-height:310px}

.checkout-success-card{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  padding:14px;
  border:1px solid #cbe7d7;
  border-radius:13px;
  color:#245f46;
  background:#f0faf4;
}
.checkout-success-icon{
  width:42px;height:42px;
  display:grid;place-items:center;
  flex:0 0 42px;
  border-radius:50%;
  color:#fff;
  background:#2d9167;
}
.checkout-success-icon svg{width:21px;height:21px}
.checkout-success-kicker{
  display:block;
  color:#4a8a6d;
  font-size:0.80rem;
  font-weight:850;
  letter-spacing:.1em;
}
.checkout-success-card h3{margin:3px 0 2px;font-size:0.86rem}
.checkout-success-card p{margin:0;color:#050505;font-size:0.80rem}

.checkout-receipt-list{
  display:grid;
  gap:7px;
  margin-bottom:10px;
}
.checkout-receipt-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
.checkout-receipt-item img{
  width:60px;height:50px;
  object-fit:cover;
  border-radius:7px;
}
.checkout-receipt-item b{display:block;font-size:0.80rem}
.checkout-receipt-item span{display:block;color:#050505;font-size:0.80rem}
.checkout-receipt-item small{display:block;margin-top:2px;color:#050505;font-size:0.80rem}
.checkout-receipt-item>strong{font-size:0.80rem}
.checkout-success-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-bottom:16px;
}

@media(max-width:1100px){
  .checkout-layout{grid-template-columns:1fr}
  .checkout-summary-card{position:static}
  .top-checkout-btn>span{display:none}
}
@media(max-width:760px){
  .top-checkout-btn{padding:0 8px}
  .checkout-cart-item{
    grid-template-columns:88px 1fr;
  }
  .checkout-cart-image{width:88px;height:76px}
  .checkout-cart-price{
    grid-column:1/-1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-align:left;
  }
  .checkout-cart-price form{margin-top:0}
  .checkout-success-card{align-items:flex-start;flex-wrap:wrap}
  .checkout-success-actions{flex-direction:column}
}


/* =========================================================
   BIDDING WIN -> MANDATORY CHECKOUT
   ========================================================= */
.mandatory-bid-alert{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:12px;
  padding:12px 13px;
  border:1px solid #e3d8f8;
  border-radius:12px;
  color:#5d438f;
  background:#faf7ff;
}
.mandatory-bid-alert>svg{
  width:20px;height:20px;flex:0 0 20px;margin-top:1px;
}
.mandatory-bid-alert b{
  display:block;
  font-size:0.80rem;
}
.mandatory-bid-alert p{
  margin:3px 0 0;
  color:#050505;
  font-size:0.80rem;
  line-height:1.5;
}

.checkout-cart-item.mandatory-item{
  background:linear-gradient(90deg,#fcfaff 0,#fff 34%);
  border-left:4px solid #7552d7;
}
.checkout-cart-item.mandatory-item.overdue{
  background:linear-gradient(90deg,#fff7f7 0,#fff 34%);
  border-left-color:#d4565e;
}
.mandatory-badge-row{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.mandatory-badge-row .badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.mandatory-badge-row .badge svg{
  width:11px;height:11px;
}
.locked-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 7px;
  border-radius:7px;
  color:#744cb9;
  background:#f2ebff;
  font-size:0.80rem;
  font-weight:800;
}
.locked-badge svg{
  width:11px;height:11px;
}

.payment-deadline{
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin-top:9px;
  padding:8px 9px;
  border:1px solid #e6def7;
  border-radius:9px;
  color:#65499c;
  background:#faf7ff;
}
.payment-deadline>svg{
  width:15px;height:15px;flex:0 0 15px;margin-top:1px;
}
.payment-deadline span{
  display:block;
  color:#050505;
  font-size:0.80rem;
}
.payment-deadline b{
  display:block;
  margin-top:2px;
  font-size:0.80rem;
}
.payment-deadline small{
  display:block!important;
  margin-top:2px!important;
  color:#050505!important;
  font-size:0.80rem!important;
}
.payment-deadline.overdue{
  border-color:#f0cccc;
  color:#a8454c;
  background:#fff5f5;
}
.payment-deadline.overdue span,
.payment-deadline.overdue small{
  color:#b26a6f!important;
}

.cannot-remove{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  margin-top:9px;
  color:#8b6cab;
  font-size:0.80rem;
  font-weight:750;
}
.cannot-remove svg{
  width:12px;height:12px;
}
.mandatory-summary-note{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:0 0 11px;
  padding:10px;
  border:1px solid #e5dcf7;
  border-radius:10px;
  color:#604595;
  background:#faf7ff;
}
.mandatory-summary-note>svg{
  width:16px;height:16px;flex:0 0 16px;
}
.mandatory-summary-note b{
  display:block;
  font-size:0.80rem;
}
.mandatory-summary-note p{
  margin:2px 0 0;
  color:#050505;
  font-size:0.80rem;
  line-height:1.45;
}

@media(max-width:760px){
  .checkout-cart-item.mandatory-item{
    border-left-width:3px;
  }
  .cannot-remove{
    justify-content:flex-start;
  }
}


/* =========================================================
   ARTVISTA DUMMY PAYMENT GATEWAY
   ========================================================= */
.payment-stepper{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin:0 auto 14px;
  color:#050505;
  font-size:0.80rem;
}
.payment-stepper>i{
  width:48px;
  height:1px;
  background:#dfe5eb;
}
.payment-stepper>span{
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}
.payment-stepper>span>svg{
  width:13px;
  height:13px;
}
.payment-stepper>span>b{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#050505;
  background:#edf1f5;
  font-size:0.80rem;
}
.payment-stepper>span.active{
  color:#9b6810;
  font-weight:750;
}
.payment-stepper>span.active>b{
  color:#fff;
  background:#d69a2c;
}
.payment-stepper>span.done{
  color:#287758;
  font-weight:700;
}
.payment-stepper>span.done>b{
  color:#fff;
  background:#359168;
}
.payment-stepper>span.failed{
  color:#b1464d;
  font-weight:700;
}
.payment-stepper>span.failed>b{
  color:#fff;
  background:#d3545b;
}

.demo-payment-banner{
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin-bottom:14px;
  padding:13px 15px;
  border:1px solid #ebddb6;
  border-radius:13px;
  color:#72541b;
  background:linear-gradient(135deg,#fffaf0,#fff7e2);
}
.demo-payment-banner>svg{
  width:20px;
  height:20px;
  flex:0 0 20px;
  margin-top:2px;
}
.demo-payment-banner span{
  display:block;
  color:#b17a18;
  font-size:0.80rem;
  font-weight:900;
  letter-spacing:.13em;
}
.demo-payment-banner b{
  display:block;
  margin-top:2px;
  font-size:0.86rem;
}
.demo-payment-banner p{
  margin:3px 0 0;
  color:#8a7245;
  font-size:0.80rem;
  line-height:1.5;
}

.payment-gateway-layout{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(310px,.65fr);
  gap:15px;
  align-items:start;
}
.payment-gateway-card,
.payment-order-summary,
.payment-receipt-card,
.payment-result-side{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.payment-gateway-card{
  padding:18px;
}
.gateway-brand-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid #edf0f3;
}
.gateway-brand{
  display:flex;
  align-items:center;
  gap:9px;
}
.gateway-logo{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#d39a31;
  background:#111d2c;
}
.gateway-logo svg{
  width:19px;
  height:19px;
}
.gateway-brand b{
  display:block;
  color:#1f2b3b;
  font-size:0.86rem;
}
.gateway-brand small{
  display:block;
  margin-top:2px;
  color:#050505;
  font-size:0.80rem;
}
.gateway-secure{
  display:flex;
  align-items:center;
  gap:5px;
  padding:6px 8px;
  border-radius:8px;
  color:#2b7757;
  background:#edf8f2;
  font-size:0.80rem;
  font-weight:750;
}
.gateway-secure svg{
  width:12px;
  height:12px;
}

.payment-retry-alert{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:13px;
  padding:10px 11px;
  border:1px solid #f0cccc;
  border-radius:10px;
  color:#a44249;
  background:#fff5f5;
}
.payment-retry-alert>svg{
  width:16px;
  height:16px;
  flex:0 0 16px;
  margin-top:1px;
}
.payment-retry-alert b{
  display:block;
  font-size:0.80rem;
}
.payment-retry-alert p{
  margin:2px 0 0;
  color:#b3686d;
  font-size:0.80rem;
  line-height:1.45;
}

.payment-method-title{
  margin:17px 0 10px;
}
.payment-method-title h3{
  margin:0 0 3px;
  font-size:0.86rem;
}
.payment-method-title p{
  margin:0;
  color:#050505;
  font-size:0.80rem;
}

.payment-method-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:14px;
}
.payment-method-tabs button{
  min-height:62px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 11px;
  border:1px solid #dde4eb;
  border-radius:11px;
  color:#050505;
  background:#fff;
  text-align:left;
  transition:.15s ease;
}
.payment-method-tabs button:hover{
  border-color:#d4ad58;
  background:#fffcf5;
}
.payment-method-tabs button.active{
  border-color:#d8a13a;
  color:#79540f;
  background:#fff8e8;
  box-shadow:0 0 0 2px rgba(216,161,58,.08);
}
.payment-method-tabs button>svg{
  width:19px;
  height:19px;
  flex:0 0 19px;
}
.payment-method-tabs b{
  display:block;
  font-size:0.80rem;
}
.payment-method-tabs small{
  display:block;
  margin-top:2px;
  color:#050505;
  font-size:0.80rem;
}

.payment-method-panel{
  display:none;
}
.payment-method-panel.active{
  display:block;
}
.dummy-payment-form{
  display:grid;
  gap:11px;
}
.gateway-field{
  display:grid;
  gap:5px;
}
.gateway-field>span{
  color:#050505;
  font-size:0.80rem;
  font-weight:750;
}
.gateway-field input,
.gateway-field select{
  width:100%;
  min-height:43px;
  padding:0 11px;
  border:1px solid #d6dee7;
  border-radius:9px;
  outline:0;
  color:#263447;
  background:#fff;
  font-size:0.80rem;
}
.gateway-field input:focus,
.gateway-field select:focus{
  border-color:#d6a13b;
  box-shadow:0 0 0 3px rgba(214,161,59,.09);
}
.gateway-field-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.gateway-input-icon{
  display:grid;
  grid-template-columns:37px 1fr;
  align-items:center;
  overflow:hidden;
  border:1px solid #d6dee7;
  border-radius:9px;
  background:#fff;
}
.gateway-input-icon:focus-within{
  border-color:#d6a13b;
  box-shadow:0 0 0 3px rgba(214,161,59,.09);
}
.gateway-input-icon>svg{
  width:15px;
  height:15px;
  margin:auto;
  color:#050505;
}
.gateway-input-icon input{
  min-height:41px;
  border:0;
  border-radius:0;
  box-shadow:none!important;
}
.payment-test-box{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:2px;
}
.payment-test{
  display:flex;
  align-items:flex-start;
  gap:7px;
  padding:9px;
  border-radius:9px;
}
.payment-test>svg{
  width:15px;
  height:15px;
  flex:0 0 15px;
  margin-top:1px;
}
.payment-test.success-test{
  color:#287657;
  background:#eef9f3;
  border:1px solid #d3eadc;
}
.payment-test.fail-test{
  color:#a84a50;
  background:#fff5f5;
  border:1px solid #f0d0d2;
}
.payment-test b{
  display:block;
  font-size:0.80rem;
}
.payment-test code{
  display:block;
  margin-top:2px;
  font-size:0.80rem;
}
.payment-test small{
  display:block;
  margin-top:1px;
  opacity:.75;
  font-size:0.80rem;
}

.fpx-demo-credential{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:10px;
  border:1px solid #d8e4f0;
  border-radius:9px;
  color:#496681;
  background:#f5f9fd;
}
.fpx-demo-credential>svg{
  width:16px;
  height:16px;
  flex:0 0 16px;
}
.fpx-demo-credential b{
  display:block;
  font-size:0.80rem;
}
.fpx-demo-credential p{
  margin:2px 0 0;
  font-size:0.80rem;
}
.fpx-demo-credential small{
  display:block;
  margin-top:2px;
  color:#050505;
  font-size:0.80rem;
}

.gateway-pay-total{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin-top:4px;
  padding:13px 0;
  border-top:1px solid #edf0f3;
}
.gateway-pay-total span{
  color:#050505;
  font-size:0.80rem;
}
.gateway-pay-total strong{
  color:#9d6810;
  font-size:1.15rem;
}
.gateway-pay-button{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:10px;
  color:#fff;
  background:linear-gradient(135deg,#d9a33b,#bf7e13);
  box-shadow:0 9px 20px rgba(191,126,19,.18);
  font-size:0.80rem;
  font-weight:850;
}
.gateway-pay-button:disabled{
  opacity:.72;
  cursor:wait;
}
.gateway-pay-button svg{
  width:16px;
  height:16px;
}
.payment-spinner{
  width:16px;
  height:16px;
  border:2px solid rgba(255,255,255,.38);
  border-top-color:#fff;
  border-radius:50%;
  animation:paymentSpin .7s linear infinite;
}
@keyframes paymentSpin{
  to{transform:rotate(360deg)}
}
.gateway-privacy-note{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
  color:#050505;
  text-align:center;
  font-size:0.80rem;
  line-height:1.4;
}
.gateway-privacy-note svg{
  width:12px;
  height:12px;
  flex:0 0 12px;
}

.payment-order-summary{
  position:sticky;
  top:20px;
  overflow:hidden;
}
.payment-order-head{
  display:flex;
  align-items:center;
  gap:9px;
  padding:14px;
  border-bottom:1px solid #edf0f3;
}
.payment-order-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#a46d11;
  background:#fff3dc;
}
.payment-order-icon svg{
  width:17px;
  height:17px;
}
.payment-order-head h3{
  margin:0 0 2px;
  font-size:0.86rem;
}
.payment-order-head p{
  margin:0;
  color:#050505;
  font-size:0.80rem;
}
.payment-reference-box{
  margin:12px 13px 0;
  padding:9px 10px;
  border-radius:9px;
  background:#f6f8fa;
}
.payment-reference-box span{
  display:block;
  color:#050505;
  font-size:0.80rem;
}
.payment-reference-box b{
  display:block;
  margin-top:2px;
  color:#050505;
  font-size:0.80rem;
  word-break:break-all;
}
.payment-order-items{
  display:grid;
  max-height:330px;
  overflow-y:auto;
  padding:5px 13px;
}
.payment-order-item{
  display:grid;
  grid-template-columns:54px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:9px 0;
  border-bottom:1px solid #edf0f3;
}
.payment-order-item:last-child{
  border-bottom:0;
}
.payment-order-item img{
  width:54px;
  height:48px;
  object-fit:cover;
  border-radius:7px;
}
.payment-order-item b{
  display:block;
  font-size:0.80rem;
}
.payment-order-item span{
  display:block;
  color:#050505;
  font-size:0.80rem;
}
.payment-order-item small{
  display:block;
  margin-top:2px;
  color:#997028;
  font-size:0.80rem;
}
.payment-order-item>strong{
  font-size:0.80rem;
}
.payment-order-total{
  display:grid;
  gap:7px;
  padding:12px 13px;
  border-top:1px solid #edf0f3;
}
.payment-order-total>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.payment-order-total span{
  color:#050505;
  font-size:0.80rem;
}
.payment-order-total b{
  font-size:0.80rem;
}
.payment-order-total .grand{
  margin-top:3px;
  padding-top:9px;
  border-top:1px solid #edf0f3;
}
.payment-order-total .grand span{
  color:#273447;
  font-weight:750;
}
.payment-order-total .grand strong{
  color:#a56c0c;
  font-size:0.88rem;
}
.payment-back-checkout{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin:0 13px 13px;
  padding:8px;
  border-radius:8px;
  color:#050505;
  background:#f7f8fa;
  font-size:0.80rem;
  font-weight:650;
}
.payment-back-checkout svg{
  width:12px;
  height:12px;
}

.payment-missing-state{
  min-height:390px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:30px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  text-align:center;
}
.payment-missing-state>svg{
  width:38px;
  height:38px;
  margin-bottom:10px;
  color:#c2565c;
}
.payment-missing-state.success>svg{
  color:#349169;
}
.payment-missing-state h2{
  margin:0 0 5px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.25rem;
}
.payment-missing-state p{
  margin:0 0 13px;
  color:#050505;
  font-size:0.80rem;
}

/* Payment result */
.payment-result-hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:285px;
  margin-bottom:14px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  text-align:center;
  box-shadow:var(--shadow-sm);
}
.payment-result-icon{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  margin-bottom:10px;
  border-radius:50%;
}
.payment-result-icon svg{
  width:30px;
  height:30px;
}
.payment-result-hero>span{
  font-size:0.80rem;
  font-weight:900;
  letter-spacing:.12em;
}
.payment-result-hero h2{
  margin:6px 0 4px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.55rem;
}
.payment-result-hero p{
  max-width:540px;
  margin:0;
  color:#050505;
  font-size:0.80rem;
  line-height:1.55;
}
.payment-result-hero>strong{
  margin-top:13px;
  font-size:1.25rem;
}
.payment-result-hero.success{
  color:#246e50;
  background:linear-gradient(180deg,#f5fff9,#fff);
  border-color:#d6eadf;
}
.payment-result-hero.success .payment-result-icon{
  color:#fff;
  background:#329267;
}
.payment-result-hero.failed{
  color:#a53f46;
  background:linear-gradient(180deg,#fff7f7,#fff);
  border-color:#efd1d3;
}
.payment-result-hero.failed .payment-result-icon{
  color:#fff;
  background:#d4565d;
}
.payment-result-hero.pending{
  color:#85601d;
  background:linear-gradient(180deg,#fffbf3,#fff);
  border-color:#ebdfc4;
}
.payment-result-hero.pending .payment-result-icon{
  color:#fff;
  background:#d09a30;
}

.payment-result-layout{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(280px,.55fr);
  gap:14px;
  align-items:start;
}
.payment-receipt-card{
  overflow:hidden;
}
.payment-receipt-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 15px;
  border-bottom:1px solid #edf0f3;
}
.payment-receipt-head span{
  display:block;
  color:#a16c13;
  font-size:0.80rem;
  font-weight:900;
  letter-spacing:.1em;
}
.payment-receipt-head h3{
  margin:3px 0 0;
  font-size:0.86rem;
}
.payment-receipt-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  padding:5px 15px;
}
.payment-receipt-meta>div{
  padding:10px 0;
  border-bottom:1px solid #edf0f3;
}
.payment-receipt-meta>div:nth-child(odd){
  padding-right:14px;
}
.payment-receipt-meta>div:nth-child(even){
  padding-left:14px;
  border-left:1px solid #edf0f3;
}
.payment-receipt-meta span{
  display:block;
  color:#050505;
  font-size:0.80rem;
}
.payment-receipt-meta b{
  display:block;
  margin-top:2px;
  color:#050505;
  font-size:0.80rem;
}
.payment-result-items{
  padding:0 15px;
}
.payment-result-item{
  display:grid;
  grid-template-columns:60px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:10px 0;
  border-bottom:1px solid #edf0f3;
}
.payment-result-item img{
  width:60px;
  height:50px;
  object-fit:cover;
  border-radius:7px;
}
.payment-result-item b{
  display:block;
  font-size:0.80rem;
}
.payment-result-item span{
  display:block;
  color:#050505;
  font-size:0.80rem;
}
.payment-result-item small{
  display:block;
  margin-top:2px;
  color:#94702e;
  font-size:0.80rem;
}
.payment-result-item>strong{
  font-size:0.80rem;
}
.payment-receipt-total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 15px;
  background:#fbf8ef;
}
.payment-receipt-total span{
  color:#70531d;
  font-size:0.80rem;
  font-weight:750;
}
.payment-receipt-total strong{
  color:#a56b0c;
  font-size:0.95rem;
}

.payment-result-side{
  padding:14px;
}
.payment-result-note{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:10px;
  padding:10px;
  border-radius:10px;
  color:#2e7657;
  background:#f0f8f4;
}
.payment-result-note>svg{
  width:17px;
  height:17px;
  flex:0 0 17px;
}
.payment-result-note b{
  display:block;
  font-size:0.80rem;
}
.payment-result-note p{
  margin:2px 0 0;
  color:#050505;
  font-size:0.80rem;
  line-height:1.45;
}
.payment-result-side>a+a{
  margin-top:7px;
}

.payment-failed-actions{
  max-width:760px;
  margin:0 auto;
}
.payment-failed-info{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:12px;
  border:1px solid #dbe5ef;
  border-radius:11px;
  color:#506a84;
  background:#f5f9fd;
}
.payment-failed-info>svg{
  width:17px;
  height:17px;
  flex:0 0 17px;
}
.payment-failed-info b{
  display:block;
  font-size:0.80rem;
}
.payment-failed-info p{
  margin:2px 0 0;
  color:#050505;
  font-size:0.80rem;
  line-height:1.45;
}
.payment-failed-buttons{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:10px;
}

@media(max-width:1050px){
  .payment-gateway-layout,
  .payment-result-layout{
    grid-template-columns:1fr;
  }
  .payment-order-summary{
    position:static;
  }
}
@media(max-width:660px){
  .payment-stepper>i{
    width:20px;
  }
  .payment-stepper>span{
    font-size:0.80rem;
  }
  .payment-method-tabs,
  .gateway-field-grid,
  .payment-test-box,
  .payment-receipt-meta{
    grid-template-columns:1fr;
  }
  .payment-receipt-meta>div:nth-child(even){
    padding-left:0;
    border-left:0;
  }
  .payment-failed-buttons{
    flex-direction:column;
  }
}


/* =========================================================
   USER PURCHASE HISTORY + REAL PDF RECEIPT LINKS
   ========================================================= */
.purchase-history-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:11px;
  margin-bottom:14px;
}
.purchase-history-stat{
  min-height:86px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.history-stat-icon{
  width:41px;
  height:41px;
  display:grid;
  place-items:center;
  flex:0 0 41px;
  border-radius:11px;
  color:#3478c7;
  background:#eaf4ff;
}
.history-stat-icon.gold{
  color:#b67a16;
  background:#fff3dc;
}
.history-stat-icon.green{
  color:#277957;
  background:#ebf8f1;
}
.history-stat-icon svg{
  width:19px;
  height:19px;
}
.purchase-history-stat small{
  display:block;
  color:#050505;
  font-size:0.80rem;
}
.purchase-history-stat strong{
  display:block;
  margin-top:3px;
  color:#263447;
  font-size:0.90rem;
}
.purchase-history-empty{
  min-height:320px;
}

.purchase-history-list{
  display:grid;
  gap:9px;
}
.purchase-history-row-card{
  display:grid;
  grid-template-columns:43px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.purchase-history-row-icon{
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#b27612;
  background:#fff3dc;
}
.purchase-history-row-icon svg{
  width:19px;
  height:19px;
}
.purchase-history-row-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.purchase-history-row-top h3{
  margin:6px 0 0;
  color:#273447;
  font-size:0.86rem;
}
.purchase-history-row-top>strong{
  color:#a46c0d;
  font-size:0.86rem;
}
.purchase-history-meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:7px;
}
.purchase-history-meta span{
  display:flex;
  align-items:center;
  gap:4px;
  color:#050505;
  font-size:0.80rem;
}
.purchase-history-meta svg{
  width:12px;
  height:12px;
}
.purchase-history-row-copy>small{
  display:block;
  margin-top:6px;
  color:#050505;
  font-size:0.80rem;
}
.purchase-history-row-actions{
  display:grid;
  gap:6px;
  min-width:115px;
}
.purchase-history-row-actions .secondary-user-btn{
  min-height:32px;
  padding:6px 8px;
  font-size:0.80rem;
}
.purchase-pdf-mini{
  min-height:31px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:6px 8px;
  border:1px solid #dfbb6a;
  border-radius:8px;
  color:#8b5d0b;
  background:#fff8e7;
  font-size:0.80rem;
  font-weight:750;
}
.purchase-pdf-mini svg{
  width:13px;
  height:13px;
}

/* History detail */
.purchase-history-detail-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:13px;
}
.purchase-history-detail-head h2{
  margin:7px 0 2px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.45rem;
}
.purchase-history-detail-head p{
  margin:0;
  color:#050505;
  font-size:0.80rem;
}
.purchase-pdf-btn{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:8px 12px;
  border:1px solid #d9ad50;
  border-radius:11px;
  color:#81570f;
  background:#fff8e5;
  transition:.15s ease;
}
.purchase-pdf-btn:hover{
  background:#fff2cf;
  transform:translateY(-1px);
}
.purchase-pdf-btn>svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
}
.purchase-pdf-btn b{
  display:block;
  font-size:0.80rem;
}
.purchase-pdf-btn small{
  display:block;
  margin-top:1px;
  color:#aa884c;
  font-size:0.80rem;
}
.purchase-pdf-btn.full{
  width:100%;
  margin-top:12px;
}

.purchase-detail-layout{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:14px;
  align-items:start;
}
.purchase-detail-main{
  display:grid;
  gap:12px;
}
.purchase-buyer-card,
.purchase-items-card,
.purchase-payment-card{
  padding:15px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.purchase-payment-card{
  position:sticky;
  top:20px;
}
.purchase-section-heading{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding-bottom:11px;
  border-bottom:1px solid #edf0f3;
}
.purchase-section-heading>span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  flex:0 0 34px;
  border-radius:9px;
  color:#a66e11;
  background:#fff3dd;
}
.purchase-section-heading>span svg{
  width:16px;
  height:16px;
}
.purchase-section-heading h3{
  margin:0 0 2px;
  font-size:0.86rem;
}
.purchase-section-heading p{
  margin:0;
  color:#050505;
  font-size:0.80rem;
}
.purchase-info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-top:5px;
}
.purchase-info-grid>div{
  padding:10px 8px;
  border-bottom:1px solid #edf0f3;
}
.purchase-info-grid span{
  display:block;
  color:#050505;
  font-size:0.80rem;
}
.purchase-info-grid b{
  display:block;
  margin-top:2px;
  color:#050505;
  font-size:0.80rem;
}
.paid-text{
  color:#277a58!important;
}

.purchase-history-items{
  display:grid;
}
.purchase-history-item{
  display:grid;
  grid-template-columns:86px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  padding:11px 0;
  border-bottom:1px solid #edf0f3;
}
.purchase-history-item:last-child{
  border-bottom:0;
}
.purchase-history-item img{
  width:86px;
  height:68px;
  object-fit:cover;
  border-radius:8px;
}
.purchase-source-row .badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.purchase-source-row .badge svg{
  width:11px;
  height:11px;
}
.purchase-history-item h3{
  margin:5px 0 2px;
  font-size:0.80rem;
}
.purchase-history-item p{
  margin:0;
  color:#050505;
  font-size:0.80rem;
}
.purchase-history-item small{
  display:block;
  margin-top:3px;
  color:#050505;
  font-size:0.80rem;
}
.purchase-history-item>strong{
  color:#a36b0d;
  font-size:0.80rem;
}

.purchase-payment-lines{
  display:grid;
  gap:0;
  margin-top:5px;
}
.purchase-payment-lines>div{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid #edf0f3;
}
.purchase-payment-lines span{
  color:#050505;
  font-size:0.80rem;
}
.purchase-payment-lines b{
  max-width:58%;
  color:#050505;
  text-align:right;
  font-size:0.80rem;
  word-break:break-word;
}
.purchase-total-box{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding:12px;
  border:1px solid #ead8ae;
  border-radius:10px;
  color:#6e4d14;
  background:#fff9ea;
}
.purchase-total-box span{
  font-size:0.80rem;
  font-weight:750;
}
.purchase-total-box strong{
  color:#a46a0b;
  font-size:0.90rem;
}

@media(max-width:1050px){
  .purchase-detail-layout{
    grid-template-columns:1fr;
  }
  .purchase-payment-card{
    position:static;
  }
}
@media(max-width:760px){
  .purchase-history-stats{
    grid-template-columns:1fr;
  }
  .purchase-history-row-card{
    grid-template-columns:40px 1fr;
  }
  .purchase-history-row-actions{
    grid-column:1/-1;
    grid-template-columns:1fr 1fr;
  }
  .purchase-history-detail-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .purchase-pdf-btn{
    width:100%;
  }
  .purchase-info-grid{
    grid-template-columns:1fr 1fr;
  }
  .purchase-history-item{
    grid-template-columns:70px 1fr;
  }
  .purchase-history-item img{
    width:70px;
    height:60px;
  }
  .purchase-history-item>strong{
    grid-column:2;
  }
}


/* =========================================================
   ARTWORK DELIVERY TRACKING
   ========================================================= */
.profile-delivery-note,
.profile-address-alert,
.checkout-delivery-address,
.payment-shipping-box,
.purchase-delivery-explainer,
.delivery-gallery-note{
  display:flex;
  align-items:flex-start;
  gap:9px;
  border-radius:10px;
}
.profile-delivery-note{
  margin-top:14px;
  padding:10px;
  border:1px solid #d8e5f1;
  color:#49647d;
  background:#f5f9fd;
}
.profile-address-alert{
  padding:10px 11px;
  border:1px solid #e8dcb8;
  color:#77591f;
  background:#fffaf0;
}
.profile-delivery-note>svg,
.profile-address-alert>svg,
.checkout-delivery-address>svg,
.payment-shipping-box>svg,
.purchase-delivery-explainer>svg,
.delivery-gallery-note>svg{
  width:17px;
  height:17px;
  flex:0 0 17px;
  margin-top:1px;
}
.profile-delivery-note b,
.profile-address-alert b{
  display:block;
  font-size:0.80rem;
}
.profile-delivery-note p,
.profile-address-alert p{
  margin:2px 0 0;
  font-size:0.80rem;
  line-height:1.45;
  color:inherit;
  opacity:.82;
}

.checkout-delivery-address{
  margin-top:9px;
  padding:10px 11px;
  border:1px solid #dce5ee;
  color:#425a73;
  background:#f7fafc;
}
.checkout-delivery-address small{
  display:block;
  color:#050505;
  font-size:0.80rem;
}
.checkout-delivery-address b{
  display:block;
  margin-top:2px;
  font-size:0.80rem;
}
.checkout-delivery-address span{
  display:block;
  margin-top:1px;
  color:#050505;
  font-size:0.80rem;
}
.checkout-delivery-address em{
  display:block;
  margin-top:4px;
  color:#050505;
  font-size:0.80rem;
  font-style:normal;
}

.payment-shipping-box{
  margin:10px 13px 0;
  padding:10px;
  border:1px solid #dbe6f0;
  color:#47637d;
  background:#f6fafe;
}
.payment-shipping-box span{
  display:block;
  color:#050505;
  font-size:0.80rem;
}
.payment-shipping-box b{
  display:block;
  margin-top:2px;
  font-size:0.80rem;
}
.payment-shipping-box small{
  display:block;
  margin-top:2px;
  color:#050505;
  font-size:0.80rem;
  line-height:1.45;
}

.delivery-aware{
  gap:12px;
}
.purchase-history-item.delivery-item{
  display:block;
  padding:13px 0;
}
.purchase-item-main{
  display:grid;
  grid-template-columns:86px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
}
.purchase-item-main>img{
  width:86px;
  height:68px;
  object-fit:cover;
  border-radius:8px;
}
.purchase-item-main h3{
  margin:5px 0 2px;
  font-size:0.80rem;
}
.purchase-item-main p{
  margin:0;
  color:#050505;
  font-size:0.80rem;
}
.purchase-item-main small{
  display:block;
  margin-top:3px;
  color:#050505;
  font-size:0.80rem;
}
.purchase-item-main>strong{
  color:#a36b0d;
  font-size:0.80rem;
}
.purchase-source-row{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
}
.purchase-source-row .badge{
  gap:4px;
}
.purchase-source-row .badge svg{
  width:11px;
  height:11px;
}

.art-delivery-card{
  margin-top:12px;
  overflow:hidden;
  border:1px solid #dfe6ed;
  border-radius:12px;
  background:#fbfcfe;
}
.art-delivery-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 11px;
  border-bottom:1px solid #e8edf2;
  background:#fff;
}
.delivery-tracking-title{
  display:flex;
  align-items:center;
  gap:8px;
}
.delivery-truck-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  flex:0 0 34px;
  border-radius:9px;
  color:#2f73b8;
  background:#eaf4ff;
}
.delivery-truck-icon svg{
  width:16px;
  height:16px;
}
.delivery-tracking-title small,
.delivery-eta small{
  display:block;
  color:#050505;
  font-size:0.80rem;
}
.delivery-tracking-title b{
  display:block;
  margin-top:2px;
  color:#050505;
  font-size:0.80rem;
}
.delivery-eta{
  text-align:right;
}
.delivery-eta b{
  display:block;
  margin-top:2px;
  color:#8e6113;
  font-size:0.80rem;
}

.delivery-address-box{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:10px;
  padding:9px 10px;
  border:1px solid #e1e8ef;
  border-radius:9px;
  color:#050505;
  background:#fff;
}
.delivery-address-box>svg{
  width:16px;
  height:16px;
  flex:0 0 16px;
  margin-top:1px;
}
.delivery-address-box span{
  display:block;
  color:#050505;
  font-size:0.80rem;
}
.delivery-address-box b{
  display:block;
  margin-top:2px;
  font-size:0.80rem;
  line-height:1.45;
}

.art-delivery-timeline{
  display:grid;
  gap:0;
  padding:5px 11px 8px;
}
.delivery-step{
  position:relative;
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:8px;
  min-height:60px;
}
.delivery-step:not(:last-child)::before{
  content:"";
  position:absolute;
  left:14px;
  top:30px;
  bottom:-1px;
  width:2px;
  background:#dde4eb;
}
.delivery-step.done:not(:last-child)::before{
  background:#65a987;
}
.delivery-step.current:not(:last-child)::before{
  background:linear-gradient(#d8a33a 0 32%,#dde4eb 32% 100%);
}
.delivery-step-marker{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  position:relative;
  z-index:1;
  border:2px solid #dce3e9;
  border-radius:50%;
  color:#050505;
  background:#fff;
}
.delivery-step-marker svg{
  width:13px;
  height:13px;
}
.delivery-step.done .delivery-step-marker{
  color:#fff;
  border-color:#4f9b75;
  background:#4f9b75;
}
.delivery-step.current .delivery-step-marker{
  color:#fff;
  border-color:#d69c2f;
  background:#d69c2f;
  box-shadow:0 0 0 4px rgba(214,156,47,.10);
}
.delivery-step-copy{
  padding:2px 0 11px;
}
.delivery-step-copy>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.delivery-step-copy b{
  color:#050505;
  font-size:0.80rem;
}
.delivery-step.done .delivery-step-copy b{
  color:#347756;
}
.delivery-step.current .delivery-step-copy b{
  color:#996812;
}
.delivery-step-copy time{
  color:#050505;
  font-size:0.80rem;
}
.delivery-step-copy p{
  margin:3px 0 0;
  color:#050505;
  font-size:0.80rem;
  line-height:1.4;
}
.delivery-step.pending{
  opacity:.72;
}

.delivery-gallery-note{
  margin:0 10px 10px;
  padding:9px 10px;
  border:1px solid #e4e8ed;
  color:#050505;
  background:#fff;
}
.delivery-gallery-note p{
  margin:0;
  font-size:0.80rem;
  line-height:1.45;
}
.delivery-gallery-note.warning{
  margin-top:10px;
  border-color:#edd9b7;
  color:#82632b;
  background:#fffaf1;
}
.purchase-delivery-explainer{
  margin-top:11px;
  padding:10px;
  border:1px solid #dfe8f0;
  color:#4b657d;
  background:#f7fafc;
}
.purchase-delivery-explainer b{
  display:block;
  font-size:0.80rem;
}
.purchase-delivery-explainer p{
  margin:2px 0 0;
  color:#050505;
  font-size:0.80rem;
  line-height:1.45;
}
.history-status-row{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
}
.history-status-row .badge{
  gap:4px;
}
.history-status-row .badge svg{
  width:11px;
  height:11px;
}

@media(max-width:760px){
  .purchase-item-main{
    grid-template-columns:70px 1fr;
  }
  .purchase-item-main>img{
    width:70px;
    height:60px;
  }
  .purchase-item-main>strong{
    grid-column:2;
  }
  .art-delivery-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .delivery-eta{
    text-align:left;
  }
  .delivery-step-copy>div{
    align-items:flex-start;
    flex-direction:column;
    gap:2px;
  }
}


/* =========================================================
   DESKTOP READABILITY PASS — 1920x1080 @ 100% ZOOM
   Balanced production-like typography: readable, not oversized.
   ========================================================= */
@media (min-width:1440px){
  body{
    font-size:15px;
    line-height:1.5;
  }

  .app{
    grid-template-columns:260px minmax(0,1fr);
  }

  .sidebar,
  .sidebar.artist-theme,
  .sidebar.user-theme{
    padding:18px 14px;
  }

  .nav{
    gap:4px;
  }

  .nav a{
    min-height:44px;
    padding:10px 12px;
    font-size:0.88rem;
  }

  .nav a svg{
    width:18px;
    height:18px;
  }

  .sidebar-brand-copy small{
    font-size:0.80rem;
    letter-spacing:.10em;
  }

  .sidebar-brand-copy span{
    font-size:0.80rem;
    letter-spacing:.05em;
  }

  .main{
    padding:24px 30px 42px;
  }

  .topbar{
    min-height:58px;
    margin-bottom:20px;
  }

  .top-title h1{
    font-size:1.72rem;
  }

  .top-title p{
    font-size:0.88rem;
  }

  .top-profile b{
    font-size:0.86rem;
  }

  .top-profile small{
    font-size:0.80rem;
  }

  .user-search{
    min-height:42px;
  }

  .user-search input{
    font-size:0.86rem;
  }

  .top-checkout-btn{
    min-height:42px;
    font-size:0.80rem;
  }

  .page-intro h2{
    font-size:1.62rem;
  }

  .page-intro p{
    font-size:0.86rem;
    line-height:1.55;
  }

  .user-section-title h3,
  .panel-header h3,
  .content-card h3{
    font-size:0.92rem;
  }

  .user-section-title a,
  .link-gold,
  .panel-header a{
    font-size:0.80rem;
  }

  .content-card p{
    font-size:0.86rem;
  }

  .primary-user-btn,
  .secondary-user-btn{
    min-height:40px;
    font-size:0.86rem;
  }

  .badge{
    font-size:0.80rem;
    padding:5px 8px;
  }

  .data-table{
    font-size:0.80rem;
  }

  .data-table th,
  .data-table td{
    padding:11px 12px;
  }

  .user-metric small{
    font-size:0.80rem;
  }

  .user-metric strong{
    font-size:1.22rem;
  }

  .user-art-card h4{
    font-size:0.86rem;
  }

  .user-art-card p{
    font-size:0.80rem;
  }

  .user-art-card b{
    font-size:0.86rem;
  }

  .catalog-body h3{
    font-size:0.90rem;
  }

  .catalog-body>p,
  .catalog-meta span,
  .card-action{
    font-size:0.80rem;
  }

  .catalog-meta b{
    font-size:0.86rem;
  }

  .artist-directory-card h3{
    font-size:0.94rem;
  }

  .artist-directory-card p,
  .artist-profile-hero p{
    font-size:0.80rem;
  }

  .artist-directory-card footer,
  .artist-stat span{
    font-size:0.80rem;
  }

  .artwork-description,
  .info-list span,
  .info-list b{
    font-size:0.80rem!important;
  }

  .calendar-card-top h3,
  .booking-form-heading h3,
  .checkout-panel-head h3,
  .checkout-summary-title h3,
  .payment-method-title h3,
  .payment-order-head h3,
  .purchase-section-heading h3{
    font-size:0.90rem;
  }

  .calendar-card-top p,
  .booking-form-heading p,
  .checkout-panel-head p,
  .checkout-summary-title p,
  .payment-method-title p,
  .purchase-section-heading p{
    font-size:0.80rem;
  }

  .calendar-weekdays span,
  .calendar-day-cell,
  .calendar-select,
  .calendar-view-switch button,
  .calendar-hour-label,
  .hour-click-hint{
    font-size:0.80rem;
  }

  .calendar-form-field>span,
  .calendar-form-field input,
  .calendar-form-field select,
  .calendar-form-field textarea{
    font-size:0.80rem;
  }

  .calendar-form-field small{
    font-size:0.80rem;
  }

  .checkout-summary-lines span,
  .checkout-summary-lines b,
  .checkout-buyer,
  .checkout-delivery-address,
  .payment-order-summary,
  .payment-gateway-card,
  .purchase-payment-card{
    font-size:0.80rem;
  }

  .purchase-history-row-top h3,
  .purchase-history-item h3,
  .purchase-item-main h3{
    font-size:0.86rem;
  }

  .purchase-history-meta span,
  .purchase-history-row-copy>small,
  .purchase-item-main p,
  .purchase-item-main small,
  .delivery-step-copy b,
  .delivery-step-copy p,
  .delivery-address-box span,
  .delivery-address-box b,
  .delivery-gallery-note p{
    font-size:0.80rem;
  }

  .purchase-history-row-top>strong,
  .purchase-item-main>strong{
    font-size:0.86rem;
  }

  .payment-result-hero p,
  .payment-result-item,
  .payment-receipt-meta,
  .payment-failed-info{
    font-size:0.80rem;
  }

  footer{
    font-size:0.80rem;
  }
}


/* =========================================================
   ACCESSIBILITY TYPOGRAPHY PASS — 1920×1080 @ 100% ZOOM
   Higher readability, stronger contrast, production-like scale.
   ========================================================= */
:root{
  --ink:#050505;
  --text:#080808;
  --muted:#111111;
}

/* Default text on all light application surfaces */
.main,
.user-main,
.avx-right,
.avx-card{
  color:#050505;
}

.main p,
.main small,
.main label,
.main time,
.main th,
.main td,
.main input,
.main select,
.main textarea,
.main .muted,
.main .top-title p,
.main .content-card p,
.main .page-intro p,
.main .user-search input,
.main .user-metric small,
.main .user-art-card p,
.main .catalog-body>p,
.main .catalog-meta span,
.main .artist-directory-card p,
.main .artist-directory-card footer,
.main .artist-profile-hero p,
.main .info-list span,
.main .calendar-card-top p,
.main .booking-form-heading p,
.main .calendar-form-field small,
.main .checkout-panel-head p,
.main .checkout-summary-title p,
.main .checkout-summary-lines span,
.main .checkout-buyer small,
.main .checkout-buyer span,
.main .checkout-delivery-address small,
.main .checkout-delivery-address span,
.main .checkout-delivery-address em,
.main .payment-method-title p,
.main .payment-order-head p,
.main .payment-order-item span,
.main .payment-order-item small,
.main .purchase-section-heading p,
.main .purchase-history-meta span,
.main .purchase-history-row-copy>small,
.main .purchase-item-main p,
.main .purchase-item-main small,
.main .delivery-tracking-title small,
.main .delivery-eta small,
.main .delivery-address-box span,
.main .delivery-step-copy p,
.main .delivery-step-copy time,
.main .delivery-gallery-note p,
.main .purchase-delivery-explainer p,
.main .payment-result-hero p,
.main .payment-result-item span,
.main .payment-result-item small,
.main .payment-receipt-meta span,
.main .payment-failed-info p,
.main .gateway-field>span,
.main .gateway-privacy-note,
.main .fpx-demo-credential small,
.main .payment-test small{
  color:#0a0a0a!important;
}

/* Preserve meaningful status/accent text instead of forcing everything black */
.main .badge.green{color:#12653f!important}
.main .badge.blue{color:#185c9f!important}
.main .badge.gold{color:#875400!important}
.main .badge.red{color:#a92e35!important}
.main .badge.purple{color:#5132ae!important}
.main .paid-text{color:#12653f!important}
.main .link-gold,
.main .card-action,
.main .user-section-title a{
  color:#8a5600!important;
}

/* Buttons must remain readable on colored backgrounds */
.main .primary-user-btn,
.main .checkout-buy-btn,
.main .gateway-pay-button,
.main .auction-bid-submit{
  color:#fff!important;
}
.main .secondary-user-btn{
  color:#050505!important;
}

/* Dark surfaces: use white instead of low-contrast grey */
.sidebar,
.sidebar *{
  color:#fff;
}
.sidebar-brand-copy small{
  color:#f4c45f!important;
}
.sidebar-brand-copy span,
.sidebar-profile small,
.sidebar-gallery small{
  color:#fff!important;
}
.nav a{
  color:#fff!important;
}

.avx-left,
.avx-left p,
.avx-left span,
.avx-left small{
  color:#fff!important;
}
.avx-left .avx-kicker{
  color:#f4c45f!important;
}

/* Login form / light panel */
.avx-right p,
.avx-right small,
.avx-right span,
.avx-right label{
  color:#080808;
}
.avx-panel-kicker{
  color:#7c4c00!important;
}

/* 1920×1080 desktop sizing */
@media (min-width:1440px){
  body{
    font-size:16px;
    line-height:1.55;
  }

  .app{
    grid-template-columns:270px minmax(0,1fr);
  }

  .main{
    padding:25px 32px 44px;
  }

  .nav a{
    min-height:46px;
    padding:11px 13px;
    font-size:.96rem;
  }

  .sidebar-brand-copy strong{
    font-size:1.68rem;
  }

  .sidebar-brand-copy small,
  .sidebar-brand-copy span{
    font-size:.80rem;
  }

  .top-title h1{
    font-size:1.82rem;
  }

  .top-title p{
    font-size:.94rem;
  }

  .top-profile b{
    font-size:.92rem;
  }

  .top-profile small{
    font-size:.82rem;
  }

  .user-search input,
  .top-checkout-btn{
    font-size:.88rem;
  }

  .page-intro h2{
    font-size:1.72rem;
  }

  .page-intro p{
    font-size:.92rem;
  }

  .user-section-title h3,
  .panel-header h3,
  .content-card h3,
  .calendar-card-top h3,
  .booking-form-heading h3,
  .checkout-panel-head h3,
  .checkout-summary-title h3,
  .payment-method-title h3,
  .payment-order-head h3,
  .purchase-section-heading h3{
    font-size:1rem;
  }

  .primary-user-btn,
  .secondary-user-btn,
  .catalog-cart-btn,
  .purchase-pdf-mini{
    font-size:.86rem;
  }

  .badge{
    font-size:.80rem;
  }

  .content-card p,
  .catalog-body>p,
  .artist-directory-card p,
  .artist-profile-hero p,
  .artwork-description,
  .info-list span,
  .info-list b{
    font-size:.86rem!important;
  }

  .user-metric small{
    font-size:.82rem;
  }

  .user-art-card h4,
  .catalog-body h3,
  .purchase-history-row-top h3,
  .purchase-history-item h3,
  .purchase-item-main h3{
    font-size:.90rem;
  }

  .user-art-card p,
  .catalog-meta span,
  .card-action,
  .purchase-history-meta span,
  .purchase-history-row-copy>small,
  .purchase-item-main p,
  .purchase-item-main small,
  .delivery-step-copy b,
  .delivery-step-copy p,
  .delivery-address-box span,
  .delivery-address-box b,
  .delivery-gallery-note p{
    font-size:.80rem!important;
  }

  .calendar-weekdays span,
  .calendar-day-cell,
  .calendar-select,
  .calendar-view-switch button,
  .calendar-hour-label,
  .hour-click-hint,
  .calendar-form-field>span,
  .calendar-form-field input,
  .calendar-form-field select,
  .calendar-form-field textarea{
    font-size:.84rem;
  }

  .payment-order-summary,
  .payment-gateway-card,
  .purchase-payment-card,
  .checkout-summary-card{
    font-size:.84rem;
  }
}


/* =========================================================
   AUTHENTICATION V2 — USER EMAIL SIGNUP / LOGIN / RESET
   ========================================================= */
.auth-login-v2 .avx-right{
  align-items:center;
}
.auth-card-v2{
  max-width:560px;
}
.auth-role-tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-bottom:22px;
  padding:5px;
  border:1px solid #d9e0e7;
  border-radius:13px;
  background:#f5f7f9;
}
.auth-role-tabs a{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 9px;
  border-radius:9px;
  color:#050505!important;
  background:transparent;
  font-size:.82rem;
  font-weight:800;
  text-align:center;
}
.auth-role-tabs a svg{
  width:16px;
  height:16px;
}
.auth-role-tabs a.active{
  border:1px solid #d7dee6;
  background:#fff;
  box-shadow:0 3px 10px rgba(15,23,42,.06);
}
.auth-role-tabs a.active.user{
  color:#175d9d!important;
  border-color:#cfe0f1;
}
.auth-role-tabs a.active.gallery{
  color:#885800!important;
  border-color:#ead8ac;
}
.auth-role-tabs a.active.artist{
  color:#5534b5!important;
  border-color:#ddd2f7;
}

.auth-success-message{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:0 0 14px;
  padding:11px 12px;
  border:1px solid #bfe1cf;
  border-radius:10px;
  color:#075c37!important;
  background:#edf9f2;
  font-size:.82rem;
  font-weight:700;
}
.auth-success-message svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
}
.auth-success-message span{
  color:#075c37!important;
}

.auth-two-col-input{
  grid-template-columns:38px 1fr!important;
}
.auth-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.auth-label-row>a{
  color:#8b5700!important;
  font-size:.78rem;
  font-weight:800;
}

.auth-register-cta{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:16px;
  padding:11px 12px;
  border:1px solid #d9e2eb;
  border-radius:11px;
  color:#050505;
  background:#f7fafc;
}
.auth-register-cta>svg{
  width:19px;
  height:19px;
  flex:0 0 19px;
  color:#2f73b8;
}
.auth-register-cta b{
  display:block;
  color:#050505;
  font-size:.82rem;
}
.auth-register-cta p{
  margin:2px 0 0;
  color:#050505!important;
  font-size:.78rem;
  line-height:1.45;
}
.auth-register-cta>a{
  flex:0 0 auto;
  padding:8px 10px;
  border:1px solid #d7a64a;
  border-radius:8px;
  color:#744900!important;
  background:#fff6df;
  font-size:.80rem;
  font-weight:850;
}

.auth-bottom-links{
  display:flex;
  justify-content:center;
  gap:5px;
  margin-top:14px;
  color:#050505;
  font-size:.80rem;
}
.auth-bottom-links a{
  color:#815100!important;
  font-weight:850;
}

.auth-link-button{
  text-decoration:none;
}

.auth-email-locked{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 11px;
  border:1px solid #cce5d8;
  border-radius:10px;
  color:#075a36;
  background:#f0faf4;
}
.auth-email-locked>svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
}
.auth-email-locked small{
  display:block;
  color:#075a36!important;
  font-size:.75rem;
}
.auth-email-locked b{
  display:block;
  margin-top:1px;
  color:#075a36;
  font-size:.84rem;
}

.auth-register-form>label,
.auth-form-grid label{
  display:grid;
  gap:6px;
}
.auth-register-form>label>span,
.auth-form-grid label>span{
  color:#050505;
  font-size:.82rem;
  font-weight:800;
}
.auth-register-form input,
.auth-form-grid input{
  width:100%;
  min-height:44px;
  padding:0 11px;
  border:1px solid #cfd8e2;
  border-radius:9px;
  outline:0;
  color:#050505;
  background:#fff;
  font-size:.84rem;
}
.auth-register-form input:focus,
.auth-form-grid input:focus{
  border-color:#d5a13e;
  box-shadow:0 0 0 3px rgba(213,161,62,.10);
}
.auth-register-form label small,
.auth-form-grid label small{
  color:#050505!important;
  font-size:.76rem;
}

.auth-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.auth-form-grid.three{
  grid-template-columns:.72fr 1fr 1fr;
}

.auth-demo-code{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:12px 0;
  padding:12px 13px;
  border:1px solid #d6e3ef;
  border-radius:11px;
  color:#050505;
  background:#f4f9fd;
}
.auth-demo-code>svg{
  width:20px;
  height:20px;
  flex:0 0 20px;
  color:#2e72b5;
}
.auth-demo-code small{
  display:block;
  color:#050505!important;
  font-size:.74rem;
  font-weight:850;
  letter-spacing:.06em;
}
.auth-demo-code strong{
  display:block;
  margin-top:3px;
  color:#050505;
  font-size:1.3rem;
  letter-spacing:.18em;
}
.auth-demo-code p{
  margin:5px 0 0;
  color:#050505!important;
  font-size:.76rem;
  line-height:1.45;
}

.auth-scope-note{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:14px;
  padding:10px 11px;
  border:1px solid #e4d8b8;
  border-radius:10px;
  color:#050505;
  background:#fffaf0;
}
.auth-scope-note>svg{
  width:17px;
  height:17px;
  flex:0 0 17px;
  color:#8b5b09;
}
.auth-scope-note b{
  display:block;
  color:#050505;
  font-size:.80rem;
}
.auth-scope-note p{
  margin:2px 0 0;
  color:#050505!important;
  font-size:.76rem;
  line-height:1.45;
}

/* =========================================================
   PROFILE SELF-SERVICE PASSWORD
   ========================================================= */
.profile-content-stack{
  display:grid;
  gap:13px;
}
.profile-login-chip{
  display:flex;
  align-items:center;
  gap:8px;
  margin:12px 0 3px;
  padding:9px 10px;
  border:1px solid #d8e5f1;
  border-radius:9px;
  color:#050505;
  background:#f5f9fd;
}
.profile-login-chip>svg{
  width:16px;
  height:16px;
  flex:0 0 16px;
  color:#2c70b2;
}
.profile-login-chip small{
  display:block;
  color:#050505!important;
  font-size:.78rem;
}
.profile-login-chip b{
  display:block;
  margin-top:1px;
  color:#050505;
  font-size:.84rem;
}
.profile-card-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:13px;
}
.profile-card-heading h3{
  margin:0 0 3px;
}
.profile-card-heading p{
  margin:0;
  color:#050505!important;
}
.profile-card-heading>svg{
  width:22px;
  height:22px;
  color:#9a660f;
}
.password-change-card{
  border-color:#ddd7ec;
}
.password-selfservice-note{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:12px;
  padding:10px 11px;
  border:1px solid #cfe5da;
  border-radius:10px;
  color:#050505;
  background:#f1faf5;
}
.password-selfservice-note>svg{
  width:17px;
  height:17px;
  flex:0 0 17px;
  color:#1f7c55;
}
.password-selfservice-note b{
  display:block;
  color:#050505;
  font-size:.82rem;
}
.password-selfservice-note p{
  margin:2px 0 0;
  color:#050505!important;
  font-size:.78rem;
}
.password-grid{
  margin-bottom:11px;
}
.password-update-btn{
  border-color:#b9a7dd;
  color:#3d287f!important;
  background:#faf8ff;
}

/* Keep login/registration text clearly readable */
.auth-card-v2 .avx-sub,
.auth-card-v2 label,
.auth-card-v2 label span,
.auth-card-v2 input,
.auth-card-v2 p,
.auth-card-v2 small{
  color:#050505;
}

@media(max-width:760px){
  .auth-role-tabs{
    grid-template-columns:1fr;
  }
  .auth-form-grid,
  .auth-form-grid.three{
    grid-template-columns:1fr;
  }
  .auth-register-cta{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .auth-register-cta>a{
    width:100%;
    text-align:center;
  }
}


/* =========================================================
   UNIFIED LOGIN — NO ROLE SELECTION
   ========================================================= */
.unified-auth .auth-card-v2{
  max-width:545px;
}
.unified-login-form{
  margin-top:4px;
}
.unified-role-explainer{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:14px;
  padding:11px 12px;
  border:1px solid #d9e3ec;
  border-radius:11px;
  color:#050505;
  background:#f7fafc;
}
.unified-role-explainer>svg{
  width:19px;
  height:19px;
  flex:0 0 19px;
  color:#2e73b8;
}
.unified-role-explainer b{
  display:block;
  color:#050505;
  font-size:.84rem;
}
.unified-role-explainer p{
  margin:3px 0 0;
  color:#050505!important;
  font-size:.80rem;
  line-height:1.5;
}
.unified-role-explainer strong{
  color:#050505;
}
.unified-demo-list{
  display:grid;
  gap:0;
}
.unified-demo-list>div{
  padding:8px 0;
}
.unified-demo-list>div+div{
  border-top:1px solid #e1e6eb;
}
.unified-demo-list small,
.unified-demo-list strong{
  color:#050505!important;
}
.unified-login-stats>div{
  min-width:138px;
}

/* Role was detected by the system, not chosen by the user. */
.detected-role-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:34px;
  background:
    radial-gradient(circle at 90% 5%,rgba(217,164,65,.10),transparent 24%),
    #f5f7fa;
}
.detected-role-card{
  width:min(640px,100%);
  padding:28px;
  border:1px solid #dfe5eb;
  border-radius:20px;
  background:#fff;
  box-shadow:0 18px 50px rgba(15,23,42,.08);
  color:#050505;
}
.detected-role-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  margin-bottom:16px;
  border-radius:15px;
}
.detected-role-icon svg{
  width:27px;
  height:27px;
}
.detected-role-icon.gallery{
  color:#8a5700;
  background:#fff3d8;
}
.detected-role-icon.artist{
  color:#5534b4;
  background:#f0eaff;
}
.detected-role-card h1{
  margin:7px 0 4px;
  color:#050505;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.8rem;
}
.detected-role-name{
  margin:0 0 17px;
  color:#050505!important;
  font-size:.94rem;
  font-weight:700;
}
.detected-role-status,
.detected-role-note{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:12px;
  border-radius:11px;
  color:#050505;
}
.detected-role-status{
  border:1px solid #cce5d7;
  background:#f0faf4;
}
.detected-role-status>svg{
  width:19px;
  height:19px;
  flex:0 0 19px;
  color:#1f7b54;
}
.detected-role-status b,
.detected-role-note b{
  display:block;
  color:#050505;
  font-size:.86rem;
}
.detected-role-status p,
.detected-role-note p{
  margin:3px 0 0;
  color:#050505!important;
  font-size:.80rem;
  line-height:1.5;
}
.detected-role-info{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin:14px 0;
  overflow:hidden;
  border:1px solid #e0e5ea;
  border-radius:11px;
}
.detected-role-info>div{
  padding:11px 12px;
  border-bottom:1px solid #e7ebef;
}
.detected-role-info>div:nth-child(odd){
  border-right:1px solid #e7ebef;
}
.detected-role-info>div:nth-last-child(-n+2){
  border-bottom:0;
}
.detected-role-info span{
  display:block;
  color:#050505;
  font-size:.76rem;
}
.detected-role-info b{
  display:block;
  margin-top:2px;
  color:#050505;
  font-size:.86rem;
}
.detected-role-note{
  margin-bottom:14px;
  border:1px solid #ead9ad;
  background:#fffaf0;
}
.detected-role-note>svg{
  width:19px;
  height:19px;
  flex:0 0 19px;
  color:#96620c;
}

@media(max-width:650px){
  .detected-role-page{
    padding:18px;
  }
  .detected-role-card{
    padding:20px;
  }
  .detected-role-info{
    grid-template-columns:1fr;
  }
  .detected-role-info>div,
  .detected-role-info>div:nth-child(odd),
  .detected-role-info>div:nth-last-child(-n+2){
    border-right:0;
    border-bottom:1px solid #e7ebef;
  }
  .detected-role-info>div:last-child{
    border-bottom:0;
  }
}


/* =========================================================
   STRIPE CHECKOUT
   ========================================================= */
.stripe-checkout-note{
  border-color:#cfd9ff!important;
  background:#f7f8ff!important;
}
.stripe-checkout-note svg{
  color:#635bff!important;
}
.stripe-config-warning{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:10px;
  padding:11px 12px;
  border:1px solid #e5c685;
  border-radius:10px;
  color:#050505;
  background:#fff9eb;
}
.stripe-config-warning>svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
  color:#8a5800;
}
.stripe-config-warning b{
  display:block;
  color:#050505;
  font-size:.84rem;
}
.stripe-config-warning p{
  margin:3px 0 0;
  color:#050505!important;
  font-size:.80rem;
  line-height:1.48;
}
.stripe-config-warning code{
  padding:1px 4px;
  border-radius:4px;
  color:#050505;
  background:#fff;
}
.checkout-buy-btn:disabled{
  cursor:not-allowed;
  opacity:.55;
  filter:grayscale(.25);
  transform:none!important;
}
.payment-receipt-meta b{
  overflow-wrap:anywhere;
  word-break:break-word;
}


/* =========================================================
   USER SIDEBAR BRAND — COMPACT FIT
   ========================================================= */
.sidebar-brand{
  width:100%;
  min-height:auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 2px 9px;
  margin-bottom:10px;
  overflow:hidden;
}
.sidebar-brand-mark{
  width:30px;
  height:28px;
  flex:0 0 30px;
  object-fit:contain;
  margin:0;
}
.sidebar-brand-copy{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
}
.sidebar-brand-copy strong{
  display:block;
  margin:0;
  font-size:1rem;
  line-height:1.05;
  letter-spacing:0;
  white-space:nowrap;
}
.sidebar-brand-copy small{
  display:block;
  max-width:100%;
  margin-top:3px;
  color:var(--gold-400);
  font-size:.56rem;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.08em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
}
.sidebar-brand-copy span{
  display:none !important;
}


/* =========================================================
   TICKET + VVIP CHECKOUT / QR / GALLERY COUNTER
   ========================================================= */
.ticket-checkout-alert{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 14px;
  padding:12px 13px;
  border:1px solid #cfe0f1;
  border-radius:12px;
  color:#050505;
  background:#f5f9fd;
}
.ticket-checkout-alert>svg{
  width:20px;
  height:20px;
  flex:0 0 20px;
  color:#2f73b8;
}
.ticket-checkout-alert b{
  display:block;
  color:#050505;
  font-size:.88rem;
}
.ticket-checkout-alert p{
  margin:3px 0 0;
  color:#050505!important;
  font-size:.82rem;
  line-height:1.5;
}
.ticket-checkout-item{
  grid-template-columns:58px minmax(0,1fr) auto!important;
}
.checkout-ticket-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:13px;
  color:#2769aa;
  background:#eaf4ff;
}
.checkout-ticket-icon.vvip{
  color:#5b3bb7;
  background:#f0eaff;
}
.checkout-ticket-icon svg{
  width:24px;
  height:24px;
}
.locked-badge.approved{
  color:#176743;
  border-color:#cbe5d7;
  background:#eef9f3;
}
.checkout-empty-actions,
.checkout-continue-links{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

/* VVIP request status */
.vvip-price-rule{
  margin-top:9px;
  border-color:#ead7ad!important;
  background:#fffaf0!important;
}
.vvip-request-row{
  align-items:flex-start!important;
}
.vvip-request-actions{
  min-width:170px;
  display:grid;
  justify-items:end;
  gap:7px;
}
.vvip-approval-note{
  margin:5px 0 0;
  color:#050505!important;
  font-size:.80rem;
}

/* Real digital ticket + QR */
.ticket-status-row{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.real-qr-ticket{
  position:relative;
}
.ticket-payment-ref{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:10px;
  font-size:.78rem;
}
.ticket-payment-ref span{
  color:#050505!important;
}
.ticket-payment-ref b{
  color:#050505;
  overflow-wrap:anywhere;
}
.ticket-real-qr{
  width:148px;
  min-height:148px;
  display:grid;
  place-items:center;
  padding:8px;
  border:1px solid #dce3ea;
  border-radius:11px;
  background:#fff;
}
.ticket-real-qr img,
.ticket-real-qr canvas{
  width:132px!important;
  height:132px!important;
  display:block;
}
.ticket-real-qr.disabled{
  opacity:.18;
  filter:grayscale(1);
}
.ticket-code{
  position:relative;
}
.ticket-qr-used-overlay{
  position:absolute;
  top:43px;
  left:50%;
  z-index:3;
  transform:translateX(-50%);
  width:112px;
  height:112px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:4px;
  border:3px solid #9b2d34;
  border-radius:50%;
  color:#9b2d34;
  background:rgba(255,255,255,.92);
}
.ticket-qr-used-overlay svg{
  width:28px;
  height:28px;
}
.ticket-qr-used-overlay span{
  color:#9b2d34!important;
  font-size:1rem;
  font-weight:900;
  letter-spacing:.08em;
}
.ticket-secure-label{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:7px;
  color:#17633f;
  font-size:.76rem;
  font-weight:800;
}
.ticket-secure-label svg{
  width:14px;
  height:14px;
}
.qr-load-fallback{
  color:#050505!important;
  font-size:.78rem;
  text-align:center;
}

/* Payment result ticket item */
.payment-result-ticket-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  flex:0 0 54px;
  border-radius:11px;
  color:#2e72b3;
  background:#eaf4ff;
}
.payment-result-ticket-icon.vvip{
  color:#5a39b4;
  background:#f0eaff;
}
.payment-result-ticket-icon svg{
  width:24px;
  height:24px;
}
.mixed-payment-item{
  align-items:center;
}

/* Purchase history ticket item */
.purchase-ticket-history-item{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
}
.purchase-ticket-history-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#276eaf;
  background:#eaf4ff;
}
.purchase-ticket-history-icon.vvip{
  color:#5b3bb5;
  background:#f0eaff;
}
.purchase-ticket-history-icon svg{
  width:22px;
  height:22px;
}
.purchase-ticket-history-item h3{
  margin:5px 0 2px;
  color:#050505;
  font-size:.90rem;
}
.purchase-ticket-history-item p,
.purchase-ticket-history-item small{
  margin:0;
  color:#050505!important;
  font-size:.80rem;
}
.purchase-ticket-history-item>strong{
  color:#050505;
  font-size:.88rem;
}
.ticket-history-open{
  margin-top:10px;
}

/* Gallery operations */
.gallery-ops-page{
  min-height:100vh;
  padding:26px 30px 46px;
  color:#050505;
  background:#f5f7fa;
}
.gallery-ops-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.gallery-ops-header h1{
  margin:5px 0 4px;
  color:#050505;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.8rem;
}
.gallery-ops-header p{
  margin:0;
  color:#050505!important;
}
.gallery-ops-user{
  display:flex;
  align-items:center;
  gap:12px;
}
.gallery-ops-user small,
.gallery-ops-user b{
  display:block;
  color:#050505!important;
}
.gallery-ops-user a{
  display:flex;
  align-items:center;
  gap:6px;
  padding:9px 11px;
  border:1px solid #dce2e8;
  border-radius:9px;
  color:#050505!important;
  background:#fff;
  font-weight:800;
}
.gallery-ops-user a svg{
  width:16px;
  height:16px;
}
.gallery-ops-message{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:14px;
  padding:11px 12px;
  border-radius:10px;
  color:#050505;
}
.gallery-ops-message.success{
  border:1px solid #bee0ce;
  background:#eff9f3;
}
.gallery-ops-message.error{
  border:1px solid #ebc5c8;
  background:#fff3f4;
}
.gallery-ops-message svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
}
.gallery-ops-message span{
  color:#050505!important;
  font-weight:700;
}
.gallery-ops-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
  margin-bottom:16px;
}
.gallery-counter-card{
  padding:16px;
  border:1px solid #dde4ea;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.045);
}
.gallery-counter-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  margin-bottom:9px;
  border-radius:11px;
  color:#2c70b2;
  background:#eaf4ff;
}
.gallery-counter-icon.purple{
  color:#5c3bb7;
  background:#f0eaff;
}
.gallery-counter-icon svg{
  width:21px;
  height:21px;
}
.gallery-counter-card h2,
.gallery-vvip-section h2{
  margin:0 0 4px;
  color:#050505;
  font-size:1rem;
}
.gallery-counter-card p,
.gallery-vvip-section p{
  margin:0;
  color:#050505!important;
  font-size:.82rem;
  line-height:1.5;
}
.gallery-token-form{
  display:flex;
  align-items:end;
  gap:8px;
  margin-top:12px;
}
.gallery-token-form label{
  flex:1;
}
.gallery-token-form label span,
.gallery-vvip-action-form label span{
  display:block;
  margin-bottom:5px;
  color:#050505;
  font-size:.76rem;
  font-weight:800;
}
.gallery-token-form input,
.gallery-vvip-action-form input{
  width:100%;
  min-height:40px;
  padding:0 10px;
  border:1px solid #ccd6df;
  border-radius:8px;
  color:#050505;
  background:#fff;
}
.gallery-token-form button{
  min-height:40px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 12px;
  border:0;
  border-radius:8px;
  color:#fff;
  background:#2f73b8;
  font-weight:800;
}
.gallery-token-form button svg{
  width:15px;
  height:15px;
}
.gallery-vvip-section{
  margin-top:14px;
  padding:16px;
  border:1px solid #dde4ea;
  border-radius:14px;
  background:#fff;
}
.gallery-vvip-section.compact{
  margin-top:0;
}
.gallery-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:11px;
}
.gallery-vvip-list{
  display:grid;
  gap:10px;
}
.gallery-vvip-request{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:14px;
  padding:13px;
  border:1px solid #e2e7ec;
  border-radius:11px;
  background:#fbfcfd;
}
.gallery-vvip-main{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.gallery-vvip-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex:0 0 42px;
  border-radius:10px;
  color:#5b3bb5;
  background:#f0eaff;
}
.gallery-vvip-icon svg{
  width:20px;
  height:20px;
}
.gallery-vvip-main span,
.gallery-vvip-main h3,
.gallery-vvip-main p,
.gallery-vvip-main small{
  color:#050505!important;
}
.gallery-vvip-main h3{
  margin:2px 0 2px;
  font-size:.92rem;
}
.gallery-vvip-main p{
  margin:0;
  font-size:.78rem;
}
.gallery-vvip-main small{
  display:block;
  margin-top:6px;
  font-size:.76rem;
}
.gallery-vvip-meta{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:7px;
}
.gallery-vvip-meta b{
  padding:4px 6px;
  border-radius:6px;
  color:#050505;
  background:#eef2f6;
  font-size:.74rem;
}
.gallery-vvip-action-form{
  display:grid;
  gap:8px;
}
.gallery-vvip-action-form>div{
  display:flex;
  gap:7px;
}
.gallery-approve-btn,
.gallery-reject-btn{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex:1;
  border:0;
  border-radius:8px;
  font-weight:850;
}
.gallery-approve-btn{
  color:#fff;
  background:#23734e;
}
.gallery-reject-btn{
  color:#fff;
  background:#a5373e;
}
.gallery-approve-btn svg,
.gallery-reject-btn svg{
  width:15px;
  height:15px;
}
.gallery-empty-state{
  display:flex;
  align-items:center;
  gap:7px;
  padding:13px;
  border:1px dashed #ccd6df;
  border-radius:9px;
  color:#050505;
}
.gallery-empty-state.small{
  font-size:.80rem;
}
.gallery-ops-two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
  margin-top:14px;
}
.gallery-simple-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid #e6ebef;
}
.gallery-simple-row:last-child{
  border-bottom:0;
}
.gallery-simple-row b,
.gallery-simple-row span{
  color:#050505!important;
}
.gallery-simple-row>div span{
  display:block;
  margin-top:2px;
  font-size:.76rem;
}

/* Ticket verification page */
.ticket-verify-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:#f5f7fa;
}
.ticket-verify-card{
  width:min(760px,100%);
  padding:22px;
  border:1px solid #dce3ea;
  border-radius:16px;
  color:#050505;
  background:#fff;
  box-shadow:0 18px 50px rgba(15,23,42,.08);
}
.ticket-verify-head{
  display:grid;
  grid-template-columns:50px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.ticket-verify-head .gallery-counter-icon{
  margin:0;
}
.ticket-verify-head h1{
  margin:2px 0 0;
  color:#050505;
  font-size:1.35rem;
}
.ticket-verify-head>a{
  color:#050505!important;
  font-size:.80rem;
  font-weight:800;
}
.ticket-verify-status{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:12px;
  border-radius:11px;
}
.ticket-verify-status.valid{
  border:1px solid #bfe0ce;
  background:#eef9f3;
}
.ticket-verify-status.used{
  border:1px solid #e5c0c4;
  background:#fff3f4;
}
.ticket-verify-status.warning{
  border:1px solid #ead6aa;
  background:#fffaf0;
}
.ticket-verify-status>svg{
  width:20px;
  height:20px;
  flex:0 0 20px;
}
.ticket-verify-status b,
.ticket-verify-status p{
  color:#050505!important;
}
.ticket-verify-status p{
  margin:3px 0 0;
  font-size:.80rem;
}
.ticket-verify-type{
  margin:15px 0 10px;
}
.ticket-verify-type h2{
  margin:6px 0 2px;
  color:#050505;
  font-size:1rem;
}
.ticket-verify-type p{
  margin:0;
  color:#050505!important;
}
.ticket-verify-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border:1px solid #dfe5ea;
  border-radius:11px;
}
.ticket-verify-grid>div{
  padding:10px 11px;
  border-bottom:1px solid #e6eaee;
}
.ticket-verify-grid>div:nth-child(odd){
  border-right:1px solid #e6eaee;
}
.ticket-verify-grid span,
.ticket-verify-grid b{
  display:block;
  color:#050505!important;
}
.ticket-verify-grid span{
  font-size:.75rem;
}
.ticket-verify-grid b{
  margin-top:2px;
  font-size:.84rem;
  overflow-wrap:anywhere;
}
.ticket-entry-approve-form{
  margin-top:14px;
}
.ticket-entry-approve-form button{
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:0;
  border-radius:10px;
  color:#fff;
  background:#23734e;
  font-size:.88rem;
  font-weight:900;
}
.ticket-entry-approve-form button svg{
  width:18px;
  height:18px;
}
.ticket-entry-approve-form p{
  margin:6px 0 0;
  color:#050505!important;
  font-size:.76rem;
  text-align:center;
}
.ticket-entry-used-final{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:14px;
  padding:12px;
  border:1px solid #e0b8bc;
  border-radius:10px;
  color:#8d2930;
  background:#fff4f5;
  font-weight:900;
}
.ticket-entry-used-final span{
  color:#8d2930!important;
}

@media(max-width:900px){
  .gallery-ops-grid,
  .gallery-ops-two-col{
    grid-template-columns:1fr;
  }
  .gallery-vvip-request{
    grid-template-columns:1fr;
  }
}
@media(max-width:700px){
  .ticket-checkout-item{
    grid-template-columns:48px minmax(0,1fr)!important;
  }
  .ticket-checkout-item .checkout-cart-price{
    grid-column:2;
  }
  .purchase-ticket-history-item{
    grid-template-columns:46px minmax(0,1fr);
  }
  .purchase-ticket-history-item>strong{
    grid-column:2;
  }
  .vvip-request-actions{
    min-width:0;
    justify-items:start;
  }
  .gallery-ops-page{
    padding:18px;
  }
  .gallery-ops-header,
  .gallery-ops-user{
    flex-direction:column;
  }
  .gallery-token-form{
    flex-direction:column;
    align-items:stretch;
  }
  .ticket-verify-grid{
    grid-template-columns:1fr;
  }
  .ticket-verify-grid>div,
  .ticket-verify-grid>div:nth-child(odd){
    border-right:0;
  }
  .ticket-verify-head{
    grid-template-columns:44px 1fr;
  }
  .ticket-verify-head>a{
    grid-column:2;
  }
}


.gallery-camera-scanner{
  margin-top:12px;
  padding:10px;
  border:1px solid #d8e3ed;
  border-radius:10px;
  background:#f7fafc;
}
.gallery-camera-scanner button{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:0;
  border-radius:8px;
  color:#fff;
  background:#1f6fae;
  font-weight:850;
}
.gallery-camera-scanner button svg{
  width:17px;
  height:17px;
}
.gallery-camera-scanner video{
  width:100%;
  max-height:310px;
  margin-top:9px;
  border-radius:9px;
  object-fit:cover;
  background:#08111c;
}
.gallery-camera-scanner p{
  margin:7px 0 0;
  color:#050505!important;
  font-size:.78rem;
  line-height:1.45;
}


/* =========================================================
   TIKET SAYA — BOOKING LIST + SCREENSHOT-FRIENDLY TICKET VIEW
   ========================================================= */
.ticket-booking-list{
  display:grid;
  gap:10px;
}
.ticket-booking-row{
  display:grid;
  grid-template-columns:54px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:14px;
  border:1px solid #dfe5eb;
  border-radius:13px;
  background:#fff;
  box-shadow:0 7px 20px rgba(15,23,42,.035);
}
.ticket-booking-row.used{
  background:#fafafa;
}
.ticket-booking-icon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#276eaf;
  background:#eaf4ff;
}
.ticket-booking-icon.vvip{
  color:#5a39b4;
  background:#f0eaff;
}
.ticket-booking-icon svg{
  width:23px;
  height:23px;
}
.ticket-booking-status{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.ticket-booking-main h3{
  margin:6px 0 2px;
  color:#050505;
  font-size:.96rem;
}
.ticket-booking-main>p{
  margin:0;
  color:#050505!important;
  font-size:.80rem;
  font-weight:800;
}
.ticket-booking-meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:8px;
}
.ticket-booking-meta span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:#050505!important;
  font-size:.80rem;
}
.ticket-booking-meta svg{
  width:14px;
  height:14px;
}
.ticket-booking-action{
  min-width:145px;
  display:grid;
  justify-items:end;
  gap:5px;
}
.ticket-booking-action small{
  color:#050505!important;
  font-size:.74rem;
}
.ticket-view-button{
  min-height:40px;
  padding:0 13px;
}

.ticket-detail-page-intro{
  margin-bottom:14px;
}
.ticket-view-shell{
  display:flex;
  justify-content:center;
}
.ticket-view-card{
  width:min(900px,100%);
  overflow:hidden;
  border:1px solid #d9e1e8;
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 50px rgba(15,23,42,.08);
}
.ticket-view-card.used{
  background:#fcfcfc;
}
.ticket-view-brand{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:15px 18px;
  color:#fff;
  background:#0d1724;
}
.ticket-view-brand-logo{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid rgba(237,190,92,.4);
  border-radius:9px;
  color:#edbe5c;
  background:#101f30;
}
.ticket-view-brand-logo svg{
  width:21px;
  height:21px;
}
.ticket-view-brand strong{
  display:block;
  color:#fff!important;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.25rem;
}
.ticket-view-brand>div>span{
  display:block;
  margin-top:2px;
  color:#edbe5c!important;
  font-size:.68rem;
  font-weight:850;
  letter-spacing:.11em;
}
.ticket-view-status{
  display:flex;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:wrap;
}
.ticket-view-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 252px;
  gap:0;
}
.ticket-view-info{
  padding:22px;
}
.ticket-view-title>span{
  color:#855500!important;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.09em;
}
.ticket-view-title h3{
  margin:5px 0 3px;
  color:#050505;
  font-size:1.35rem;
}
.ticket-view-title p{
  margin:0;
  color:#050505!important;
  font-size:.84rem;
}
.ticket-view-holder{
  margin-top:17px;
  padding:12px 13px;
  border:1px solid #dbe3ea;
  border-radius:10px;
  background:#f8fafc;
}
.ticket-view-holder span{
  display:block;
  color:#050505!important;
  font-size:.76rem;
  font-weight:700;
}
.ticket-view-holder strong{
  display:block;
  margin-top:2px;
  color:#050505;
  font-size:1rem;
}
.ticket-view-holder p{
  margin:2px 0 0;
  color:#050505!important;
  font-size:.80rem;
}
.ticket-view-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:12px;
}
.ticket-view-grid>div{
  min-height:68px;
  padding:10px 11px;
  border:1px solid #e0e6eb;
  border-radius:9px;
  background:#fff;
}
.ticket-view-grid span{
  display:block;
  color:#050505!important;
  font-size:.74rem;
}
.ticket-view-grid b{
  display:block;
  margin-top:4px;
  color:#050505;
  font-size:.86rem;
  overflow-wrap:anywhere;
}
.ticket-view-counter-note,
.ticket-view-used-message{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:13px;
  padding:11px 12px;
  border-radius:10px;
}
.ticket-view-counter-note{
  border:1px solid #cfe0f0;
  background:#f3f8fd;
}
.ticket-view-used-message{
  border:1px solid #e2c1c5;
  background:#fff4f5;
}
.ticket-view-counter-note>svg,
.ticket-view-used-message>svg{
  width:19px;
  height:19px;
  flex:0 0 19px;
}
.ticket-view-counter-note b,
.ticket-view-used-message b{
  display:block;
  color:#050505;
  font-size:.84rem;
}
.ticket-view-counter-note p,
.ticket-view-used-message p{
  margin:3px 0 0;
  color:#050505!important;
  font-size:.79rem;
  line-height:1.5;
}
.ticket-view-qr-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px 16px;
  border-left:1px dashed #ccd5de;
  background:#fbfcfd;
}
.ticket-view-qr-wrap{
  position:relative;
  width:214px;
  height:214px;
  display:grid;
  place-items:center;
  padding:10px;
  border:2px solid #101010;
  border-radius:13px;
  background:#fff;
}
.ticket-view-qr-wrap.disabled{
  border-color:#c8c8c8;
}
.ticket-view-qr{
  width:190px;
  height:190px;
  display:grid;
  place-items:center;
  background:#fff;
}
.ticket-view-qr canvas{
  display:block!important;
  width:190px!important;
  height:190px!important;
  image-rendering:pixelated;
}

/* QRCode.js also creates a hidden <img>. Keep it hidden so the QR
   is not rendered twice / stacked vertically inside the ticket. */
.ticket-view-qr img{
  display:none!important;
}
.ticket-view-qr-wrap.disabled .ticket-view-qr{
  opacity:.13;
  filter:grayscale(1);
}
.ticket-view-qr-used{
  position:absolute;
  inset:40px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:4px;
  border:4px solid #9b2d34;
  border-radius:50%;
  color:#9b2d34;
  background:rgba(255,255,255,.94);
  transform:rotate(-8deg);
}
.ticket-view-qr-used svg{
  width:34px;
  height:34px;
}
.ticket-view-qr-used span{
  color:#9b2d34!important;
  font-size:1.15rem;
  font-weight:950;
  letter-spacing:.12em;
}
.ticket-view-code{
  display:block;
  max-width:100%;
  margin-top:10px;
  color:#050505;
  font-size:.88rem;
  text-align:center;
  overflow-wrap:anywhere;
}
.ticket-view-scan-label{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:5px;
  color:#050505!important;
  font-size:.82rem;
  font-weight:800;
  text-align:center;
}
.ticket-view-scan-label svg{
  width:15px;
  height:15px;
}
.ticket-view-screenshot-hint{
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin-top:12px;
  padding:9px 10px;
  border:1px solid #d8e3ed;
  border-radius:9px;
  color:#050505;
  background:#fff;
}
.ticket-view-screenshot-hint svg{
  width:16px;
  height:16px;
  flex:0 0 16px;
  color:#2d70b1;
}
.ticket-view-screenshot-hint span{
  color:#050505!important;
  font-size:.76rem;
  line-height:1.4;
}
.ticket-view-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 18px;
  border-top:1px solid #e1e6eb;
  background:#f8fafc;
}
.ticket-view-footer span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#050505!important;
  font-size:.76rem;
  font-weight:750;
}
.ticket-view-footer svg{
  width:14px;
  height:14px;
}

@media(max-width:850px){
  .ticket-view-body{
    grid-template-columns:1fr;
  }
  .ticket-view-qr-panel{
    border-left:0;
    border-top:1px dashed #ccd5de;
  }
}
@media(max-width:680px){
  .ticket-booking-row{
    grid-template-columns:46px minmax(0,1fr);
  }
  .ticket-booking-action{
    grid-column:2;
    min-width:0;
    justify-items:start;
  }
  .ticket-view-brand{
    grid-template-columns:40px 1fr;
  }
  .ticket-view-status{
    grid-column:2;
    justify-content:flex-start;
  }
  .ticket-view-grid{
    grid-template-columns:1fr;
  }
  .ticket-view-info{
    padding:16px;
  }
  .ticket-view-qr-panel{
    padding:18px 12px;
  }
  .ticket-view-qr-wrap{
    width:min(214px,100%);
    height:auto;
    aspect-ratio:1/1;
  }
  .ticket-view-qr,
  .ticket-view-qr canvas{
    width:min(190px,calc(100vw - 118px))!important;
    height:min(190px,calc(100vw - 118px))!important;
  }
  .ticket-view-qr img{
    display:none!important;
  }
}


/* =========================================================
   ARTIST WORKSPACE — INTEGRATED WITH ARTVISTA PROTOTYPE STYLE
   ========================================================= */
.artist-theme{background:#0d1724}
.artist-sidebar-card{margin-top:10px}
.artist-avatar img,.artist-profile-photo img{width:100%;height:100%;object-fit:cover}
.artist-topbar .top-actions{gap:10px}
.artist-date-chip{
  display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid #dde3e9;border-radius:9px;background:#fff;color:#050505;font-size:.78rem;font-weight:750
}
.artist-date-chip svg{width:15px;height:15px}
.artist-content{padding:18px 20px 28px}
.artist-alert{display:flex;gap:8px;align-items:flex-start;margin-bottom:12px;padding:10px 12px;border-radius:10px;color:#050505}
.artist-alert.success{background:#eff9f3;border:1px solid #bfe0cd}.artist-alert.error{background:#fff2f3;border:1px solid #ecc3c7}
.artist-alert svg{width:18px;height:18px;flex:0 0 18px}.artist-alert span{color:#050505!important;font-weight:700}
.artist-hero-card{
  display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;padding:18px;border:1px solid #dfe5eb;border-radius:15px;background:linear-gradient(135deg,#fff,#f8fafc)
}
.artist-hero-card>div>span{color:#a06b11!important;font-size:.70rem;font-weight:900;letter-spacing:.13em}
.artist-hero-card h2{margin:4px 0;color:#050505;font-size:1.3rem}.artist-hero-card p{margin:0;color:#050505!important;font-size:.84rem}
.artist-metric-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:13px}
.artist-metric-card{display:block;padding:12px;border:1px solid #e0e5ea;border-radius:12px;background:#fff;color:#050505!important}
.artist-metric-card small,.artist-metric-card strong,.artist-metric-card em{display:block;color:#050505!important}
.artist-metric-card small{margin-top:7px;font-size:.74rem}.artist-metric-card strong{font-size:1.35rem}.artist-metric-card em{font-size:.70rem;font-style:normal}
.artist-metric-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:9px}
.artist-metric-icon svg{width:18px;height:18px}.artist-metric-icon.purple{background:#f0eaff;color:#5b3bb5}.artist-metric-icon.blue{background:#eaf4ff;color:#2e70b0}.artist-metric-icon.green{background:#eaf7f0;color:#23734e}.artist-metric-icon.gold{background:#fff3d9;color:#a06b11}
.artist-dashboard-two{display:grid;grid-template-columns:1.35fr .9fr;gap:11px;margin-bottom:11px}
.artist-panel{border:1px solid #dfe5eb;border-radius:13px;background:#fff;overflow:hidden}
.artist-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:13px 14px;border-bottom:1px solid #e8ecef}
.artist-panel-head h3{margin:0;color:#050505;font-size:.94rem}.artist-panel-head p{margin:3px 0 0;color:#050505!important;font-size:.75rem}.artist-panel-head>a{color:#9a650d!important;font-size:.75rem;font-weight:850}
.artist-mini-art-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:12px}
.artist-mini-art-grid article{position:relative;display:grid;grid-template-columns:68px 1fr;gap:9px;padding:8px;border:1px solid #e6eaee;border-radius:9px}
.artist-mini-art-grid img{width:68px;height:68px;object-fit:cover;border-radius:7px}.artist-mini-art-grid b,.artist-mini-art-grid small,.artist-mini-art-grid strong{display:block;color:#050505!important}.artist-mini-art-grid small{font-size:.68rem}.artist-mini-art-grid strong{margin-top:5px;font-size:.78rem}.artist-mini-art-grid .badge{position:absolute;right:7px;bottom:7px}
.artist-ai-summary{padding-bottom:12px}.artist-ai-result-card{display:flex;gap:10px;padding:14px}.artist-ai-result-card small,.artist-ai-result-card strong,.artist-ai-result-card p{display:block;color:#050505!important}.artist-ai-result-card strong{margin:4px 0;font-size:1rem}.artist-ai-result-card p{margin:0;font-size:.72rem}
.artist-ai-summary>.secondary-user-btn{margin:0 12px;width:calc(100% - 24px)}
.artist-empty{display:flex;align-items:center;justify-content:center;gap:7px;min-height:110px;padding:18px;color:#050505}.artist-empty svg{width:21px;height:21px}
.artist-activity-list{padding:7px 13px}.artist-activity-list>div{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid #edf0f3}.artist-activity-list>div:last-child{border-bottom:0}.artist-activity-list>div>span{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:#f1edff;color:#5b3bb5}.artist-activity-list svg{width:15px;height:15px}.artist-activity-list b,.artist-activity-list small{display:block;color:#050505!important}.artist-activity-list b{font-size:.77rem}.artist-activity-list small{font-size:.68rem}
.artist-exhibition-list{padding:8px 12px}.artist-exhibition-list>div{display:flex;gap:9px;padding:7px 0;border-bottom:1px solid #edf0f3}.artist-exhibition-list img{width:54px;height:48px;object-fit:cover;border-radius:7px}.artist-exhibition-list b,.artist-exhibition-list small,.artist-exhibition-list span{display:block;color:#050505!important}.artist-exhibition-list b{font-size:.77rem}.artist-exhibition-list small,.artist-exhibition-list span{font-size:.68rem}
.artist-banner{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 17px;border:1px solid #ded3ff;border-radius:13px;background:#f7f4ff}.artist-banner h3{margin:0;color:#050505;font-size:.92rem}.artist-banner h3 svg{width:17px;height:17px;display:inline}.artist-banner p{margin:4px 0 0;color:#050505!important;font-size:.78rem}
.artist-form-panel{padding-bottom:14px}.artist-form{display:grid;gap:11px;padding:14px}.artist-form label>span,.artist-final-price-form label>span{display:block;margin-bottom:5px;color:#050505;font-size:.75rem;font-weight:800}
.artist-form input,.artist-form select,.artist-form textarea,.artist-final-price-form input{
  width:100%;min-height:40px;padding:8px 10px;border:1px solid #ccd5de;border-radius:8px;background:#fff;color:#050505;font:inherit
}
.artist-form textarea{resize:vertical}.artist-form-grid{display:grid;gap:10px}.artist-form-grid.two{grid-template-columns:1fr 1fr}.artist-form-grid.three{grid-template-columns:repeat(3,1fr)}
.artist-file-drop{padding:11px;border:1px dashed #b8c4cf;border-radius:9px;background:#f9fbfc}.artist-file-drop small{display:block;margin-top:5px;color:#050505!important;font-size:.70rem}
.artist-form-note{display:flex;gap:7px;padding:9px 10px;border:1px solid #d9e4ef;border-radius:8px;background:#f5f9fd;color:#050505}.artist-form-note svg{width:16px;height:16px;flex:0 0 16px}.artist-form-note span{color:#050505!important;font-size:.74rem}
.artist-table-wrap{overflow:auto}.artist-table{width:100%;border-collapse:collapse}.artist-table th{padding:9px 10px;background:#f7f9fb;color:#050505;text-align:left;font-size:.72rem;border-bottom:1px solid #dfe5eb}.artist-table td{padding:9px 10px;color:#050505;font-size:.76rem;border-bottom:1px solid #edf0f3;vertical-align:middle}.artist-table td small{display:block;color:#050505!important;font-size:.68rem;margin-top:2px}
.artist-table-art{display:flex;align-items:center;gap:8px;min-width:180px}.artist-table-art img{width:48px;height:48px;object-fit:cover;border-radius:7px}.artist-table-art b{display:block;color:#050505}
.artist-action-row{display:flex;gap:5px;align-items:center}.artist-action-row a,.artist-action-row button{display:inline-flex;align-items:center;gap:4px;padding:6px 7px;border:1px solid #d9e0e6;border-radius:7px;background:#fff;color:#050505!important;font-size:.70rem;font-weight:800}.artist-action-row button{cursor:pointer}.artist-action-row svg{width:13px;height:13px}
.artist-ai-large{margin:14px;padding:16px;border:1px solid #d7ccfa;border-radius:11px;background:#f8f5ff}.artist-ai-large span,.artist-ai-large strong,.artist-ai-large p{display:block;color:#050505!important}.artist-ai-large span{font-size:.69rem;font-weight:900;letter-spacing:.08em}.artist-ai-large strong{margin:7px 0;font-size:1.25rem}.artist-ai-large p{margin:0;font-size:.76rem}
.artist-final-price-form{display:grid;gap:8px;padding:0 14px 14px}.artist-final-price-form small{color:#050505!important;font-size:.70rem}
.artist-total-pill{display:inline-flex;align-items:center;gap:6px;padding:9px 11px;border:1px solid #bfe0ce;border-radius:9px;background:#eff9f3;color:#176543;font-weight:900}.artist-total-pill svg{width:17px;height:17px}
.artist-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding:13px}.artist-bought-card{overflow:hidden;border:1px solid #dfe5eb;border-radius:11px;background:#fff}.artist-bought-card>img{width:100%;height:155px;object-fit:cover}.artist-bought-card>div{padding:10px}.artist-bought-card h3,.artist-bought-card p,.artist-bought-card strong,.artist-bought-card small{display:block;color:#050505!important}.artist-bought-card h3{margin:7px 0 2px;font-size:.88rem}.artist-bought-card p{margin:0;font-size:.72rem}.artist-bought-card strong{margin-top:7px}.artist-bought-card small{margin-top:4px;font-size:.68rem}
.artist-profile-head{display:flex;align-items:center;gap:12px;padding-bottom:3px}.artist-profile-photo{width:82px;height:82px;display:grid;place-items:center;overflow:hidden;border:3px solid #d9cbff;border-radius:50%;background:#eee;color:#333;font-size:1.2rem;font-weight:900}.artist-profile-head b,.artist-profile-head span{display:block;color:#050505!important}.artist-profile-head span{font-size:.75rem}.artist-small-file{display:inline-block;margin-top:6px;font-size:.70rem}.artist-small-file input{min-height:0;padding:4px;margin-top:3px}
.artist-settings-panel{max-width:760px}
@media(max-width:1100px){.artist-metric-grid{grid-template-columns:repeat(3,1fr)}.artist-dashboard-two{grid-template-columns:1fr}.artist-card-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.artist-metric-grid{grid-template-columns:1fr 1fr}.artist-form-grid.two,.artist-form-grid.three{grid-template-columns:1fr}.artist-card-grid{grid-template-columns:1fr}.artist-hero-card,.artist-banner{align-items:flex-start;flex-direction:column}.artist-content{padding:14px}}

 /* QR final size correction for screenshot-friendly ticket detail */
.ticket-view-body{grid-template-columns:minmax(0,1fr) 252px}
.ticket-view-qr-wrap{width:214px!important;height:214px!important;padding:10px}
.ticket-view-qr{width:190px!important;height:190px!important}
.ticket-view-qr canvas{display:block!important;width:190px!important;height:190px!important;image-rendering:pixelated}
.ticket-view-qr img{display:none!important}


/* =========================================================
   ArtVista v2 — Digital Art Marketplace
   ========================================================= */
.flash{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:10px 12px;border-radius:10px;border:1px solid #dce4eb;background:#fff;color:#4d5a6b;font-size:.66rem}
.flash.error{background:#fff2f3;border-color:#f1d1d5;color:#a53e48}.flash svg{width:16px;height:16px}
.sidebar-apply{display:flex;align-items:center;gap:8px;margin:10px 0;padding:8px 10px;border-radius:9px;color:#fff;background:linear-gradient(135deg,#7652d8,#5e3bbb);font-size:.6rem;font-weight:750}
.sidebar-apply svg{width:14px;height:14px}
.artist-welcome,.admin-hero{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:15px;padding:18px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:var(--shadow-sm)}
.artist-welcome h2,.admin-hero h2{margin:8px 0 3px;font-family:Georgia,serif;font-size:1.45rem}
.artist-welcome p,.admin-hero p{margin:0;color:var(--muted);font-size:.65rem}
.admin-kpis{display:flex;gap:18px}.admin-kpis small{display:block;color:#8995a4;font-size:.5rem}.admin-kpis b{display:block;margin-top:3px;font-size:.8rem}
.ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.ai-art img{width:100%;height:155px;object-fit:cover;border-radius:9px;margin-bottom:10px}.ai-card h3{font-size:.76rem;margin:0 0 8px}.ai-range{padding:9px;border-radius:9px;background:#f7f5ff;margin-bottom:9px}.ai-range span{display:block;color:#8b7aa8;font-size:.52rem}.ai-range b{display:block;color:#5e43b5;font-size:.72rem;margin-top:3px}.mini-price-form{display:flex;gap:7px;margin-top:8px}.mini-price-form input{min-width:0;flex:1;border:1px solid var(--line);border-radius:8px;padding:7px;font-size:.6rem}.certificate-list{display:grid;gap:12px}.cert-row{display:grid;grid-template-columns:110px 1fr 230px;gap:12px;align-items:center}.cert-row>img{width:110px;height:90px;object-fit:cover;border-radius:8px}.cert-row h3{margin:0 0 4px;font-size:.75rem}.cert-form{display:grid;gap:6px}.cert-form input{padding:7px 8px;border:1px solid var(--line);border-radius:8px;font-size:.58rem}.wallet-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px;margin-bottom:14px}.wallet-card{padding:16px;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:var(--shadow-sm)}.wallet-card.main{background:linear-gradient(135deg,#171b32,#5f41bf);color:#fff}.wallet-card small{display:block;color:#8a96a5;font-size:.55rem}.wallet-card.main small{color:#ddd9f4}.wallet-card strong{display:block;margin:7px 0 2px;font-size:1.3rem}.wallet-card span{font-size:.52rem;color:#8994a3}.wallet-card.main span{color:#ddd9f4}.wallet-layout{display:grid;grid-template-columns:1.3fr .7fr;gap:14px}.wallet-tx{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #edf0f3}.wallet-tx b{display:block;font-size:.63rem}.wallet-tx small{display:block;color:#8b96a5;font-size:.5rem}.wallet-tx strong{font-size:.64rem}.wallet-tx strong.credit{color:#1e855c}.wallet-tx strong.debit{color:#b44d54}.wallet-layout form label,.profile-form label,.booking-form label{display:grid;gap:5px;margin-bottom:9px;color:#4f5b6c;font-size:.6rem;font-weight:700}.wallet-layout form input,.wallet-layout form select,.profile-form input,.profile-form textarea,.profile-form select,.booking-form input,.booking-form select,.booking-form textarea{min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:.64rem;outline:0}.profile-form textarea{resize:vertical}.verify-steps{display:flex;gap:8px;margin-bottom:14px}.verify-steps span{flex:1;padding:8px;border-radius:9px;background:#f4f6f8;text-align:center;font-size:.56rem;font-weight:700;color:#677486}.notification-list{padding:0;overflow:hidden}.notification-row{display:flex;gap:10px;padding:13px 14px;border-bottom:1px solid #edf0f3}.notification-row:hover{background:#fafbfc}.notif-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:#f1ecff;color:#6544c2;flex:0 0 32px}.notif-icon svg{width:15px}.notification-row b{font-size:.64rem}.notification-row p{margin:2px 0;color:#697689;font-size:.57rem}.notification-row small{color:#929cab;font-size:.49rem}
.admin-table-card{overflow:hidden;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:var(--shadow-sm)}.admin-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px;border-bottom:1px solid #edf0f3}.admin-row:last-child{border-bottom:0}.admin-main{min-width:0;flex:1}.admin-main b{display:block;font-size:.67rem}.admin-main small{display:block;color:#8a96a5;font-size:.52rem;margin-top:3px}.admin-main p{margin:5px 0 0;color:#667487;font-size:.57rem;line-height:1.4}.admin-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.admin-actions input,.admin-actions select{min-height:34px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;font-size:.56rem}.admin-thumb{width:62px;height:48px;object-fit:cover;border-radius:7px}.admin-theme .nav a.active{background:#efeaff;color:#6746c5}.admin-theme .sidebar-brand-copy span{color:#6746c5}.artist-theme .nav a.active{background:#efeaff;color:#6746c5}
.checkout-secure-note{display:block;margin-top:9px;color:#909aa7;font-size:.5rem;text-align:center}.locked-badge{display:inline-flex;align-items:center;gap:4px;margin-left:5px;color:#7c8795;font-size:.52rem}.locked-badge svg{width:11px}.checkout-summary-lines .total{margin-top:8px;padding-top:10px;border-top:1px solid #e4e8ed}.checkout-summary-lines .total b{font-size:.85rem}
@media(max-width:1050px){.ai-grid{grid-template-columns:repeat(2,1fr)}.wallet-layout{grid-template-columns:1fr}.cert-row{grid-template-columns:90px 1fr}.cert-row .cert-form{grid-column:1/-1}.wallet-grid{grid-template-columns:1fr 1fr}.admin-kpis{display:none}}
@media(max-width:700px){.ai-grid{grid-template-columns:1fr}.wallet-grid{grid-template-columns:1fr}.artist-welcome,.admin-hero{align-items:flex-start;flex-direction:column}.admin-row{align-items:flex-start;flex-direction:column}.admin-actions{width:100%}}


/* ############ 3) TEMA GALERI SENI ############ */
/* =========================================================
   ARTVISTA — GALLERY THEME (Tailwind Build)
   ---------------------------------------------------------
   Lapisan tema visual "Galeri Seni".
   Hanya mengubah rupa (warna, tipografi, bingkai, ruang).
   Tiada perubahan pada struktur HTML / PHP / JS.
   ========================================================= */

/* ---------------------------------------------------------
   1. TOKEN WARNA & TIPOGRAFI
   --------------------------------------------------------- */
:root{
  /* Dinding galeri (gelap) */
  --wall-950:#0F0C0A;
  --wall-900:#171310;
  --wall-850:#1E1813;
  --wall-800:#261F19;
  --wall-700:#3A2F26;

  /* Token lama dipetakan semula supaya kod sedia ada terus jalan */
  --navy-950:#0F0C0A;
  --navy-900:#171310;
  --navy-850:#1E1813;
  --navy-800:#261F19;

  /* Emas muzium */
  --gold-700:#7E6318;
  --gold-600:#9A7B1F;
  --gold-500:#C6A344;
  --gold-400:#DFC177;
  --gold-300:#EBD7A2;
  --gold-100:#FBF3DF;

  /* Aksen seni */
  --terracotta:#B4553B;
  --terracotta-100:#FBEDE8;
  --sage:#4F7A63;
  --sage-100:#EAF2ED;
  --indigo-ink:#4B4E96;

  --purple-600:#4B4E96;
  --purple-100:#ECEDF7;
  --blue-600:#3F6B8F;
  --blue-100:#EAF1F6;
  --green-600:#4F7A63;
  --green-100:#EAF2ED;
  --red-600:#B4553B;
  --red-100:#FBEDE8;

  /* Kanvas & teks */
  --ink:#14110F;
  --text:#221D19;
  --muted:#6B5F53;
  --line:#E6DED0;
  --line-strong:#D6C9B4;
  --surface:#FFFFFF;
  --canvas:#F6F2EA;
  --soft:#FBF9F5;

  --shadow-sm:0 1px 2px rgba(20,17,15,.05), 0 8px 22px rgba(20,17,15,.06);
  --shadow-md:0 2px 4px rgba(20,17,15,.06), 0 18px 42px rgba(20,17,15,.10);

  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;

  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-ui:"Inter","Segoe UI",Roboto,Arial,sans-serif;
}

/* ---------------------------------------------------------
   2. ASAS: KANVAS BERTEKSTUR + TIPOGRAFI
   --------------------------------------------------------- */
html,body{background:var(--canvas)}

body{
  font-family:var(--font-ui);
  color:var(--ink);
  background-color:var(--canvas);
  background-image:
    radial-gradient(circle at 12% 0%,rgba(198,163,68,.055),transparent 42%),
    radial-gradient(circle at 92% 8%,rgba(180,85,59,.045),transparent 38%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  background-attachment:fixed;
  letter-spacing:.002em;
}

h1,h2,h3,
.page-intro h2,
.top-title h1,
.auth-card h1,
.user-hero-content h2,
.module-hero h2{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--ink);
}

.page-intro h2{font-size:2rem;line-height:1.15}
.page-intro p{color:var(--muted);font-size:.9rem}

/* Garis emas halus di bawah tajuk halaman */
.page-intro{
  position:relative;
  padding-bottom:14px;
  margin-bottom:20px;
  border-bottom:1px solid var(--line);
}
.page-intro::after{
  content:"";
  position:absolute;
  left:0;bottom:-1px;
  width:66px;height:2px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-300));
}

.muted,.metric-foot,.top-title p{color:var(--muted)}

/* ---------------------------------------------------------
   3. LOGO / JENAMA — SATU LOCKUP UNTUK SEMUA PERANAN
   --------------------------------------------------------- */
.sidebar-brand{
  align-items:center;
  gap:12px;
  padding:6px 6px 16px;
  margin-bottom:14px;
  border-bottom:1px solid rgba(223,193,119,.18);
}
.sidebar-brand-mark{
  width:46px;height:46px;
  flex:0 0 46px;
  padding:5px;
  object-fit:contain;
  border:1px solid rgba(223,193,119,.34);
  border-radius:10px;
  background:rgba(223,193,119,.08);
}
.sidebar-brand-copy strong{
  font-family:var(--font-display);
  font-size:1.6rem;
  font-weight:600;
  line-height:1;
  color:#FFFDF8;
  letter-spacing:.005em;
}
.sidebar-brand-copy small{
  margin-top:6px;
  color:var(--gold-400);
  font-family:var(--font-ui);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.19em;
  text-transform:uppercase;
}
/* Baris peranan — dulu hitam atas latar gelap (tidak nampak) */
.sidebar-brand-copy span,
.admin-theme .sidebar-brand-copy span,
.artist-theme .sidebar-brand-copy span,
.user-theme .sidebar-brand-copy span{
  display:inline-block;
  margin-top:7px;
  padding:3px 8px;
  border:1px solid rgba(223,193,119,.28);
  border-radius:999px;
  color:rgba(255,253,248,.82);
  background:rgba(255,255,255,.05);
  font-size:.56rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ---------------------------------------------------------
   4. SIDEBAR — DINDING GALERI
   --------------------------------------------------------- */
.sidebar,
.sidebar.artist-theme,
.sidebar.user-theme,
.sidebar.admin-theme{
  padding:20px 14px;
  color:#F3EDE3;
  background:
    linear-gradient(180deg,var(--wall-900) 0%,var(--wall-850) 58%,var(--wall-950) 100%);
  border-right:1px solid rgba(223,193,119,.14);
  box-shadow:inset -1px 0 0 rgba(0,0,0,.3);
}
.artist-theme{background:var(--wall-900)}

.nav a{
  border-radius:9px;
  color:rgba(243,237,227,.78);
  font-family:var(--font-ui);
  font-size:.815rem;
  font-weight:500;
  letter-spacing:.012em;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.nav a svg{width:16px;height:16px;stroke-width:1.75;opacity:.9}
.nav a:hover{
  color:#FFFDF8;
  background:rgba(223,193,119,.10);
  transform:translateX(2px);
}

/* Item aktif: satu gaya emas untuk SEMUA peranan (selari) */
.sidebar .nav a.active,
.sidebar.user-theme .nav a.active,
.sidebar.artist-theme .nav a.active,
.sidebar.admin-theme .nav a.active,
.admin-theme .nav a.active,
.artist-theme .nav a.active{
  position:relative;
  color:var(--wall-950);
  background:linear-gradient(135deg,var(--gold-400),var(--gold-500));
  box-shadow:0 8px 20px rgba(198,163,68,.22);
  font-weight:650;
}
.sidebar .nav a.active svg{opacity:1;stroke-width:2}

.sidebar-profile,
.sidebar-gallery{
  padding:10px 11px;
  border:1px solid rgba(223,193,119,.16);
  border-radius:11px;
  background:rgba(255,255,255,.045);
}
.sidebar-profile b,.sidebar-gallery b{color:#FFFDF8;font-size:.78rem;font-weight:600}
/* Dulu #050505 atas latar gelap — dibetulkan */
.sidebar-profile small,.sidebar-gallery small{
  color:rgba(223,193,119,.88);
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.sidebar-apply{
  min-height:38px;
  display:flex;align-items:center;gap:9px;
  margin-top:8px;padding:9px 11px;
  border:1px dashed rgba(223,193,119,.42);
  border-radius:10px;
  color:var(--gold-300);
  background:rgba(223,193,119,.07);
  font-size:.78rem;font-weight:600;
}
.sidebar-apply svg{width:16px;height:16px}
.sidebar-apply:hover{background:rgba(223,193,119,.14);color:var(--gold-400)}

.logout-link{
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  color:rgba(243,237,227,.82);
  background:rgba(255,255,255,.04);
  font-size:.78rem;font-weight:600;
}
.logout-link:hover{
  color:#FFE7DF;
  background:rgba(180,85,59,.22);
  border-color:rgba(180,85,59,.45);
}

.avatar,
.artist-theme .avatar,
.user-theme .avatar,
.admin-theme .avatar{
  border-radius:50%;
  color:var(--wall-950);
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
  box-shadow:0 0 0 1px rgba(223,193,119,.4);
  font-family:var(--font-ui);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.04em;
}

/* ---------------------------------------------------------
   5. HEADER / TOPBAR — SELARI UNTUK SEMUA PERANAN
   --------------------------------------------------------- */
.main,.user-main,.admin-main-wrap{
  padding:0 0 34px;
  background:transparent;
}
.main>*:not(.topbar){margin-left:clamp(18px,2.2vw,32px);margin-right:clamp(18px,2.2vw,32px)}

.topbar{
  min-height:70px;
  margin:0 0 22px;
  padding:16px clamp(18px,2.2vw,32px);
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(150%) blur(10px);
  position:sticky;
  top:0;
  z-index:20;
  box-shadow:0 1px 0 rgba(223,193,119,.35), 0 10px 24px -18px rgba(20,17,15,.4);
}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0}
.top-title h1{
  font-family:var(--font-display);
  font-size:1.72rem;
  line-height:1.12;
  margin:0 0 2px;
}
.top-title p{font-size:.79rem;color:var(--muted);letter-spacing:.01em}
.top-actions{gap:10px}

.icon-button{
  width:40px;height:40px;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--wall-800);
  background:#fff;
  transition:.18s ease;
}
.icon-button:hover{
  border-color:var(--gold-400);
  color:var(--gold-700);
  background:var(--gold-100);
}
.top-profile{
  gap:10px;
  padding:5px 12px 5px 5px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
}
.top-profile b{font-size:.79rem;font-weight:650;color:var(--ink)}
.top-profile small{color:var(--muted);font-size:.65rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600}

/* ---------------------------------------------------------
   6. FOOTER — PLAK GALERI, SELARI SEMUA PERANAN
   --------------------------------------------------------- */
footer{
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:34px clamp(18px,2.2vw,32px) 0;
  padding:18px 20px;
  border:1px solid var(--line);
  border-top:2px solid var(--gold-400);
  border-radius:12px;
  color:var(--muted);
  background:linear-gradient(180deg,#fff,var(--soft));
  box-shadow:var(--shadow-sm);
  font-size:.74rem;
  letter-spacing:.05em;
}
footer span:first-child{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:600;
  letter-spacing:.01em;
}
footer span:first-child::before{
  content:"";
  width:22px;height:1px;
  background:var(--gold-500);
}
footer span:last-child{
  color:var(--muted);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
}

/* ---------------------------------------------------------
   7. BUTANG
   --------------------------------------------------------- */
.primary-user-btn,.secondary-user-btn,.gold-btn,.module-action,.btn-purple,.outline-gold{
  font-family:var(--font-ui);
  letter-spacing:.015em;
}
.primary-user-btn,.secondary-user-btn{
  min-height:40px;
  padding:10px 16px;
  border-radius:9px;
  font-size:.78rem;
  font-weight:650;
}
.primary-user-btn,.gold-btn,
.gallery-accent .module-action,
.artist-accent .module-action,
.user-accent .module-action,
.module-action{
  border:1px solid var(--gold-600);
  color:var(--wall-950);
  background:linear-gradient(135deg,var(--gold-400),var(--gold-500));
  box-shadow:0 6px 16px -8px rgba(154,123,31,.7);
}
.primary-user-btn:hover,.gold-btn:hover,.module-action:hover{
  filter:none;
  color:#fff;
  background:linear-gradient(135deg,var(--gold-600),var(--gold-700));
  transform:translateY(-1px);
  box-shadow:0 10px 22px -10px rgba(154,123,31,.85);
}
.secondary-user-btn{
  border:1px solid var(--line-strong);
  color:var(--text);
  background:#fff;
}
.secondary-user-btn:hover{
  border-color:var(--gold-400);
  color:var(--gold-700);
  background:var(--gold-100);
}
.btn-purple{
  border:1px solid var(--indigo-ink);
  border-radius:9px;
  background:linear-gradient(135deg,#5A5DAE,var(--indigo-ink));
}
.outline-gold{
  border:1px solid var(--gold-500);
  border-radius:8px;
  color:var(--gold-700);
  background:var(--gold-100);
  font-weight:650;
}
.full{width:100%}
.primary-user-btn.full,.secondary-user-btn.full{width:100%;display:flex}
.back-link{
  display:inline-flex;align-items:center;gap:6px;
  margin-bottom:12px;
  color:var(--muted);
  font-size:.76rem;font-weight:600;
}
.back-link:hover{color:var(--gold-700)}

/* ---------------------------------------------------------
   8. KAD — GAYA "BINGKAI GALERI"
   --------------------------------------------------------- */
.content-card,
.metric-card,
.panel,
.user-metric,
.auction-card,
.ticket-card,
.module-hero,
.module-card,
.wallet-card,
.artist-panel,
.admin-table-card,
.artist-welcome,
.admin-hero,
.purchase-card,
.catalog-card,
.artist-directory-card,
.certificate-card{
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.content-card{padding:20px}
.content-card h3,.artist-panel-head h3,.panel-header h3{
  font-family:var(--font-display);
  font-size:1.18rem;
  font-weight:600;
  color:var(--ink);
  letter-spacing:0;
}
.content-card p{color:var(--muted);font-size:.82rem;line-height:1.65}

.user-section-title h3{
  font-family:var(--font-display);
  font-size:1.34rem;
  font-weight:600;
}
.user-section-title a,.link-gold{color:var(--gold-700);font-weight:650;font-size:.76rem}

/* Kad metrik */
.metric-card,.user-metric{padding:16px 17px;border-radius:14px}
.metric-card small,.user-metric small{
  color:var(--muted);
  font-size:.66rem;
  font-weight:650;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.metric-card strong,.user-metric strong{
  font-family:var(--font-display);
  font-size:1.72rem;
  font-weight:600;
  color:var(--ink);
}
.metric-icon{
  border:1px solid var(--line);
  border-radius:11px;
  color:var(--gold-700);
  background:var(--gold-100);
}
.user-metric:hover,.metric-card:hover{
  border-color:var(--line-strong);
  box-shadow:var(--shadow-md);
}

.panel{border-radius:14px}
.panel-header{
  padding:15px 18px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fff,var(--soft));
}
.panel-header a{color:var(--gold-700);font-weight:650}

.artist-panel-head{
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  margin-bottom:14px;
}

/* ---------------------------------------------------------
   9. LENCANA (BADGE) — GAYA LABEL MUZIUM
   --------------------------------------------------------- */
.badge{
  padding:4px 10px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:.63rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.badge.green{color:#2F5A46;background:var(--sage-100);border-color:#CBDED3}
.badge.blue{color:#2F5470;background:var(--blue-100);border-color:#CCDDE8}
.badge.gold{color:var(--gold-700);background:var(--gold-100);border-color:var(--gold-300)}
.badge.gray{color:var(--muted);background:#F2EEE7;border-color:var(--line)}
.badge.red{color:#8E3D27;background:var(--terracotta-100);border-color:#EED5CB}
.badge.purple{color:#3B3E7C;background:var(--purple-100);border-color:#D5D7EC}
.badge.vvip{
  color:var(--wall-950);
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
  border-color:var(--gold-600);
}

/* ---------------------------------------------------------
   10. JADUAL
   --------------------------------------------------------- */
.data-table,.artist-table{width:100%;border-collapse:collapse;font-size:.78rem;color:var(--text)}
.data-table th,.artist-table th{
  padding:11px 12px;
  border-bottom:1px solid var(--line-strong);
  color:var(--muted);
  background:var(--soft);
  font-size:.63rem;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.data-table td,.artist-table td{
  padding:12px;
  border-bottom:1px solid var(--line);
  color:var(--text);
  font-size:.78rem;
}
.data-table tr:hover td,.artist-table tr:hover td{background:var(--gold-100)}
.artist-table-wrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

/* Baris admin — saiz teks asal terlalu kecil, dibesarkan */
.admin-row{padding:15px 17px;border-bottom:1px solid var(--line)}
.admin-row:hover{background:var(--soft)}
.admin-main b{font-size:.9rem;font-weight:650;color:var(--ink)}
.admin-main small{color:var(--muted);font-size:.72rem;margin-top:4px}
.admin-main p{color:var(--muted);font-size:.76rem;line-height:1.55;margin-top:6px}
.admin-actions input,.admin-actions select{
  min-height:36px;
  padding:8px 10px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:#fff;
  font-size:.76rem;
}
.admin-thumb{
  width:70px;height:54px;
  object-fit:cover;
  border:1px solid var(--line);
  border-radius:8px;
  padding:3px;
  background:#fff;
}

/* ---------------------------------------------------------
   11. BORANG
   --------------------------------------------------------- */
.form-grid,.artist-form-grid,.profile-form,.cert-form,.booking-form,.shipping-mini-form{
  display:grid;gap:14px;
}
.form-grid.two,.artist-form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.artist-form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}

.auth-form label,
.form-grid label,
.artist-form-grid label,
.profile-form label,
.cert-form label,
.booking-form label,
.artist-form label,
.shipping-mini-form label{
  display:block;
  color:var(--text);
  font-size:.72rem;
  font-weight:650;
  letter-spacing:.06em;
}

/* Gaya medan input — global tetapi tidak memaksa lebar penuh,
   supaya susun atur sedia ada (penapis, baris admin) kekal. */
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=search],input[type=tel],input:not([type]),
select,textarea{
  padding:11px 13px;
  border:1px solid var(--line-strong);
  border-radius:9px;
  color:var(--ink);
  background:#fff;
  font-family:var(--font-ui);
  font-size:.84rem;
  font-weight:400;
  letter-spacing:normal;
  transition:.18s ease;
}
.auth-form label input,
.form-grid label input,.form-grid label select,.form-grid label textarea,
.artist-form-grid label input,.artist-form-grid label select,.artist-form-grid label textarea,
.profile-form label input,.profile-form label select,.profile-form label textarea,
.artist-form label input,.artist-form label select,.artist-form label textarea,
.cert-form label input,.cert-form label select,.cert-form label textarea,
.booking-form label input,.booking-form label select,.booking-form label textarea{
  width:100%;
  display:block;
  margin-top:7px;
}
input::placeholder,textarea::placeholder{color:#A79785;font-weight:400}
input:focus,select:focus,textarea:focus{
  outline:0;
  border-color:var(--gold-500);
  box-shadow:0 0 0 3px rgba(198,163,68,.18);
}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:2px;
}

/* ---------------------------------------------------------
   12. KATALOG / KARYA SENI — KESAN BINGKAI + MAT
   --------------------------------------------------------- */
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.catalog-card{
  overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.catalog-card:hover{
  transform:translateY(-4px);
  border-color:var(--gold-400);
  box-shadow:var(--shadow-md);
}
.catalog-image-wrap{
  padding:12px 12px 0;
  background:linear-gradient(180deg,#fff,var(--soft));
}
.catalog-image-wrap img{
  height:215px;
  border-radius:6px;
  border:1px solid rgba(20,17,15,.10);
  box-shadow:0 1px 3px rgba(20,17,15,.12), inset 0 0 0 4px #fff;
}
.catalog-body{padding:15px 16px 17px}
.catalog-body h3{
  font-family:var(--font-display);
  font-size:1.14rem;
  font-weight:600;
  color:var(--ink);
  margin-bottom:3px;
}
.catalog-body>p{color:var(--muted);font-size:.76rem;font-style:italic}
.catalog-meta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line);
}

.user-art-card img,.art-card img,.mini-art-grid img{
  border-radius:6px;
  border:1px solid rgba(20,17,15,.10);
  box-shadow:0 1px 3px rgba(20,17,15,.10), inset 0 0 0 3px #fff;
}
.user-art-card h4,.art-card h4{
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:600;
  margin-top:9px;
}
.user-art-card p,.art-card p{color:var(--muted);font-size:.74rem;font-style:italic}
.user-art-card b,.art-card strong{color:var(--gold-700);font-weight:700;font-size:.86rem}
.heart{
  background:rgba(255,255,255,.92);
  box-shadow:0 2px 8px rgba(20,17,15,.16);
  color:var(--terracotta);
}
.thumb,.artwork-viewer img,.auction-image img,.checkout-cart-image{
  border-radius:6px;
  border:1px solid rgba(20,17,15,.09);
  background:#fff;
}

/* ---------------------------------------------------------
   13. HERO
   --------------------------------------------------------- */
.user-hero,.admin-hero-banner{border-radius:16px;border:1px solid var(--line)}
.user-hero:after{
  background:linear-gradient(90deg,rgba(15,12,10,.92),rgba(15,12,10,.46) 58%,rgba(15,12,10,.10));
}
.user-hero-content{padding:36px 40px}
.user-hero-content small{
  color:var(--gold-400);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.22em;
}
.user-hero-content h2{
  font-family:var(--font-display);
  font-size:2.5rem;
  font-weight:600;
  line-height:1.1;
  margin:12px 0 8px;
  color:#FFFDF8;
}
.user-hero-content p{color:rgba(255,253,248,.8);font-size:.88rem;max-width:52ch}

.artist-welcome,.admin-hero,.module-hero{
  padding:22px 24px;
  border-radius:14px;
  background:
    radial-gradient(circle at 96% 0%,rgba(198,163,68,.10),transparent 46%),
    linear-gradient(180deg,#fff,var(--soft));
}
.artist-banner{
  border-radius:14px;
  background:
    radial-gradient(circle at 85% 15%,rgba(223,193,119,.30),transparent 40%),
    linear-gradient(120deg,var(--wall-900),var(--wall-800) 60%,var(--wall-950));
  border:1px solid rgba(223,193,119,.22);
}
.artist-banner h3{font-family:var(--font-display);font-size:1.3rem;color:#FFFDF8}
.artist-banner p{color:rgba(243,237,227,.72)}
.artist-banner button{
  border-radius:8px;
  color:var(--wall-950);
  background:linear-gradient(135deg,var(--gold-400),var(--gold-500));
  font-weight:700;
}

/* ---------------------------------------------------------
   14. FLASH / NOTIFIKASI
   --------------------------------------------------------- */
.flash{
  gap:10px;
  margin:0 0 18px;
  padding:13px 16px;
  border:1px solid var(--line-strong);
  border-left:3px solid var(--gold-500);
  border-radius:10px;
  color:var(--text);
  background:linear-gradient(90deg,var(--gold-100),#fff 40%);
  font-size:.82rem;
  font-weight:500;
  box-shadow:var(--shadow-sm);
}
.flash svg{width:18px;height:18px;color:var(--gold-700);flex:0 0 18px}
.flash.error{
  border-color:#EED5CB;
  border-left-color:var(--terracotta);
  color:#8E3D27;
  background:linear-gradient(90deg,var(--terracotta-100),#fff 40%);
}
.flash.error svg{color:var(--terracotta)}
.notification-row,.notif-icon{border-color:var(--line)}
.notif-icon{color:var(--gold-700);background:var(--gold-100);border-radius:10px}

/* ---------------------------------------------------------
   15. HALAMAN AUTENTIKASI (log masuk / daftar)
   Kelas ini TIADA gaya langsung sebelum ini.
   --------------------------------------------------------- */
.auth-page{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(430px,.85fr);
  background:var(--canvas);
}
.auth-visual{
  position:relative;
  overflow:hidden;
  min-height:100vh;
  background:var(--wall-950);
}
.auth-visual img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(.88) contrast(1.04) brightness(.82);
}
.auth-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(105deg,rgba(15,12,10,.95),rgba(15,12,10,.62) 55%,rgba(15,12,10,.28)),
    linear-gradient(0deg,rgba(15,12,10,.9),transparent 62%);
}
.auth-visual::after{
  content:"";
  position:absolute;
  inset:30px;
  border:1px solid rgba(223,193,119,.28);
  border-radius:4px;
  pointer-events:none;
}
.auth-brand{
  position:absolute;
  left:clamp(46px,5vw,80px);
  bottom:clamp(56px,8vh,96px);
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  max-width:520px;
}
.auth-brand img{
  width:210px;
  height:auto;
  object-fit:contain;
}
.auth-brand span{
  padding:7px 16px;
  border:1px solid rgba(223,193,119,.45);
  border-radius:999px;
  color:var(--gold-300);
  background:rgba(223,193,119,.10);
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
}
.auth-brand::after{
  content:"Galeri seni digital untuk pengumpul, pereka seni dan peminat karya tempatan.";
  display:block;
  max-width:36ch;
  color:rgba(243,237,227,.62);
  font-family:var(--font-display);
  font-size:1.16rem;
  font-style:italic;
  line-height:1.5;
}

.auth-card-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(28px,4vw,64px);
  background:
    radial-gradient(circle at 80% 0%,rgba(198,163,68,.09),transparent 45%),
    var(--canvas);
}
.auth-card{
  width:100%;
  max-width:430px;
  padding:clamp(28px,3vw,40px);
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow-md);
}
.auth-mark{
  width:56px;height:56px;
  padding:7px;
  object-fit:contain;
  border:1px solid var(--line-strong);
  border-radius:12px;
  background:var(--soft);
  margin-bottom:20px;
}
.auth-kicker{
  color:var(--gold-700);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.auth-card h1{
  margin:12px 0 8px;
  font-family:var(--font-display);
  font-size:2.3rem;
  font-weight:600;
  line-height:1.1;
  color:var(--ink);
}
.auth-card>p{
  margin:0 0 22px;
  color:var(--muted);
  font-size:.85rem;
  line-height:1.6;
}
.auth-form{display:grid;gap:15px;margin-bottom:18px}
.auth-form label{
  color:var(--text);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.auth-form button{margin-top:5px;min-height:46px;font-size:.82rem}

.auth-demo{
  display:grid;
  gap:5px;
  padding:14px 16px;
  border:1px dashed var(--line-strong);
  border-radius:11px;
  background:var(--soft);
  color:var(--muted);
  font-size:.74rem;
}
.auth-demo b{
  color:var(--ink);
  font-size:.63rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:3px;
}
.auth-demo span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem}

.be-artist-link{
  display:block;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
  color:var(--gold-700);
  text-align:center;
  font-size:.79rem;
  font-weight:650;
}
.be-artist-link:hover{color:var(--gold-600);text-decoration:underline}

/* ---------------------------------------------------------
   16. DOMPET / TRANSAKSI / SEJARAH
   --------------------------------------------------------- */
.wallet-card{
  padding:22px;
  border-radius:14px;
  color:#FFFDF8;
  background:
    radial-gradient(circle at 88% 12%,rgba(223,193,119,.26),transparent 44%),
    linear-gradient(140deg,var(--wall-900),var(--wall-800) 62%,var(--wall-950));
  border:1px solid rgba(223,193,119,.24);
}
.wallet-card *{color:inherit}
.wallet-card strong,.wallet-card b{font-family:var(--font-display);font-size:2rem;font-weight:600;color:#FFFDF8}
.wallet-card small,.wallet-card span{color:rgba(243,237,227,.68)}
.wallet-tx,.purchase-source-row,.setting-row,.cert-row,.bid-history-row,.info-list>*{
  border-bottom:1px solid var(--line);
}
.wallet-tx .credit{color:var(--sage);font-weight:700}
.wallet-tx .debit{color:var(--terracotta);font-weight:700}

.purchase-history-stat,.artist-stat,.history-stat-icon{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.history-stat-icon,.checkout-summary-icon,.purchase-history-row-icon{
  color:var(--gold-700);
  background:var(--gold-100);
  border-radius:10px;
}

.info-list{display:grid;gap:0}
.info-list>*{display:flex;justify-content:space-between;gap:14px;padding:11px 0;font-size:.8rem}
.info-list>*:last-child{border-bottom:0}

/* ---------------------------------------------------------
   17. KEADAAN KOSONG
   --------------------------------------------------------- */
.empty-bidding-state,.artist-empty,.purchase-history-empty{
  display:grid;
  place-items:center;
  gap:8px;
  padding:52px 24px;
  border:1px dashed var(--line-strong);
  border-radius:14px;
  color:var(--muted);
  background:
    repeating-linear-gradient(45deg,transparent,transparent 11px,rgba(198,163,68,.045) 11px,rgba(198,163,68,.045) 22px),
    var(--soft);
  text-align:center;
  font-size:.84rem;
}
.empty-bidding-state svg,.artist-empty svg{width:34px;height:34px;color:var(--gold-500);margin:0 auto 4px}
.empty-bidding-state b,.artist-empty b{
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:600;
  color:var(--ink);
}

/* ---------------------------------------------------------
   18. LELONGAN
   --------------------------------------------------------- */
.auction-live-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;
  border:1px solid rgba(180,85,59,.35);
  border-radius:999px;
  color:var(--terracotta);
  background:var(--terracotta-100);
  font-size:.63rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.auction-live-badge::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--terracotta);
  animation:avPulse 1.5s ease-in-out infinite;
}
@keyframes avPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

.auction-countdown-overlay,.auction-detail-countdown,.countdown span{
  border-radius:8px;
  color:#FFFDF8;
  background:rgba(15,12,10,.82);
  font-variant-numeric:tabular-nums;
  font-weight:650;
}
.countdown span{padding:6px 8px;font-size:.7rem}
.auction-price-block,.purchase-total-box,.total{
  border:1px solid var(--gold-300);
  border-radius:12px;
  background:var(--gold-100);
}
.auction-bid-input input{font-size:1.05rem;font-weight:650}
.bid-rule,.auction-bid-warning,.checkout-secure-note,.delivery-aware,.purchase-delivery-explainer{
  padding:12px 14px;
  border:1px solid var(--line-strong);
  border-left:3px solid var(--gold-500);
  border-radius:9px;
  color:var(--muted);
  background:var(--soft);
  font-size:.76rem;
  line-height:1.6;
}

/* ---------------------------------------------------------
   19. PENGHANTARAN / TIMELINE
   --------------------------------------------------------- */
.delivery-step-marker{
  border:2px solid var(--line-strong);
  background:#fff;
  color:var(--muted);
}
.delivery-step.done .delivery-step-marker,
.delivery-step.active .delivery-step-marker{
  border-color:var(--gold-500);
  color:var(--wall-950);
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
}
.delivery-address-box,.art-delivery-card,.purchase-buyer-card,.purchase-payment-card,.purchase-items-card{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.delivery-truck-icon{color:var(--gold-700)}

/* ---------------------------------------------------------
   20. PENAPIS / CARIAN
   --------------------------------------------------------- */
.filter-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.filter-search{flex:1;min-width:200px}
.filter-search input{margin-top:0}
.filter-bar select,.filter-bar input{margin-top:0}

/* ---------------------------------------------------------
   21. AI / SIJIL
   --------------------------------------------------------- */
.ai-price{color:var(--indigo-ink);font-family:var(--font-display);font-size:1.5rem;font-weight:600}
.artist-ai-large,.certificate-card{
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg,#fff,var(--soft));
}
.certificate-card{
  position:relative;
  padding:20px;
  border:1px solid var(--gold-300);
  background:
    repeating-linear-gradient(135deg,transparent,transparent 9px,rgba(198,163,68,.05) 9px,rgba(198,163,68,.05) 18px),
    #fff;
}
.certificate-card::before{
  content:"";
  position:absolute;inset:8px;
  border:1px solid rgba(198,163,68,.32);
  border-radius:9px;
  pointer-events:none;
}

/* ---------------------------------------------------------
   22. RESPONSIF
   --------------------------------------------------------- */
@media (max-width:1024px){
  .auth-page{grid-template-columns:1fr}
  .auth-visual{display:none}
  .auth-card-wrap{min-height:100vh;padding:26px}
  .form-grid.two,.artist-form-grid.two,.artist-form-grid.three{grid-template-columns:1fr}
}
@media (max-width:900px){
  .topbar{position:static;padding:14px 16px}
  .main>*:not(.topbar){margin-left:16px;margin-right:16px}
  footer{margin:26px 16px 0;flex-direction:column;align-items:flex-start;gap:6px}
  .user-hero-content{padding:24px 22px}
  .user-hero-content h2{font-size:1.85rem}
  .page-intro h2{font-size:1.6rem}
}
@media (max-width:560px){
  .auth-card h1{font-size:1.85rem}
  .catalog-grid{grid-template-columns:1fr}
}

/* ---------------------------------------------------------
   23. CETAK (resit / sijil)
   --------------------------------------------------------- */
@media print{
  .sidebar,.topbar,footer,.back-link{display:none!important}
  body{background:#fff;background-image:none}
  .main>*:not(.topbar){margin:0}
  .content-card{box-shadow:none;border-color:#ccc}
}

/* ---------------------------------------------------------
   24. LAPISAN SERASI — mengatasi peraturan `!important` lama
   Fail asal memaksa banyak warna dengan !important.
   Bahagian ini menyelaraskannya dengan tema galeri.
   --------------------------------------------------------- */

/* Teks badan pada kawasan utama */
.main p,
.main small,
.main .muted,
.main .top-title p,
.main .content-card p,
.main .page-intro p,
.main .catalog-body>p,
.main .user-art-card p,
.main .artist-directory-card p,
.main .info-list span,
.main .purchase-history-meta span,
.main .checkout-summary-lines span,
.main .delivery-step-copy p{
  color:var(--muted)!important;
}
.main label,
.main th,
.main td,
.main input,
.main select,
.main textarea,
.main time{
  color:var(--text)!important;
}
.main th{color:var(--muted)!important}

/* Lencana */
.main .badge.green{color:#2F5A46!important}
.main .badge.blue{color:#2F5470!important}
.main .badge.gold{color:var(--gold-700)!important}
.main .badge.red{color:#8E3D27!important}
.main .badge.purple{color:#3B3E7C!important}
.main .paid-text{color:var(--sage)!important}
.main .link-gold,
.main .card-action,
.main .user-section-title a{color:var(--gold-700)!important}

/* Butang */
.main .primary-user-btn,
.main .checkout-buy-btn,
.main .gateway-pay-button,
.main .auction-bid-submit,
.primary-user-btn,
.gold-btn,
.module-action{
  color:#FFFBF2!important;
  background:linear-gradient(135deg,#B98F2C,#8A6A17)!important;
  border:1px solid #7E6318!important;
}
.main .primary-user-btn:hover,
.primary-user-btn:hover,
.gold-btn:hover,
.module-action:hover{
  background:linear-gradient(135deg,#CBA23C,#9A7B1F)!important;
}
.main .secondary-user-btn,.secondary-user-btn{color:var(--text)!important}
.main .secondary-user-btn:hover,.secondary-user-btn:hover{color:var(--gold-700)!important}

/* Sidebar — fail asal memaksa semua teks putih */
.sidebar .nav a,
.nav a{color:rgba(243,237,227,.80)!important}
.sidebar .nav a:hover{color:#FFFDF8!important}
.sidebar .nav a.active,
.sidebar.user-theme .nav a.active,
.sidebar.artist-theme .nav a.active,
.sidebar.admin-theme .nav a.active,
.admin-theme .nav a.active,
.artist-theme .nav a.active{
  color:var(--wall-950)!important;
  background:linear-gradient(135deg,var(--gold-400),var(--gold-500))!important;
}
.sidebar-brand-copy small{color:var(--gold-400)!important}
.sidebar-brand-copy span{color:rgba(255,253,248,.82)!important}
.sidebar-profile small,.sidebar-gallery small{color:var(--gold-300)!important}
.sidebar .avatar{color:var(--wall-950)!important}
.sidebar-apply{color:var(--gold-300)!important}

/* Halaman auth (log masuk/daftar) */
.auth-card .primary-user-btn{color:#FFFBF2!important}
.auth-card p,.auth-demo,.auth-demo span{color:var(--muted)!important}
.auth-card h1{color:var(--ink)!important}
.auth-kicker{color:var(--gold-700)!important}
.auth-brand span{color:var(--gold-300)!important}

/* ---------------------------------------------------------
   25. PEMBETULAN HALUS
   --------------------------------------------------------- */
/* Input dalam kotak carian kekal tanpa bingkai sendiri */
.filter-search input,
.user-search input,
.auction-bid-input input[type=hidden]{
  border:0!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.filter-search{
  border:1px solid var(--line-strong);
  border-radius:9px;
  background:var(--soft);
}
.filter-search:focus-within{
  border-color:var(--gold-500);
  box-shadow:0 0 0 3px rgba(198,163,68,.16);
}
.filter-search svg{color:var(--gold-700)}
.filter-bar select{min-height:40px;border-color:var(--line-strong)}

/* Lencana terapung di atas gambar (bukan di atas mat putih) */
.badge.floating{
  left:22px;top:22px;
  background:rgba(255,255,255,.94);
  box-shadow:0 3px 10px rgba(20,17,15,.18);
  backdrop-filter:blur(3px);
}

.card-action{
  margin-top:12px;
  color:var(--gold-700);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.03em;
}
.card-action:hover{gap:9px;color:var(--gold-600)}
.card-action svg{width:14px;height:14px;transition:transform .18s ease}
.card-action:hover svg{transform:translateX(3px)}
.catalog-meta span{color:var(--muted);font-size:.72rem;font-style:italic}
.catalog-meta b{color:var(--ink);font-family:var(--font-display);font-size:1.1rem;font-weight:600}

/* Butang ikon kecil */
.icon-button.mini{border-radius:8px}

/* Skrolbar sidebar */
.sidebar::-webkit-scrollbar-thumb{background:rgba(223,193,119,.25)}

/* ---------------------------------------------------------
   26. PEMBETULAN AKHIR
   --------------------------------------------------------- */
/* Gambar latar auth: hanya gambar terus di bawah .auth-visual */
.auth-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.auth-brand img{
  position:static!important;
  inset:auto!important;
  width:200px!important;
  height:auto!important;
  object-fit:contain!important;
}

/* Hero pengguna: hormati src dalam PHP (fail asal memaksa satu gambar) */
.user-hero img{content:normal!important}

/* Jenama sidebar: muat dalam 248px + tunjuk semula tag peranan */
.sidebar-brand{align-items:center}
.sidebar-brand-copy strong{font-size:1.42rem;line-height:1.02}
.sidebar-brand-copy small{
  font-size:.53rem;
  letter-spacing:.115em;
  line-height:1.25;
  overflow:hidden;
  text-overflow:clip;
}
.sidebar-brand-copy span{
  display:inline-block!important;
  margin-top:6px;
  font-size:.5rem;
  letter-spacing:.13em;
}

/* Kad wallet gelap: teks kekal cerah walaupun fail asal memaksa warna gelap */
.main .wallet-card small,
.main .wallet-card span,
.main .wallet-card p,
.wallet-card small,
.wallet-card span{
  color:rgba(243,237,227,.74)!important;
}
.wallet-card>small:first-child,
.main .wallet-card>small:first-child{
  display:block;
  margin-bottom:6px;
  color:var(--gold-300)!important;
  font-size:.63rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.wallet-card strong{display:block;margin-bottom:8px}
.main .wallet-card strong,.main .wallet-card b{color:#FFFDF8!important}

/* Susun atur jenama pada panel visual auth */
.auth-overlay{
  background:
    linear-gradient(105deg,rgba(15,12,10,.90),rgba(15,12,10,.52) 55%,rgba(15,12,10,.20))!important;
}
.auth-brand{
  bottom:clamp(38px,6vh,70px);
  gap:14px;
}
.auth-brand img{width:172px!important}
.auth-brand::after{font-size:1.02rem;max-width:34ch}
.auth-brand{bottom:clamp(56px,8vh,92px)}
.wallet-card span{display:block;font-size:.76rem;line-height:1.55}


/* ############ 4) UTILITI TAILWIND ############ */
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  
}

.static {
  position: static
}

.fixed {
  position: fixed
}

.mb-1 {
  margin-bottom: 0.25rem
}

.mb-10 {
  margin-bottom: 2.5rem
}

.mb-12 {
  margin-bottom: 3rem
}

.mb-2 {
  margin-bottom: 0.5rem
}

.mb-3 {
  margin-bottom: 0.75rem
}

.mb-4 {
  margin-bottom: 1rem
}

.mb-5 {
  margin-bottom: 1.25rem
}

.mb-6 {
  margin-bottom: 1.5rem
}

.mb-8 {
  margin-bottom: 2rem
}

.mt-1 {
  margin-top: 0.25rem
}

.mt-10 {
  margin-top: 2.5rem
}

.mt-12 {
  margin-top: 3rem
}

.mt-2 {
  margin-top: 0.5rem
}

.mt-3 {
  margin-top: 0.75rem
}

.mt-4 {
  margin-top: 1rem
}

.mt-5 {
  margin-top: 1.25rem
}

.mt-6 {
  margin-top: 1.5rem
}

.mt-8 {
  margin-top: 2rem
}

.block {
  display: block
}

.inline-block {
  display: inline-block
}

.flex {
  display: flex
}

.table {
  display: table
}

.grid {
  display: grid
}

.hidden {
  display: none
}

.h-full {
  height: 100%
}

.min-h-screen {
  min-height: 100vh
}

.w-full {
  width: 100%
}

.max-w-xl {
  max-width: 36rem
}

.grow {
  flex-grow: 1
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr))
}

.grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr))
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr))
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr))
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr))
}

.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr))
}

.items-center {
  align-items: center
}

.justify-center {
  justify-content: center
}

.justify-between {
  justify-content: space-between
}

.gap-1 {
  gap: 0.25rem
}

.gap-10 {
  gap: 2.5rem
}

.gap-12 {
  gap: 3rem
}

.gap-2 {
  gap: 0.5rem
}

.gap-3 {
  gap: 0.75rem
}

.gap-4 {
  gap: 1rem
}

.gap-5 {
  gap: 1.25rem
}

.gap-6 {
  gap: 1.5rem
}

.gap-8 {
  gap: 2rem
}

.rounded {
  border-radius: 0.25rem
}

.rounded-2xl {
  border-radius: 1rem
}

.rounded-3xl {
  border-radius: 1.5rem
}

.rounded-full {
  border-radius: 9999px
}

.rounded-lg {
  border-radius: 0.5rem
}

.rounded-md {
  border-radius: 0.375rem
}

.rounded-sm {
  border-radius: 0.125rem
}

.rounded-xl {
  border-radius: 0.75rem
}

.border {
  border-width: 1px
}

.border-amber-100 {
  --tw-border-opacity: 1;
  border-color: rgb(254 243 199 / var(--tw-border-opacity, 1))
}

.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1))
}

.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1))
}

.border-amber-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1))
}

.border-amber-400\/20 {
  border-color: rgb(251 191 36 / 0.2)
}

.border-amber-50 {
  --tw-border-opacity: 1;
  border-color: rgb(255 251 235 / var(--tw-border-opacity, 1))
}

.border-amber-500 {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1))
}

.border-amber-600 {
  --tw-border-opacity: 1;
  border-color: rgb(217 119 6 / var(--tw-border-opacity, 1))
}

.border-amber-700 {
  --tw-border-opacity: 1;
  border-color: rgb(180 83 9 / var(--tw-border-opacity, 1))
}

.border-amber-800 {
  --tw-border-opacity: 1;
  border-color: rgb(146 64 14 / var(--tw-border-opacity, 1))
}

.border-amber-900 {
  --tw-border-opacity: 1;
  border-color: rgb(120 53 15 / var(--tw-border-opacity, 1))
}

.border-amber-950 {
  --tw-border-opacity: 1;
  border-color: rgb(69 26 3 / var(--tw-border-opacity, 1))
}

.border-emerald-100 {
  --tw-border-opacity: 1;
  border-color: rgb(209 250 229 / var(--tw-border-opacity, 1))
}

.border-emerald-200 {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1))
}

.border-emerald-300 {
  --tw-border-opacity: 1;
  border-color: rgb(110 231 183 / var(--tw-border-opacity, 1))
}

.border-emerald-400 {
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / var(--tw-border-opacity, 1))
}

.border-emerald-50 {
  --tw-border-opacity: 1;
  border-color: rgb(236 253 245 / var(--tw-border-opacity, 1))
}

.border-emerald-500 {
  --tw-border-opacity: 1;
  border-color: rgb(16 185 129 / var(--tw-border-opacity, 1))
}

.border-emerald-500\/30 {
  border-color: rgb(16 185 129 / 0.3)
}

.border-emerald-600 {
  --tw-border-opacity: 1;
  border-color: rgb(5 150 105 / var(--tw-border-opacity, 1))
}

.border-emerald-700 {
  --tw-border-opacity: 1;
  border-color: rgb(4 120 87 / var(--tw-border-opacity, 1))
}

.border-emerald-800 {
  --tw-border-opacity: 1;
  border-color: rgb(6 95 70 / var(--tw-border-opacity, 1))
}

.border-emerald-900 {
  --tw-border-opacity: 1;
  border-color: rgb(6 78 59 / var(--tw-border-opacity, 1))
}

.border-emerald-950 {
  --tw-border-opacity: 1;
  border-color: rgb(2 44 34 / var(--tw-border-opacity, 1))
}

.border-indigo-100 {
  --tw-border-opacity: 1;
  border-color: rgb(224 231 255 / var(--tw-border-opacity, 1))
}

.border-indigo-200 {
  --tw-border-opacity: 1;
  border-color: rgb(199 210 254 / var(--tw-border-opacity, 1))
}

.border-indigo-300 {
  --tw-border-opacity: 1;
  border-color: rgb(165 180 252 / var(--tw-border-opacity, 1))
}

.border-indigo-400 {
  --tw-border-opacity: 1;
  border-color: rgb(129 140 248 / var(--tw-border-opacity, 1))
}

.border-indigo-400\/20 {
  border-color: rgb(129 140 248 / 0.2)
}

.border-indigo-50 {
  --tw-border-opacity: 1;
  border-color: rgb(238 242 255 / var(--tw-border-opacity, 1))
}

.border-indigo-500 {
  --tw-border-opacity: 1;
  border-color: rgb(99 102 241 / var(--tw-border-opacity, 1))
}

.border-indigo-600 {
  --tw-border-opacity: 1;
  border-color: rgb(79 70 229 / var(--tw-border-opacity, 1))
}

.border-indigo-700 {
  --tw-border-opacity: 1;
  border-color: rgb(67 56 202 / var(--tw-border-opacity, 1))
}

.border-indigo-800 {
  --tw-border-opacity: 1;
  border-color: rgb(55 48 163 / var(--tw-border-opacity, 1))
}

.border-indigo-900 {
  --tw-border-opacity: 1;
  border-color: rgb(49 46 129 / var(--tw-border-opacity, 1))
}

.border-indigo-950 {
  --tw-border-opacity: 1;
  border-color: rgb(30 27 75 / var(--tw-border-opacity, 1))
}

.border-neutral-100 {
  --tw-border-opacity: 1;
  border-color: rgb(245 245 245 / var(--tw-border-opacity, 1))
}

.border-neutral-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 229 229 / var(--tw-border-opacity, 1))
}

.border-neutral-300 {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 212 / var(--tw-border-opacity, 1))
}

.border-neutral-400 {
  --tw-border-opacity: 1;
  border-color: rgb(163 163 163 / var(--tw-border-opacity, 1))
}

.border-neutral-50 {
  --tw-border-opacity: 1;
  border-color: rgb(250 250 250 / var(--tw-border-opacity, 1))
}

.border-neutral-500 {
  --tw-border-opacity: 1;
  border-color: rgb(115 115 115 / var(--tw-border-opacity, 1))
}

.border-neutral-600 {
  --tw-border-opacity: 1;
  border-color: rgb(82 82 82 / var(--tw-border-opacity, 1))
}

.border-neutral-700 {
  --tw-border-opacity: 1;
  border-color: rgb(64 64 64 / var(--tw-border-opacity, 1))
}

.border-neutral-800 {
  --tw-border-opacity: 1;
  border-color: rgb(38 38 38 / var(--tw-border-opacity, 1))
}

.border-neutral-900 {
  --tw-border-opacity: 1;
  border-color: rgb(23 23 23 / var(--tw-border-opacity, 1))
}

.border-neutral-950 {
  --tw-border-opacity: 1;
  border-color: rgb(10 10 10 / var(--tw-border-opacity, 1))
}

.border-red-100 {
  --tw-border-opacity: 1;
  border-color: rgb(254 226 226 / var(--tw-border-opacity, 1))
}

.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1))
}

.border-red-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1))
}

.border-red-400 {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1))
}

.border-red-50 {
  --tw-border-opacity: 1;
  border-color: rgb(254 242 242 / var(--tw-border-opacity, 1))
}

.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1))
}

.border-red-500\/30 {
  border-color: rgb(239 68 68 / 0.3)
}

.border-red-600 {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1))
}

.border-red-700 {
  --tw-border-opacity: 1;
  border-color: rgb(185 28 28 / var(--tw-border-opacity, 1))
}

.border-red-800 {
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity, 1))
}

.border-red-900 {
  --tw-border-opacity: 1;
  border-color: rgb(127 29 29 / var(--tw-border-opacity, 1))
}

.border-red-950 {
  --tw-border-opacity: 1;
  border-color: rgb(69 10 10 / var(--tw-border-opacity, 1))
}

.border-rose-100 {
  --tw-border-opacity: 1;
  border-color: rgb(255 228 230 / var(--tw-border-opacity, 1))
}

.border-rose-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 205 211 / var(--tw-border-opacity, 1))
}

.border-rose-300 {
  --tw-border-opacity: 1;
  border-color: rgb(253 164 175 / var(--tw-border-opacity, 1))
}

.border-rose-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 113 133 / var(--tw-border-opacity, 1))
}

.border-rose-50 {
  --tw-border-opacity: 1;
  border-color: rgb(255 241 242 / var(--tw-border-opacity, 1))
}

.border-rose-500 {
  --tw-border-opacity: 1;
  border-color: rgb(244 63 94 / var(--tw-border-opacity, 1))
}

.border-rose-600 {
  --tw-border-opacity: 1;
  border-color: rgb(225 29 72 / var(--tw-border-opacity, 1))
}

.border-rose-700 {
  --tw-border-opacity: 1;
  border-color: rgb(190 18 60 / var(--tw-border-opacity, 1))
}

.border-rose-800 {
  --tw-border-opacity: 1;
  border-color: rgb(159 18 57 / var(--tw-border-opacity, 1))
}

.border-rose-900 {
  --tw-border-opacity: 1;
  border-color: rgb(136 19 55 / var(--tw-border-opacity, 1))
}

.border-rose-950 {
  --tw-border-opacity: 1;
  border-color: rgb(76 5 25 / var(--tw-border-opacity, 1))
}

.border-slate-100 {
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1))
}

.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1))
}

.border-slate-300 {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1))
}

.border-slate-400 {
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1))
}

.border-slate-50 {
  --tw-border-opacity: 1;
  border-color: rgb(248 250 252 / var(--tw-border-opacity, 1))
}

.border-slate-500 {
  --tw-border-opacity: 1;
  border-color: rgb(100 116 139 / var(--tw-border-opacity, 1))
}

.border-slate-600 {
  --tw-border-opacity: 1;
  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1))
}

.border-slate-700 {
  --tw-border-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1))
}

.border-slate-800 {
  --tw-border-opacity: 1;
  border-color: rgb(30 41 59 / var(--tw-border-opacity, 1))
}

.border-slate-900 {
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1))
}

.border-slate-950 {
  --tw-border-opacity: 1;
  border-color: rgb(2 6 23 / var(--tw-border-opacity, 1))
}

.border-stone-100 {
  --tw-border-opacity: 1;
  border-color: rgb(245 245 244 / var(--tw-border-opacity, 1))
}

.border-stone-200 {
  --tw-border-opacity: 1;
  border-color: rgb(231 229 228 / var(--tw-border-opacity, 1))
}

.border-stone-300 {
  --tw-border-opacity: 1;
  border-color: rgb(214 211 209 / var(--tw-border-opacity, 1))
}

.border-stone-400 {
  --tw-border-opacity: 1;
  border-color: rgb(168 162 158 / var(--tw-border-opacity, 1))
}

.border-stone-50 {
  --tw-border-opacity: 1;
  border-color: rgb(250 250 249 / var(--tw-border-opacity, 1))
}

.border-stone-500 {
  --tw-border-opacity: 1;
  border-color: rgb(120 113 108 / var(--tw-border-opacity, 1))
}

.border-stone-600 {
  --tw-border-opacity: 1;
  border-color: rgb(87 83 78 / var(--tw-border-opacity, 1))
}

.border-stone-700 {
  --tw-border-opacity: 1;
  border-color: rgb(68 64 60 / var(--tw-border-opacity, 1))
}

.border-stone-800 {
  --tw-border-opacity: 1;
  border-color: rgb(41 37 36 / var(--tw-border-opacity, 1))
}

.border-stone-900 {
  --tw-border-opacity: 1;
  border-color: rgb(28 25 23 / var(--tw-border-opacity, 1))
}

.border-stone-950 {
  --tw-border-opacity: 1;
  border-color: rgb(12 10 9 / var(--tw-border-opacity, 1))
}

.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1)
}

.border-zinc-100 {
  --tw-border-opacity: 1;
  border-color: rgb(244 244 245 / var(--tw-border-opacity, 1))
}

.border-zinc-200 {
  --tw-border-opacity: 1;
  border-color: rgb(228 228 231 / var(--tw-border-opacity, 1))
}

.border-zinc-300 {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 216 / var(--tw-border-opacity, 1))
}

.border-zinc-400 {
  --tw-border-opacity: 1;
  border-color: rgb(161 161 170 / var(--tw-border-opacity, 1))
}

.border-zinc-50 {
  --tw-border-opacity: 1;
  border-color: rgb(250 250 250 / var(--tw-border-opacity, 1))
}

.border-zinc-500 {
  --tw-border-opacity: 1;
  border-color: rgb(113 113 122 / var(--tw-border-opacity, 1))
}

.border-zinc-600 {
  --tw-border-opacity: 1;
  border-color: rgb(82 82 91 / var(--tw-border-opacity, 1))
}

.border-zinc-700 {
  --tw-border-opacity: 1;
  border-color: rgb(63 63 70 / var(--tw-border-opacity, 1))
}

.border-zinc-800 {
  --tw-border-opacity: 1;
  border-color: rgb(39 39 42 / var(--tw-border-opacity, 1))
}

.border-zinc-900 {
  --tw-border-opacity: 1;
  border-color: rgb(24 24 27 / var(--tw-border-opacity, 1))
}

.border-zinc-950 {
  --tw-border-opacity: 1;
  border-color: rgb(9 9 11 / var(--tw-border-opacity, 1))
}

.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1))
}

.bg-amber-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1))
}

.bg-amber-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 211 77 / var(--tw-bg-opacity, 1))
}

.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1))
}

.bg-amber-400\/10 {
  background-color: rgb(251 191 36 / 0.1)
}

.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1))
}

.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1))
}

.bg-amber-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1))
}

.bg-amber-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1))
}

.bg-amber-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(146 64 14 / var(--tw-bg-opacity, 1))
}

.bg-amber-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(120 53 15 / var(--tw-bg-opacity, 1))
}

.bg-amber-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(69 26 3 / var(--tw-bg-opacity, 1))
}

.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2)
}

.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1))
}

.bg-emerald-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1))
}

.bg-emerald-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(110 231 183 / var(--tw-bg-opacity, 1))
}

.bg-emerald-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1))
}

.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1))
}

.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1))
}

.bg-emerald-500\/10 {
  background-color: rgb(16 185 129 / 0.1)
}

.bg-emerald-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1))
}

.bg-emerald-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1))
}

.bg-emerald-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(6 95 70 / var(--tw-bg-opacity, 1))
}

.bg-emerald-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(6 78 59 / var(--tw-bg-opacity, 1))
}

.bg-emerald-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(2 44 34 / var(--tw-bg-opacity, 1))
}

.bg-indigo-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1))
}

.bg-indigo-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(199 210 254 / var(--tw-bg-opacity, 1))
}

.bg-indigo-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(165 180 252 / var(--tw-bg-opacity, 1))
}

.bg-indigo-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(129 140 248 / var(--tw-bg-opacity, 1))
}

.bg-indigo-400\/10 {
  background-color: rgb(129 140 248 / 0.1)
}

.bg-indigo-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1))
}

.bg-indigo-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1))
}

.bg-indigo-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1))
}

.bg-indigo-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1))
}

.bg-indigo-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(55 48 163 / var(--tw-bg-opacity, 1))
}

.bg-indigo-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(49 46 129 / var(--tw-bg-opacity, 1))
}

.bg-indigo-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 27 75 / var(--tw-bg-opacity, 1))
}

.bg-neutral-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1))
}

.bg-neutral-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1))
}

.bg-neutral-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(212 212 212 / var(--tw-bg-opacity, 1))
}

.bg-neutral-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(163 163 163 / var(--tw-bg-opacity, 1))
}

.bg-neutral-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1))
}

.bg-neutral-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(115 115 115 / var(--tw-bg-opacity, 1))
}

.bg-neutral-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(82 82 82 / var(--tw-bg-opacity, 1))
}

.bg-neutral-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1))
}

.bg-neutral-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1))
}

.bg-neutral-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1))
}

.bg-neutral-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1))
}

.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1))
}

.bg-red-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1))
}

.bg-red-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 165 165 / var(--tw-bg-opacity, 1))
}

.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1))
}

.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1))
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1))
}

.bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1)
}

.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1))
}

.bg-red-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1))
}

.bg-red-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1))
}

.bg-red-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1))
}

.bg-red-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(69 10 10 / var(--tw-bg-opacity, 1))
}

.bg-rose-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1))
}

.bg-rose-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 205 211 / var(--tw-bg-opacity, 1))
}

.bg-rose-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 164 175 / var(--tw-bg-opacity, 1))
}

.bg-rose-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 113 133 / var(--tw-bg-opacity, 1))
}

.bg-rose-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1))
}

.bg-rose-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1))
}

.bg-rose-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1))
}

.bg-rose-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(190 18 60 / var(--tw-bg-opacity, 1))
}

.bg-rose-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(159 18 57 / var(--tw-bg-opacity, 1))
}

.bg-rose-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(136 19 55 / var(--tw-bg-opacity, 1))
}

.bg-rose-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(76 5 25 / var(--tw-bg-opacity, 1))
}

.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1))
}

.bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1))
}

.bg-slate-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1))
}

.bg-slate-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1))
}

.bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1))
}

.bg-slate-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1))
}

.bg-slate-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1))
}

.bg-slate-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1))
}

.bg-slate-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1))
}

.bg-slate-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1))
}

.bg-slate-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1))
}

.bg-stone-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 244 / var(--tw-bg-opacity, 1))
}

.bg-stone-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(231 229 228 / var(--tw-bg-opacity, 1))
}

.bg-stone-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(214 211 209 / var(--tw-bg-opacity, 1))
}

.bg-stone-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(168 162 158 / var(--tw-bg-opacity, 1))
}

.bg-stone-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1))
}

.bg-stone-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(120 113 108 / var(--tw-bg-opacity, 1))
}

.bg-stone-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(87 83 78 / var(--tw-bg-opacity, 1))
}

.bg-stone-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(68 64 60 / var(--tw-bg-opacity, 1))
}

.bg-stone-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(41 37 36 / var(--tw-bg-opacity, 1))
}

.bg-stone-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(28 25 23 / var(--tw-bg-opacity, 1))
}

.bg-stone-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(12 10 9 / var(--tw-bg-opacity, 1))
}

.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05)
}

.bg-zinc-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1))
}

.bg-zinc-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1))
}

.bg-zinc-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(212 212 216 / var(--tw-bg-opacity, 1))
}

.bg-zinc-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(161 161 170 / var(--tw-bg-opacity, 1))
}

.bg-zinc-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1))
}

.bg-zinc-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(113 113 122 / var(--tw-bg-opacity, 1))
}

.bg-zinc-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(82 82 91 / var(--tw-bg-opacity, 1))
}

.bg-zinc-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1))
}

.bg-zinc-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1))
}

.bg-zinc-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1))
}

.bg-zinc-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(9 9 11 / var(--tw-bg-opacity, 1))
}

.p-1 {
  padding: 0.25rem
}

.p-10 {
  padding: 2.5rem
}

.p-12 {
  padding: 3rem
}

.p-2 {
  padding: 0.5rem
}

.p-3 {
  padding: 0.75rem
}

.p-4 {
  padding: 1rem
}

.p-5 {
  padding: 1.25rem
}

.p-6 {
  padding: 1.5rem
}

.p-8 {
  padding: 2rem
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem
}

.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem
}

.px-12 {
  padding-left: 3rem;
  padding-right: 3rem
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem
}

.text-center {
  text-align: center
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem
}

.font-bold {
  font-weight: 700
}

.font-extrabold {
  font-weight: 800
}

.font-medium {
  font-weight: 500
}

.font-semibold {
  font-weight: 600
}

.leading-6 {
  line-height: 1.5rem
}

.tracking-\[\.2em\] {
  letter-spacing: .2em
}

.text-amber-100 {
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / var(--tw-text-opacity, 1))
}

.text-amber-200 {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1))
}

.text-amber-300 {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1))
}

.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1))
}

.text-amber-50 {
  --tw-text-opacity: 1;
  color: rgb(255 251 235 / var(--tw-text-opacity, 1))
}

.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1))
}

.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1))
}

.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1))
}

.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1))
}

.text-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1))
}

.text-amber-950 {
  --tw-text-opacity: 1;
  color: rgb(69 26 3 / var(--tw-text-opacity, 1))
}

.text-emerald-100 {
  --tw-text-opacity: 1;
  color: rgb(209 250 229 / var(--tw-text-opacity, 1))
}

.text-emerald-200 {
  --tw-text-opacity: 1;
  color: rgb(167 243 208 / var(--tw-text-opacity, 1))
}

.text-emerald-300 {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1))
}

.text-emerald-400 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1))
}

.text-emerald-50 {
  --tw-text-opacity: 1;
  color: rgb(236 253 245 / var(--tw-text-opacity, 1))
}

.text-emerald-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1))
}

.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1))
}

.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1))
}

.text-emerald-800 {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1))
}

.text-emerald-900 {
  --tw-text-opacity: 1;
  color: rgb(6 78 59 / var(--tw-text-opacity, 1))
}

.text-emerald-950 {
  --tw-text-opacity: 1;
  color: rgb(2 44 34 / var(--tw-text-opacity, 1))
}

.text-indigo-100 {
  --tw-text-opacity: 1;
  color: rgb(224 231 255 / var(--tw-text-opacity, 1))
}

.text-indigo-200 {
  --tw-text-opacity: 1;
  color: rgb(199 210 254 / var(--tw-text-opacity, 1))
}

.text-indigo-300 {
  --tw-text-opacity: 1;
  color: rgb(165 180 252 / var(--tw-text-opacity, 1))
}

.text-indigo-400 {
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1))
}

.text-indigo-50 {
  --tw-text-opacity: 1;
  color: rgb(238 242 255 / var(--tw-text-opacity, 1))
}

.text-indigo-500 {
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1))
}

.text-indigo-600 {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1))
}

.text-indigo-700 {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1))
}

.text-indigo-800 {
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / var(--tw-text-opacity, 1))
}

.text-indigo-900 {
  --tw-text-opacity: 1;
  color: rgb(49 46 129 / var(--tw-text-opacity, 1))
}

.text-indigo-950 {
  --tw-text-opacity: 1;
  color: rgb(30 27 75 / var(--tw-text-opacity, 1))
}

.text-neutral-100 {
  --tw-text-opacity: 1;
  color: rgb(245 245 245 / var(--tw-text-opacity, 1))
}

.text-neutral-200 {
  --tw-text-opacity: 1;
  color: rgb(229 229 229 / var(--tw-text-opacity, 1))
}

.text-neutral-300 {
  --tw-text-opacity: 1;
  color: rgb(212 212 212 / var(--tw-text-opacity, 1))
}

.text-neutral-400 {
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1))
}

.text-neutral-50 {
  --tw-text-opacity: 1;
  color: rgb(250 250 250 / var(--tw-text-opacity, 1))
}

.text-neutral-500 {
  --tw-text-opacity: 1;
  color: rgb(115 115 115 / var(--tw-text-opacity, 1))
}

.text-neutral-600 {
  --tw-text-opacity: 1;
  color: rgb(82 82 82 / var(--tw-text-opacity, 1))
}

.text-neutral-700 {
  --tw-text-opacity: 1;
  color: rgb(64 64 64 / var(--tw-text-opacity, 1))
}

.text-neutral-800 {
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity, 1))
}

.text-neutral-900 {
  --tw-text-opacity: 1;
  color: rgb(23 23 23 / var(--tw-text-opacity, 1))
}

.text-neutral-950 {
  --tw-text-opacity: 1;
  color: rgb(10 10 10 / var(--tw-text-opacity, 1))
}

.text-red-100 {
  --tw-text-opacity: 1;
  color: rgb(254 226 226 / var(--tw-text-opacity, 1))
}

.text-red-200 {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1))
}

.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1))
}

.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1))
}

.text-red-50 {
  --tw-text-opacity: 1;
  color: rgb(254 242 242 / var(--tw-text-opacity, 1))
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1))
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1))
}

.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1))
}

.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1))
}

.text-red-900 {
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1))
}

.text-red-950 {
  --tw-text-opacity: 1;
  color: rgb(69 10 10 / var(--tw-text-opacity, 1))
}

.text-rose-100 {
  --tw-text-opacity: 1;
  color: rgb(255 228 230 / var(--tw-text-opacity, 1))
}

.text-rose-200 {
  --tw-text-opacity: 1;
  color: rgb(254 205 211 / var(--tw-text-opacity, 1))
}

.text-rose-300 {
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / var(--tw-text-opacity, 1))
}

.text-rose-400 {
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1))
}

.text-rose-50 {
  --tw-text-opacity: 1;
  color: rgb(255 241 242 / var(--tw-text-opacity, 1))
}

.text-rose-500 {
  --tw-text-opacity: 1;
  color: rgb(244 63 94 / var(--tw-text-opacity, 1))
}

.text-rose-600 {
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / var(--tw-text-opacity, 1))
}

.text-rose-700 {
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity, 1))
}

.text-rose-800 {
  --tw-text-opacity: 1;
  color: rgb(159 18 57 / var(--tw-text-opacity, 1))
}

.text-rose-900 {
  --tw-text-opacity: 1;
  color: rgb(136 19 55 / var(--tw-text-opacity, 1))
}

.text-rose-950 {
  --tw-text-opacity: 1;
  color: rgb(76 5 25 / var(--tw-text-opacity, 1))
}

.text-slate-100 {
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity, 1))
}

.text-slate-200 {
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity, 1))
}

.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1))
}

.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1))
}

.text-slate-50 {
  --tw-text-opacity: 1;
  color: rgb(248 250 252 / var(--tw-text-opacity, 1))
}

.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1))
}

.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1))
}

.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1))
}

.text-slate-800 {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1))
}

.text-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1))
}

.text-slate-950 {
  --tw-text-opacity: 1;
  color: rgb(2 6 23 / var(--tw-text-opacity, 1))
}

.text-stone-100 {
  --tw-text-opacity: 1;
  color: rgb(245 245 244 / var(--tw-text-opacity, 1))
}

.text-stone-200 {
  --tw-text-opacity: 1;
  color: rgb(231 229 228 / var(--tw-text-opacity, 1))
}

.text-stone-300 {
  --tw-text-opacity: 1;
  color: rgb(214 211 209 / var(--tw-text-opacity, 1))
}

.text-stone-400 {
  --tw-text-opacity: 1;
  color: rgb(168 162 158 / var(--tw-text-opacity, 1))
}

.text-stone-50 {
  --tw-text-opacity: 1;
  color: rgb(250 250 249 / var(--tw-text-opacity, 1))
}

.text-stone-500 {
  --tw-text-opacity: 1;
  color: rgb(120 113 108 / var(--tw-text-opacity, 1))
}

.text-stone-600 {
  --tw-text-opacity: 1;
  color: rgb(87 83 78 / var(--tw-text-opacity, 1))
}

.text-stone-700 {
  --tw-text-opacity: 1;
  color: rgb(68 64 60 / var(--tw-text-opacity, 1))
}

.text-stone-800 {
  --tw-text-opacity: 1;
  color: rgb(41 37 36 / var(--tw-text-opacity, 1))
}

.text-stone-900 {
  --tw-text-opacity: 1;
  color: rgb(28 25 23 / var(--tw-text-opacity, 1))
}

.text-stone-950 {
  --tw-text-opacity: 1;
  color: rgb(12 10 9 / var(--tw-text-opacity, 1))
}

.text-zinc-100 {
  --tw-text-opacity: 1;
  color: rgb(244 244 245 / var(--tw-text-opacity, 1))
}

.text-zinc-200 {
  --tw-text-opacity: 1;
  color: rgb(228 228 231 / var(--tw-text-opacity, 1))
}

.text-zinc-300 {
  --tw-text-opacity: 1;
  color: rgb(212 212 216 / var(--tw-text-opacity, 1))
}

.text-zinc-400 {
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / var(--tw-text-opacity, 1))
}

.text-zinc-50 {
  --tw-text-opacity: 1;
  color: rgb(250 250 250 / var(--tw-text-opacity, 1))
}

.text-zinc-500 {
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / var(--tw-text-opacity, 1))
}

.text-zinc-600 {
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / var(--tw-text-opacity, 1))
}

.text-zinc-700 {
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / var(--tw-text-opacity, 1))
}

.text-zinc-800 {
  --tw-text-opacity: 1;
  color: rgb(39 39 42 / var(--tw-text-opacity, 1))
}

.text-zinc-900 {
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / var(--tw-text-opacity, 1))
}

.text-zinc-950 {
  --tw-text-opacity: 1;
  color: rgb(9 9 11 / var(--tw-text-opacity, 1))
}

.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.hover\:bg-amber-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(252 211 77 / var(--tw-bg-opacity, 1))
}

.hover\:text-amber-200:hover {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1))
}

@media (min-width: 768px) {
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}