/* ==========================================================
   FAIM JEWELLERY ARABIA EXPERIENCE  |  Staff dashboard (tablet + desktop)
   Denser than the visitor screens: this is a working tool.
   ========================================================== */
#staff { position: fixed; inset: 0; z-index: 60; background: var(--velvet); overflow: auto; font-size: 1rem; }
.st-pin { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding: 2rem; }
.st-pin h1 { font-size: 3.4rem; }
.st-pin .monogram { width: 4rem; height: 4rem; }
.st-dots { display: flex; gap: 1rem; margin: 1rem 0; }
.st-dots span { width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid var(--gold); }
.st-dots span.on { background: var(--gold); }
.st-dots.shake { animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.st-pad { display: grid; grid-template-columns: repeat(3, 5.5rem); gap: 1rem; }
.st-key { width: 5.5rem; height: 5.5rem; border-radius: 50%; border: 1px solid var(--gold-dim); font-size: 1.8rem; font-family: 'Cormorant', serif; }
.st-key:hover { border-color: var(--gold); background: var(--tray); }
.st-app { min-height: 100%; display: grid; grid-template-rows: auto 1fr; }
.st-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 2rem; padding: 1rem 2.5rem; border-bottom: 1px solid var(--gold-faint); background: rgba(14,11,9,.95); flex-wrap: wrap; }
.st-brand { display: flex; align-items: center; gap: 1.25rem; color: var(--smoke); }
.st-logo { height: 1.8rem; width: auto; }
.st-tabs { display: flex; gap: .25rem; flex-wrap: wrap; }
.st-tabs a { color: var(--smoke); text-decoration: none; padding: .9rem 1.2rem; border-radius: 999px; font-size: 1.05rem; }
.st-tabs a[aria-selected="true"] { color: var(--velvet); background: var(--ivory); }
.st-end { margin-inline-start: auto; display: flex; gap: .5rem; }
.st-main { padding: 2rem 2.5rem 4rem; }
.st-head { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.st-head h1 { font-size: 3rem; }
.st-tools { display: flex; gap: 1.5rem; align-items: center; }
.st-sample { font-size: 1rem; }
.st-sub { font-size: 1.8rem; margin: 2rem 0 1rem; }
.st-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.st-kpis--8 { grid-template-columns: repeat(4, 1fr); }
.st-kpis--6 { grid-template-columns: repeat(6, 1fr); }
.st-kpis div { background: var(--tray); border: 1px solid var(--gold-faint); border-radius: var(--r-s); padding: 1.25rem 1.5rem; }
.st-kpis span { font-family: 'Cormorant', serif; font-size: 3rem; line-height: 1; }
.st-kpis p { color: var(--smoke); font-size: .95rem; margin-top: .3rem; }
.st-table-wrap { overflow-x: auto; border: 1px solid var(--gold-faint); border-radius: var(--r-s); }
.st-table { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 70rem; }
.st-table th { text-align: start; font-weight: 400; color: var(--smoke); padding: .9rem 1rem; border-bottom: 1px solid var(--gold-dim); background: var(--tray); position: sticky; top: 0; }
.st-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--gold-faint); vertical-align: middle; }
.st-table tr.is-sample td { color: #c9bfb1; }
.st-table .demo-flag { margin-inline-start: .5rem; font-size: .75rem; padding: .1rem .5rem; }
.st-table select, .st-table input, .st-lookup input, .st-row input { background: var(--tray-2); border: 1px solid var(--gold-faint); border-radius: var(--r-s); padding: .6rem .8rem; min-height: 2.8rem; }
.st-status.st-hot, em.st-hot { background: #5a2a1c; color: #ffd8c7; border-color: #a65a3c; }
.st-status.st-warm, em.st-warm { background: #4a3b1d; color: #f3e1b5; }
.st-status.st-general, em.st-general { background: #2a2a2a; color: #d9d4cc; }
.st-ths { display: flex; gap: .3rem; }
.st-th { width: 3.2rem; height: 3.2rem; flex: none; display: block; }
.st-th img { padding: 6%; }
.st-tag { display: inline-block; font-size: .8rem; padding: .1rem .55rem; border-radius: 999px; border: 1px solid var(--gold-dim); color: var(--gold); text-transform: capitalize; }
.st-lookup { display: flex; gap: 1rem; margin: 1.5rem 0; max-width: 40rem; }
.st-lookup input { flex: 1; font-size: 1.4rem; letter-spacing: .1em; }
.st-mod { display: grid; grid-template-columns: 6rem 4.5rem 1fr auto auto; gap: 1.25rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--gold-faint); }
.st-mod .st-th { width: 4.5rem; height: 4.5rem; }
.st-selfie { width: 6rem; height: 6rem; object-fit: cover; border-radius: var(--r-s); }
.st-selfie--none { display: grid; place-items: center; background: var(--tray); color: var(--ash); font-size: .8rem; text-align: center; }
.st-mod p { color: var(--smoke); }
.st-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; }
.st-panel { background: var(--tray); border: 1px solid var(--gold-faint); border-radius: var(--r-s); padding: 1.5rem; margin-bottom: 1.5rem; }
.st-panel .st-sub { margin-top: 0; }
.st-chart { width: 100%; height: auto; }
.st-chart text { fill: var(--smoke); font-size: 13px; font-family: var(--text); }
.st-hbar { display: grid; grid-template-columns: 11rem 1fr 2.5rem; gap: 1rem; align-items: center; margin-bottom: .8rem; font-size: 1rem; }
.st-hbar i { height: .7rem; border-radius: 999px; background: linear-gradient(90deg, var(--gold) var(--w), var(--gold-faint) var(--w)); }
.st-hbar b { font-weight: 400; text-align: end; }
.st-top { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.st-top .vitrine { aspect-ratio: 1; display: block; }
.st-top img { padding: 8%; }
.st-top p { font-size: .95rem; margin-top: .5rem; }
.st-top b { color: var(--gold); font-weight: 400; margin-inline-end: .3rem; }
.st-settings { display: grid; gap: 1.5rem; max-width: 70rem; }
.st-row { display: grid; grid-template-columns: 18rem 1fr; gap: 1rem; align-items: center; }
.st-row > div { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 1000px) { .st-kpis, .st-kpis--8 { grid-template-columns: repeat(2, 1fr); } .st-kpis--6 { grid-template-columns: repeat(3, 1fr); } .st-cols { grid-template-columns: 1fr; } .st-top { grid-template-columns: repeat(3, 1fr); } .st-mod { grid-template-columns: 4.5rem 1fr; } .st-row { grid-template-columns: 1fr; } }