/* =====================================================================
   Bhumi Gems - Maison theme (owner, 18 Oct 2026: "ek dum must kro desk akhu,
   branded website jevu").
   Loaded after app.css and only re-dresses it: warm onyx instead of slate,
   the logo's rose gold as the one accent, ivory type, a jeweller's serif for
   titles and figures, gold hairlines in place of grey ones.  No layout or
   behaviour lives here - delete the <link> and the desk is exactly as before.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&display=swap');

:root{
  --serif:'Cormorant Garamond','Bodoni 72',Didot,'Playfair Display',Georgia,serif;

  /* onyx, warm - never blue */
  --bg:#0c0a09;
  --panel:#15120f;
  --panel-2:#1b1714;
  --panel-3:#221d19;
  --line:#33291f;
  --line-2:#261f19;
  --ink:#f6efe7;
  --ink-2:#dccfc1;
  --dim:#a39180;

  /* the logo's rose gold, and a champagne for the second voice */
  --accent:#dfa887;
  --accent-2:#f0caa9;
  --accent-rgb:223,168,135;
  --accent-soft:rgba(223,168,135,.13);
  --accent-line:rgba(223,168,135,.38);
  --gold:#d8b779;
  --champagne:#efe0c4;

  --glass:rgba(255,236,218,.028);
  --glass-2:rgba(255,236,218,.052);
  --glass-line:rgba(223,168,135,.16);
  --surface:#15120f;
  --surface-2:#1b1714;
  --hairline:rgba(223,168,135,.13);
  --r:16px;
  --shadow:0 1px 1px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.38);
  --gold-rule:linear-gradient(90deg,transparent,rgba(223,168,135,.55) 18%,rgba(239,224,196,.75) 50%,rgba(223,168,135,.55) 82%,transparent);
  --metal:linear-gradient(135deg,#f7dcc5 0%,#e7b693 32%,#cf9064 62%,#efc6a6 100%);
}

html{background:var(--bg)}
body{background:var(--bg);color:var(--ink)}
::selection{background:rgba(223,168,135,.35);color:#fff}

/* the room: a candle-warm glow from the top corner and the faintest facet
   lattice, like light through a cut stone - fixed, painted once */
body::before{
  background:
    radial-gradient(70rem 42rem at 8% -12%, rgba(223,168,135,.17), transparent 68%),
    radial-gradient(54rem 36rem at 100% -8%, rgba(216,183,121,.09), transparent 70%),
    radial-gradient(60rem 40rem at 50% 120%, rgba(223,168,135,.06), transparent 70%),
    repeating-linear-gradient(60deg, rgba(239,224,196,.018) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-60deg, rgba(239,224,196,.018) 0 1px, transparent 1px 46px);
}

/* thin warm scrollbars */
*{scrollbar-width:thin;scrollbar-color:rgba(223,168,135,.28) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:rgba(223,168,135,.22);border-radius:9px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(223,168,135,.4);background-clip:padding-box}

/* ============================ sign in ============================ */
.login-wrap{
  position:relative;
  background:
    radial-gradient(48rem 30rem at 50% 0%, rgba(223,168,135,.16), transparent 70%),
    radial-gradient(40rem 26rem at 50% 100%, rgba(216,183,121,.08), transparent 70%);
}
.login-card{
  max-width:420px;padding:44px 38px 34px;border-radius:24px;
  background:linear-gradient(180deg,rgba(31,26,22,.92),rgba(18,15,13,.94));
  border:1px solid rgba(223,168,135,.24);
  box-shadow:inset 0 1px 0 rgba(255,240,225,.10), 0 40px 90px rgba(0,0,0,.6), 0 0 0 6px rgba(223,168,135,.04);
  position:relative;
}
.login-card::before{
  content:'';position:absolute;left:38px;right:38px;top:0;height:1px;background:var(--gold-rule);
}
.login-logo{max-width:236px;margin-bottom:10px;filter:drop-shadow(0 6px 26px rgba(223,168,135,.34))}
.login-card .sub{
  text-align:center;text-transform:uppercase;letter-spacing:.32em;font-size:10.5px;
  color:var(--accent);margin:0 0 30px;font-weight:600;
}
.login-card label{color:var(--dim);letter-spacing:.06em}
.boot-bar i{background:var(--metal)}

/* ============================ sidebar ============================ */
.sidebar{
  background:
    radial-gradient(28rem 18rem at 0% 0%, rgba(223,168,135,.10), transparent 70%),
    linear-gradient(180deg,#14100e,#0d0b09);
  border-right:1px solid rgba(223,168,135,.14);
}
.brand-box{
  align-items:center;text-align:center;padding:26px 18px 20px;gap:8px;
  border-bottom:0;position:relative;
}
.brand-box::after{content:'';position:absolute;left:22px;right:22px;bottom:0;height:1px;background:var(--gold-rule);opacity:.7}
.brand-logo{max-width:178px;filter:drop-shadow(0 4px 18px rgba(223,168,135,.30))}
.brand-box small{
  color:var(--accent);letter-spacing:.34em;font-size:9.5px;font-weight:600;padding-left:.34em;
}
.nav{padding:var(--s3) 14px var(--s4)}
.nav-label{
  color:rgba(223,168,135,.62);letter-spacing:.26em;font-size:9.5px;font-weight:600;
  padding:20px 10px 8px;display:flex;align-items:center;gap:10px;
}
.nav-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(223,168,135,.22),transparent)}
.nav-item{border-radius:11px;padding:10px 12px;color:#cfc2b4;letter-spacing:.01em}
.nav-item .ic{opacity:.7;filter:sepia(.35) saturate(.9)}
.nav-item:hover{background:rgba(223,168,135,.07);color:var(--ink)}
.nav-item.on{
  background:linear-gradient(90deg,rgba(223,168,135,.20),rgba(223,168,135,.05) 70%,transparent);
  color:#fff;box-shadow:inset 0 0 0 1px rgba(223,168,135,.16);
}
.nav-item.on::before{left:-14px;top:9px;bottom:9px;width:3px;background:var(--metal);box-shadow:0 0 10px rgba(223,168,135,.6)}
.nav-item.on .ic{opacity:1;filter:none}
.nav-item .badge{background:rgba(223,168,135,.10);color:var(--ink-2);border:1px solid rgba(223,168,135,.14)}
.nav-item.on .badge{background:rgba(223,168,135,.26);color:#fff;border-color:rgba(223,168,135,.4)}
.nav-sep{background:linear-gradient(90deg,transparent,rgba(223,168,135,.25),transparent)}
.side-foot{border-top:1px solid rgba(223,168,135,.12)}
.user-chip{background:linear-gradient(180deg,rgba(223,168,135,.10),rgba(223,168,135,.03));border-color:rgba(223,168,135,.18)}
.avatar{background:var(--metal);color:#2b1a0e;box-shadow:0 4px 14px rgba(223,168,135,.35)}

/* ============================ top bar ============================ */
.topbar{
  background:linear-gradient(180deg,rgba(21,17,14,.97),rgba(14,11,10,.97));
  border-bottom:0;position:sticky;
}
.topbar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold-rule);opacity:.55}
.page-title{
  font-family:var(--serif);font-size:32px;font-weight:600;letter-spacing:.005em;line-height:1.05;
  color:var(--ink);
}
.crumb{
  text-transform:uppercase;letter-spacing:.24em;font-size:10px;font-weight:600;
  color:rgba(223,168,135,.75);margin-top:6px;
}
@media (min-width:900px){ .topbar{padding:20px 30px 18px} .page{padding:28px 30px 56px} }

/* ============================ panels / cards ============================ */
.panel{
  background:linear-gradient(180deg,rgba(255,236,218,.045),rgba(255,236,218,.018));
  border:1px solid rgba(223,168,135,.15);border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,240,225,.05), 0 12px 32px rgba(0,0,0,.30);
}
.panel-head{border-bottom:1px solid rgba(223,168,135,.12);padding:18px 22px}
.panel-head h3{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:.005em}
.panel-body{padding:20px 22px}
.sec-title{
  font-family:var(--serif);text-transform:none;letter-spacing:.01em;
  font-size:21px;font-weight:600;color:var(--ink);margin:30px 0 12px;
  display:flex;align-items:center;gap:14px;
}
.sec-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(223,168,135,.35),transparent)}
.empty{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--dim)}

/* ============================ figures ============================ */
.stat-row{gap:14px}
.stat{
  border-radius:18px;padding:18px 20px 16px;
  background:linear-gradient(180deg,rgba(255,236,218,.055),rgba(255,236,218,.02));
  border:1px solid rgba(223,168,135,.15);
  box-shadow:inset 0 1px 0 rgba(255,240,225,.06), 0 10px 26px rgba(0,0,0,.28);
}
.stat::before{content:'';position:absolute;left:20px;right:20px;top:0;height:1px;background:var(--gold-rule);opacity:.6}
.stat small{color:rgba(223,168,135,.8);letter-spacing:.2em;font-size:9.5px}
.stat b{
  font-family:var(--serif);font-size:44px;font-weight:600;letter-spacing:0;margin-top:8px;line-height:1;
  font-variant-numeric:lining-nums tabular-nums;
}
.stat .foot{color:var(--dim)}
.stat.click:hover{border-color:rgba(223,168,135,.45);background:linear-gradient(180deg,rgba(223,168,135,.12),rgba(223,168,135,.03));transform:translateY(-1px)}
.stat{transition:border-color .2s ease,background .2s ease,transform .2s ease}

/* the "today" reminder: a dispatch card, not an alarm */
.today-bar{
  border-radius:20px;padding:22px 24px;
  border:1px solid rgba(223,168,135,.30);
  background:
    radial-gradient(40rem 12rem at 0% 0%, rgba(223,168,135,.16), transparent 70%),
    linear-gradient(180deg,rgba(40,30,22,.85),rgba(22,17,14,.85));
  box-shadow:inset 0 1px 0 rgba(255,240,225,.08), 0 16px 40px rgba(0,0,0,.35);
}
.today-head b{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:.005em}
.today-row{background:rgba(255,236,218,.035);border:1px solid rgba(223,168,135,.08);padding:10px 14px;border-radius:12px}
.today-row:hover{background:rgba(223,168,135,.10);border-color:rgba(223,168,135,.25)}
.today-row .job{color:var(--accent-2);letter-spacing:.04em}

.bar-row .fill{background:linear-gradient(90deg,rgba(223,168,135,.34),rgba(223,168,135,.06))}

/* ============================ controls ============================ */
.btn{
  border-radius:12px;padding:10px 17px;letter-spacing:.015em;
  background:linear-gradient(180deg,rgba(255,236,218,.07),rgba(255,236,218,.025));
  border:1px solid rgba(223,168,135,.20);color:var(--ink-2);
}
.btn:hover{background:linear-gradient(180deg,rgba(223,168,135,.16),rgba(223,168,135,.05));border-color:rgba(223,168,135,.42);color:var(--ink)}
.btn.primary{
  background:var(--metal);background-size:160% 160%;background-position:0% 50%;
  color:#26170c;border:1px solid rgba(255,230,210,.55);font-weight:700;letter-spacing:.03em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 10px 26px rgba(207,144,100,.32);
  transition:background-position .5s ease,box-shadow .2s ease,transform .07s ease;
}
.btn.primary:hover{background:var(--metal);background-size:160% 160%;background-position:100% 50%;box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 12px 30px rgba(207,144,100,.45)}
.btn.sm{border-radius:10px}
.icon-btn{border-color:rgba(223,168,135,.18);background:rgba(255,236,218,.04);border-radius:11px}

input,select,textarea{
  background-color:rgba(255,236,218,.04);border:1px solid rgba(223,168,135,.18);border-radius:12px;
  color:var(--ink);padding:10px 13px;
}
input:hover,select:hover,textarea:hover{border-color:rgba(223,168,135,.34)}
input:focus,select:focus,textarea:focus{
  background-color:rgba(255,236,218,.06);border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(223,168,135,.14);
}
input::placeholder,textarea::placeholder{color:#7d6e60}
option{background:#1b1714}

/* ============================ tabs ============================ */
.tabs{border-bottom:1px solid rgba(223,168,135,.14);gap:6px}
.tab{letter-spacing:.02em;padding:12px 16px}
.tab.on{border-bottom:2px solid transparent;border-image:var(--metal) 1;color:#fff}
.tab .n{background:rgba(223,168,135,.10)}
.subtab{border-radius:999px;padding:8px 18px;background:rgba(255,236,218,.04);border-color:rgba(223,168,135,.16)}
.subtab.on{background:var(--metal);color:#26170c;border-color:rgba(255,230,210,.5);font-weight:700}

/* ============================ tables / lists ============================ */
table.grid-tbl th{
  background:#181411;color:rgba(223,168,135,.82);letter-spacing:.18em;font-size:9.5px;
  border-bottom:1px solid rgba(223,168,135,.22);
}
table.grid-tbl td{border-bottom:1px solid rgba(223,168,135,.08)}
table.grid-tbl tbody tr:hover{background:rgba(223,168,135,.06)}
.am-row{
  border-radius:16px;border:1px solid rgba(223,168,135,.12);
  background:linear-gradient(180deg,rgba(255,236,218,.045),rgba(255,236,218,.02));
}
.am-row:hover{background:rgba(223,168,135,.07);border-color:rgba(223,168,135,.26)}
.am-pic,.am-pic-none{border-radius:12px;box-shadow:0 0 0 1px rgba(223,168,135,.18)}
.tbl-wrap{border-color:rgba(223,168,135,.15);border-radius:16px}
.chip{background:rgba(255,236,218,.05);border-color:rgba(223,168,135,.16)}
.note{border-radius:14px;background:linear-gradient(180deg,rgba(223,168,135,.13),rgba(223,168,135,.04))}
.st{letter-spacing:.03em;padding:3px 12px}

/* ============================ modals ============================ */
.modal-card{
  border-radius:22px;border:1px solid rgba(223,168,135,.22);
  background:linear-gradient(180deg,rgba(29,24,20,.97),rgba(16,13,11,.98));
  box-shadow:inset 0 1px 0 rgba(255,240,225,.08), 0 40px 100px rgba(0,0,0,.65);
}
.modal-head h3,.modal-head h2{font-family:var(--serif);font-weight:600;font-size:24px}

/* the listing desk wears the same jewellery */
.ld-card{border-color:rgba(223,168,135,.15)!important;border-radius:18px}

/* ============================ sidebar icons ============================
   One hand-drawn line set in the logo's rose gold in place of the mix of emoji and glyphs
   (a parcel, a truck, a diamond and a typewriter arrow all drawn by different people).
   The glyph is still in the HTML; only its paint is swapped for the mask. */
.nav-item .ic{font-size:0;width:19px;height:19px;flex:0 0 19px;background:rgba(223,168,135,.78);filter:none;opacity:1;
  -webkit-mask:var(--i) center/19px 19px no-repeat;mask:var(--i) center/19px 19px no-repeat}
.nav-item:hover .ic{background:var(--accent-2)}
.nav-item.on .ic{background:var(--metal)}
.nav-item[data-page="dashboard"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.6'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.6'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.6'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.6'/%3E%3C/svg%3E")}
.nav-item[data-page="form"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E")}
.nav-item[data-page="orders"][data-stage=""]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6.5h11M9 12h11M9 17.5h11'/%3E%3Ccircle cx='4.5' cy='6.5' r='1'/%3E%3Ccircle cx='4.5' cy='12' r='1'/%3E%3Ccircle cx='4.5' cy='17.5' r='1'/%3E%3C/svg%3E")}
.nav-item[data-stage="new"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3.5l1.7 4.8 4.8 1.7-4.8 1.7L11 16.5l-1.7-4.8L4.5 10l4.8-1.7z'/%3E%3Cpath d='M18 14.5l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8z'/%3E%3C/svg%3E")}
.nav-item[data-stage="print"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3.5h10V9'/%3E%3Crect x='3.5' y='9' width='17' height='8' rx='2'/%3E%3Cpath d='M7 14h10v6.5H7z'/%3E%3C/svg%3E")}
.nav-item[data-stage="with_soni"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4.5l5 5-2.5 2.5-5-5z'/%3E%3Cpath d='M12 7l-8.5 8.5a1.8 1.8 0 0 0 2.5 2.5L14.5 9.5'/%3E%3Cpath d='M8 20.5h12'/%3E%3C/svg%3E")}
.nav-item[data-stage="at_office"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='3.5' width='15' height='17' rx='1.6'/%3E%3Cpath d='M9.5 20.5v-4h5v4M8.5 7.5h2M13.5 7.5h2M8.5 11.5h2M13.5 11.5h2'/%3E%3C/svg%3E")}
.nav-item[data-stage="to_ship"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 7.5L12 3 3.5 7.5 12 12z'/%3E%3Cpath d='M3.5 7.5v9L12 21l8.5-4.5v-9'/%3E%3Cpath d='M12 12v9'/%3E%3C/svg%3E")}
.nav-item[data-stage="shipped"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L10.5 13.5'/%3E%3Cpath d='M21 3l-6.5 18-4-7.5L3 9.5z'/%3E%3C/svg%3E")}
.nav-item[data-stage="delivered"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8 12.3l2.7 2.7L16 9.5'/%3E%3C/svg%3E")}
.nav-item[data-stage="cancelled"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E")}
.nav-item[data-page="ship"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h11.5v10H2.5z'/%3E%3Cpath d='M14 10h4l3 3.2v3.3h-7'/%3E%3Ccircle cx='6.5' cy='18' r='1.8'/%3E%3Ccircle cx='17.5' cy='18' r='1.8'/%3E%3C/svg%3E")}
.nav-item[data-page="sheet"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 9.5h17M3.5 14.5h17M9 4.5v15'/%3E%3C/svg%3E")}
.nav-item[data-page="stones"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h11l4 5.5L12 20.5 2.5 9z'/%3E%3Cpath d='M2.5 9h19M9.5 3.5L8 9l4 11.5L16 9l-1.5-5.5'/%3E%3C/svg%3E")}
.nav-item[data-page="listing"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.5H6.5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3.5V9h5.5M8.5 13h7M8.5 16.5h5'/%3E%3C/svg%3E")}
.nav-item[data-page="photoprep"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='2'/%3E%3Ccircle cx='9' cy='9' r='1.8'/%3E%3Cpath d='M20.5 15l-5-5L4.5 20.5'/%3E%3C/svg%3E")}
.nav-item[data-page="listingReport"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z'/%3E%3Cpath d='M8 13h8'/%3E%3C/svg%3E")}
.nav-item[data-page="bills"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 3.5h13v17l-2.6-1.6-2.2 1.6-1.7-1.6-1.7 1.6-2.2-1.6-2.6 1.6z'/%3E%3Cpath d='M9 8.5h6M9 12h6M9 15.5h3.5'/%3E%3C/svg%3E")}
.nav-item[data-page="profit"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 17l6-6 4 4 7-7'/%3E%3Cpath d='M15 8h5.5v5.5'/%3E%3C/svg%3E")}
.nav-item[data-page="team"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.8'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E")}

/* serif figures stand upright: lining numerals wherever the serif carries a number */
.page-title,.panel-head h3,.today-head b,.sec-title,.stat b,.modal-head h3,.modal-head h2{font-variant-numeric:lining-nums tabular-nums}


/* ============================ forms & the listing desk ============================ */
fieldset{
  border:1px solid rgba(223,168,135,.15);border-radius:18px;padding:22px 24px 20px;
  background:linear-gradient(180deg,rgba(255,236,218,.045),rgba(255,236,218,.016));
  box-shadow:inset 0 1px 0 rgba(255,240,225,.05), 0 12px 30px rgba(0,0,0,.26);
}
legend{
  font-family:var(--serif);font-size:20px;font-weight:600;text-transform:none;letter-spacing:.005em;
  color:var(--ink);padding:0 10px;font-variant-numeric:lining-nums;
}
label{color:var(--ink-2)}
/* the drop boxes: a rose-gold stitched frame, glowing when a picture is held over them */
.pic-drop,.ld-drop{
  border:1.5px dashed rgba(223,168,135,.42)!important;border-radius:16px!important;
  background:radial-gradient(18rem 8rem at 50% 0%, rgba(223,168,135,.10), transparent 70%), rgba(255,236,218,.025)!important;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.pic-drop:hover,.pic-drop.over,.ld-drop:hover,.ld-drop.over{
  border-color:var(--accent)!important;box-shadow:0 0 0 5px rgba(223,168,135,.10), 0 10px 30px rgba(223,168,135,.12);
}
.ld-colour.need .ld-drop{border-color:rgba(239,202,140,.75)!important}
.ld-needtag{letter-spacing:.16em;font-size:9.5px;padding:3px 10px}
.ld-colour.need .ld-needtag{background:rgba(216,183,121,.14);color:var(--champagne);border:1px solid rgba(216,183,121,.4)}
.ld-colour-head b{font-family:var(--serif);font-size:19px;font-weight:600}
.ld-steps li::marker{font-family:var(--serif);color:var(--accent)}

/* six figures to a row on a laptop, as before the theme's wider padding */
.stat-row{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

/* the select keeps app.css's chevron, drawn in rose gold */
select{background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%)}

/* stone size chart: each cut titled like a catalogue page */
.stone-card{background:linear-gradient(180deg,rgba(255,236,218,.045),rgba(255,236,218,.016));border:1px solid rgba(223,168,135,.15);border-radius:18px}
.stone-card h4{font-family:var(--serif);font-size:22px;font-weight:600}
.stone-tbl th{color:rgba(223,168,135,.8);letter-spacing:.16em;border-bottom-color:rgba(223,168,135,.2)}
.stone-tbl td{border-bottom-color:rgba(223,168,135,.07)}
.stone-tbl tr:hover td{background:rgba(223,168,135,.07)}