:root {
      --navy: #063d32;
      --gold: #19df91;
      --gold-dark: #14c982;
      --cream: #064c3d;
      --ink: #f5fffb;
      --muted: #9fc5b8;
      --line: rgba(255,255,255,.28);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-width: 320px;
      color: var(--ink);
      background:
        radial-gradient(circle at 13% 10%, rgba(25,223,145,.12), transparent 30rem),
        radial-gradient(circle at 88% 88%, rgba(24,210,132,.13), transparent 27rem),
        linear-gradient(135deg, #063e34 0%, #075544 48%, #063d32 100%);
      font-family: "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif;
    }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
.primary-button {
  min-height: 44px;
  padding: 0 18px;
  color: #063d32;
  background: linear-gradient(145deg, #28eba0, #14c982);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20,201,130,.2);
  font-weight: 700;
}
.primary-button:hover:not(:disabled) { filter: brightness(1.06); }
.secondary-button {
  min-height: 46px;
  color: #dffff3;
  background: rgba(255,255,255,.055);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-weight: 600;
}
.secondary-button:hover:not(:disabled) { background: rgba(255,255,255,.1); }
.text-button, .nav-button {
  padding: 9px 12px;
  color: rgba(236,255,248,.78);
  background: transparent;
  border: 0;
  border-radius: 9px;
}
.text-button:hover, .nav-button:hover { color: white; background: rgba(255,255,255,.09); }
.input-wrap {
  width: 100%;
  margin-top: 14px;
  display: flex;
  overflow: hidden;
  background: rgba(5,49,40,.7);
  border: 1px solid rgba(203,255,237,.2);
  border-radius: 10px;
}
.input-wrap:focus-within { border-color: #19df91; box-shadow: 0 0 0 2px rgba(25,223,145,.12); }
.input-wrap input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
  font-weight: 600;
}
.input-wrap b {
  padding: 0 11px;
  display: flex;
  align-items: center;
  color: var(--muted);
  background: rgba(255,255,255,.045);
  border-left: 1px solid var(--line);
  font-size: 11px;
  white-space: nowrap;
}
.input-wrap.readonly { background: rgba(2,43,34,.42); }
.market, .param { display: block; }
.param .input-wrap { margin-top: 0; }
    .price-value {
  display: inline-block;
  min-width: 110px;
  padding: 9px 12px;
  color: var(--ink);
  background: rgba(2,43,34,.42);
  border: 1px solid rgba(203,255,237,.16);
  border-radius: 9px;
      font-weight: 600;
    }
    .market-card {
      border-color: rgba(71, 185, 255, .38);
      background: linear-gradient(135deg, rgba(25, 124, 178, .18), rgba(255,255,255,.045));
    }
    .market-card .section-icon {
      color: #8fd8ff;
      background: rgba(71, 185, 255, .14);
    }
    .market-card .market {
      background: linear-gradient(135deg, rgba(38, 145, 198, .16), rgba(255,255,255,.05));
      border-color: rgba(105, 200, 246, .28);
    }
    .settings-card { border-color: rgba(102, 235, 188, .25); }
    .rate { position: relative; background: rgba(255,255,255,.025); }
    .rate::before {
      content: "";
      height: 3px;
      position: absolute;
      inset: 0 0 auto;
      background: #59c8ff;
    }
    .rate:nth-child(2)::before { background: #31e6a1; }
    .rate:nth-child(3)::before { background: #ffca57; }
    .rate:nth-child(4)::before { background: #ff9c62; }
    .rate:nth-child(5)::before { background: #d487ff; }
    .rate:nth-child(6)::before { background: #7dd9d1; }
    .rate-value strong { font-size: 18px; letter-spacing: .01em; }
    .param {
      position: relative;
      border-left-width: 4px;
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }
    .param:hover { transform: translateY(-2px); }
    .param.admin-setting {
      border-color: rgba(255, 198, 77, .48);
      background: linear-gradient(135deg, rgba(255, 184, 56, .11), rgba(255,255,255,.04));
    }
    .param.admin-setting .tag { color: #ffd87e; background: rgba(255, 190, 62, .12); }
    .param.buyback-setting {
      border-color: rgba(255, 125, 91, .48);
      background: linear-gradient(135deg, rgba(255, 102, 76, .11), rgba(255,255,255,.04));
    }
    .param.buyback-setting .tag { color: #ffad91; background: rgba(255, 111, 78, .12); }
    .param.general-setting {
      border-color: rgba(66, 216, 187, .48);
      background: linear-gradient(135deg, rgba(47, 206, 175, .11), rgba(255,255,255,.04));
    }
    .param.web-setting {
      border-color: rgba(185, 115, 255, .48);
      background: linear-gradient(135deg, rgba(159, 85, 235, .12), rgba(255,255,255,.04));
    }
    .param.web-setting .tag { color: #dfb2ff; background: rgba(170, 95, 240, .13); }
    .param .input-wrap { background: rgba(2, 36, 30, .62); }
    .prices-card {
      border-color: rgba(77, 226, 161, .34);
      background: linear-gradient(135deg, rgba(21, 121, 84, .13), rgba(255,255,255,.04));
    }
    .prices-card th:nth-child(2) { color: #62f4b9; }
    .prices-card th:nth-child(3) { color: #ffc66f; }
    .prices-card th:nth-child(4) { color: #ff9f88; }
    .prices-card tbody tr:hover { background: rgba(255,255,255,.035); }
    .prices-card .price-value { width: min(160px, 100%); text-align: right; }
    .topbar {
      height: 74px;
      padding: 0 clamp(18px, 4vw, 60px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 20;
      color: white;
      background: rgba(4,57,47,.82);
      border-bottom: 1px solid rgba(255,255,255,.24);
      backdrop-filter: blur(12px);
    }
    .brand, .nav, .brand-mark, .section-title, .status, .purity { display: flex; align-items: center; }
    .brand { gap: 12px; }
    .brand-mark {
      width: 42px;
      height: 42px;
      justify-content: center;
      border-radius: 13px;
      font-family: "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif;
      font-size: 22px;
      font-weight: 600;
      color: white;
      color: #064536;
      background: linear-gradient(145deg, #28eba0, #14c982);
      box-shadow: 0 8px 24px rgba(20,201,130,.25);
    }
    .brand strong { display: block; font-size: 15px; }
    .brand small { color: rgba(220,255,243,.62); }
    .nav { gap: 5px; }
    .nav a {
      padding: 10px 12px;
      color: rgba(236,255,248,.74);
      border-radius: 10px;
      text-decoration: none;
      font-size: 13px;
    }
    .nav a:hover { color: white; background: rgba(255,255,255,.09); }
    .page { width: min(1400px, calc(100% - 40px)); margin: auto; padding: 40px 0 64px; }
    .hero {
      margin-bottom: 28px;
      padding: 34px 36px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      position: relative;
      overflow: hidden;
      color: white;
      background: linear-gradient(120deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
      border: 1px solid rgba(255,255,255,.32);
      border-radius: 22px;
      box-shadow: 0 18px 44px rgba(0,25,20,.18);
    }
    .hero::before {
      content: "";
      width: 240px;
      height: 240px;
      position: absolute;
      right: -105px;
      top: -145px;
      border-radius: 50%;
      background: linear-gradient(145deg, rgba(64,239,170,.2), rgba(25,223,145,.07));
    }
    .hero::after {
      content: "";
      width: 120px;
      height: 120px;
      position: absolute;
      right: -38px;
      bottom: -76px;
      border-radius: 50%;
      background: rgba(25,223,145,.14);
    }
    .hero > * { position: relative; z-index: 1; }
    .eyebrow {
      margin: 0 0 8px;
      color: #00a83a;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
    }
    h1 {
      margin: 0;
      font-family: "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif;
      font-size: clamp(34px, 4vw, 48px);
      line-height: 1.05;
      font-weight: 500;
    }
    h1 span { color: #24e89c; }
    .hero-copy { margin: 10px 0 0; color: #acd0c4; }
    .status {
      gap: 9px;
      flex: none;
      padding: 9px 13px;
      color: #dffff3;
      background: rgba(25,223,145,.12);
      border: 1px solid rgba(52,236,169,.55);
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
    }
    .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #25e79c;
      box-shadow: 0 0 0 5px rgba(37,231,156,.12);
    }
    .card {
      margin-top: 18px;
      overflow: hidden;
      background: linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.04));
      border: 1px solid rgba(255,255,255,.3);
      border-radius: 18px;
      box-shadow: 0 12px 34px rgba(0,28,22,.14);
      backdrop-filter: blur(14px);
    }
    .section-head {
      padding: 20px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      border-bottom: 1px solid var(--line);
    }
    .section-title { gap: 11px; }
    .section-icon {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      color: #3aefae;
      background: rgba(25,223,145,.12);
      border-radius: 11px;
    }
    .section-title h2 { margin: 0; font-size: 16px; }
    .section-title p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
    .tag {
      padding: 5px 8px;
      color: #54efb7;
      background: rgba(25,223,145,.1);
      border: 1px solid rgba(70,234,173,.2);
      border-radius: 8px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .05em;
    }
    .body { padding: 22px; }
.market-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 15px; }
.market-grid.single { grid-template-columns: 1fr; }
    .market {
      padding: 19px;
      position: relative;
      overflow: hidden;
      background: rgba(255,255,255,.055);
      border: 1px solid var(--line);
      border-radius: 15px;
    }
    .market::after {
      content: "";
      width: 90px;
      height: 90px;
      position: absolute;
      right: -38px;
      top: -38px;
      background: rgba(0,177,79,.07);
      border-radius: 50%;
    }
    .label { color: var(--muted); font-size: 12px; }
    .market .ant-input-number { width: 100%; margin-top: 14px; }
    .hint { margin-top: 9px; color: #91969d; font-size: 10px; }
    .rate-grid {
      display: grid;
      grid-template-columns: 1.25fr repeat(4, 1fr) .85fr;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 14px;
    }
    .rate { min-width: 0; border-right: 1px solid var(--line); }
    .rate:last-child { border-right: 0; }
    .rate-label {
      padding: 10px 13px;
      color: #5bf1ba;
      background: rgba(25,223,145,.09);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    .rate-value {
      min-height: 67px;
      padding: 13px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .rate-value strong { font-size: 16px; }
    .rate-value small { margin-top: 3px; color: var(--muted); }
    .rate-value .ant-input-number { width: 100%; }
    .param-grid { margin-top: 17px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
    .param {
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: rgba(255,255,255,.05);
    }
    .param-head { margin-bottom: 16px; display: flex; justify-content: space-between; gap: 10px; }
    .param h3 { margin: 0; font-size: 14px; }
    .param p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
    .param .ant-input-number { width: 100%; }
    .date-banner { padding: 27px 20px 21px; text-align: center; }
    .date-banner span { color: var(--gold-dark); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
    .date-banner h2 { margin: 6px 0 0; font-family: "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif; font-size: 24px; font-weight: 600; }
    .table-wrap { overflow-x: auto; }
    table { width: 100%; min-width: 700px; border-collapse: collapse; }
    th {
      padding: 12px 18px;
      color: #5bf1ba;
      background: rgba(25,223,145,.09);
      border-bottom: 1px solid rgba(203,255,237,.13);
      font-size: 10px;
      letter-spacing: .06em;
      text-align: right;
      text-transform: uppercase;
    }
    th:first-child { text-align: left; }
    td { padding: 14px 18px; text-align: right; border-bottom: 1px solid rgba(203,255,237,.1); }
    tr:last-child td { border-bottom: 0; }
    td:first-child { text-align: left; }
    td .ant-input-number { width: min(210px, 100%); }
    .purity { gap: 11px; }
    .purity-badge {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      color: #064536;
      background: #27e79d;
      border-radius: 12px;
      font-weight: 700;
    }
    .purity small { color: var(--muted); }
    .actions {
      padding: 18px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      background: rgba(0,25,20,.12);
      border-top: 1px solid var(--line);
    }
    .actions strong { display: block; font-size: 12px; }
    .actions small { color: var(--muted); }
    .ant-input-number { border-radius: 10px !important; }
    .readonly.ant-input-number { background: rgba(2,43,34,.42); }
    .ant-input-number-input { font-weight: 600 !important; }
    .auth-page {
      min-height: 100vh;
      padding: 24px;
      display: grid;
      place-items: center;
    }
    .auth-card {
      width: min(460px, 100%);
      padding: 38px;
      text-align: center;
      background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.045));
      border: 1px solid var(--line);
      border-radius: 24px;
      box-shadow: 0 24px 70px rgba(0,20,16,.3);
      backdrop-filter: blur(18px);
    }
    .auth-card .brand-mark { margin: 0 auto 22px; width: 56px; height: 56px; font-size: 28px; }
    .auth-eyebrow {
      margin-bottom: 10px;
      color: #54efb7;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .auth-card h1 { font-size: 31px; }
    .auth-card p { margin: 12px 0 26px; color: var(--muted); line-height: 1.6; }
    .google-button { width: 100%; height: 50px; font-weight: 600; }
    .google-mark {
      width: 24px;
      height: 24px;
      display: inline-grid;
      place-items: center;
      color: #174ea6;
      background: white;
      border-radius: 50%;
      font-weight: 700;
    }
    .auth-benefits {
      margin: 26px 0 0;
      padding: 20px 0 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      border-top: 1px solid var(--line);
    }
    .auth-benefit strong { display: block; color: #dffff3; font-size: 11px; }
    .auth-benefit small { color: var(--muted); font-size: 9px; }
    .auth-note { display: block; margin-top: 18px; color: var(--muted); font-size: 11px; }
.auth-error {
      margin: 0 0 18px;
      padding: 11px 13px;
      color: #ffd9d9;
      background: rgba(255,65,65,.12);
      border: 1px solid rgba(255,100,100,.25);
      border-radius: 10px;
      font-size: 12px;
}
.auth-success {
  margin: 0 0 18px;
  padding: 11px 13px;
  color: #dffff3;
  background: rgba(25,223,145,.12);
  border: 1px solid rgba(52,236,169,.4);
  border-radius: 10px;
  font-size: 12px;
}
.auth-form { display: grid; gap: 13px; text-align: left; }
.auth-form label > span {
  display: block;
  margin-bottom: 7px;
  color: #dffff3;
  font-size: 12px;
  font-weight: 600;
}
.auth-form input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  color: var(--ink);
  background: rgba(5,49,40,.7);
  border: 1px solid rgba(203,255,237,.2);
  border-radius: 10px;
  outline: 0;
}
.auth-form input:focus { border-color: #19df91; box-shadow: 0 0 0 2px rgba(25,223,145,.12); }
    .auth-loading { min-height: 100vh; display: grid; place-items: center; color: var(--muted); }
    .user-nav { display: flex; align-items: center; gap: 10px; }
    .user-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.1); }
    .logout-button { color: rgba(236,255,248,.74) !important; }
    @media (max-width: 950px) {
      .rate-grid { grid-template-columns: repeat(3, 1fr); }
      .rate:nth-child(3n) { border-right: 0; }
      .rate:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
      .param-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 680px) {
      .topbar { height: 66px; padding: 0 15px; }
      .brand div:last-child, .nav a:not(:last-child) { display: none; }
      .page { width: calc(100% - 24px); padding-top: 26px; }
      .hero { align-items: flex-start; flex-direction: column; }
      .hero { padding: 24px 20px; }
      .market-grid { grid-template-columns: 1fr; }
      .rate-grid { grid-template-columns: repeat(2, 1fr); }
      .rate:nth-child(3n) { border-right: 1px solid var(--line); }
      .rate:nth-child(2n) { border-right: 0; }
      .rate { border-bottom: 1px solid var(--line); }
      .rate:nth-last-child(-n+2) { border-bottom: 0; }
      .section-head, .body { padding-left: 15px; padding-right: 15px; }
      .actions { align-items: stretch; flex-direction: column; }
      .actions .ant-btn { width: 100%; }
      .auth-card { padding: 30px 22px; }
    }

.admin-margin-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1.25fr repeat(4, 1fr) .85fr;
  overflow: hidden;
  background: rgba(255, 194, 72, .07);
  border: 1px solid rgba(255, 194, 72, .28);
  border-radius: 14px;
}
.admin-margin-grid > * {
  min-width: 0;
  padding: 14px;
  border-right: 1px solid rgba(255, 194, 72, .2);
}
.admin-margin-grid > *:last-child { border-right: 0; }
.admin-margin-grid small,
.margin-field > span:first-child {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}
.margin-role { display: grid; place-items: center; color: #d9a62e; }
.margin-field .input-wrap { margin-top: 7px; }
@media (max-width: 950px) {
  .admin-margin-grid { grid-template-columns: repeat(3, 1fr); }
  .admin-margin-grid > * { border-bottom: 1px solid rgba(255, 194, 72, .2); }
}
@media (max-width: 680px) {
  .admin-margin-grid { grid-template-columns: 1fr; }
  .admin-margin-grid > * { border-right: 0; }
}

/* Calm, consistent dashboard treatment */
.dashboard-page {
  --ink: #f7fffc;
  --muted: #b6cec5;
  --line: rgba(255,255,255,.18);
}
.dashboard-page .topbar {
  background: rgba(4,52,43,.9);
  border-bottom-color: rgba(255,255,255,.16);
  box-shadow: none;
}
.dashboard-page .hero {
  padding-top: 30px;
  padding-bottom: 30px;
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 10px 30px rgba(0,25,20,.12);
}
.dashboard-page .hero::before,
.dashboard-page .hero::after,
.dashboard-page .market::after {
  display: none;
}
.dashboard-page .eyebrow,
.dashboard-page h1 span,
.dashboard-page .date-banner span {
  color: #70e3b7;
}
.dashboard-page .hero-copy,
.dashboard-page .hint {
  color: var(--muted);
}
.dashboard-page .card,
.dashboard-page .market-card,
.dashboard-page .settings-card,
.dashboard-page .prices-card {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 10px 28px rgba(0,25,20,.11);
}
.dashboard-page .section-icon {
  display: none;
}
.dashboard-page .section-head {
  border-bottom-color: rgba(255,255,255,.14);
}
.dashboard-page .market,
.dashboard-page .rate-grid,
.dashboard-page .admin-margin-grid,
.dashboard-page .param,
.dashboard-page .param.admin-setting,
.dashboard-page .param.buyback-setting,
.dashboard-page .param.general-setting,
.dashboard-page .param.web-setting {
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.18);
  box-shadow: none;
}
.dashboard-page .param {
  border-left-width: 1px;
}
.dashboard-page .param:hover {
  transform: none;
}
.dashboard-page .rate::before {
  display: none;
}
.dashboard-page .rate,
.dashboard-page .admin-margin-grid > * {
  border-color: rgba(255,255,255,.13);
}
.dashboard-page .rate-label {
  color: #dff8ef;
  background: rgba(255,255,255,.055);
}
.dashboard-page .margin-role,
.dashboard-page .tag,
.dashboard-page .param.admin-setting .tag,
.dashboard-page .param.buyback-setting .tag,
.dashboard-page .param.web-setting .tag {
  color: #9ceaca;
}
.dashboard-page .tag {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.15);
}
.dashboard-page .input-wrap,
.dashboard-page .param .input-wrap {
  background: rgba(2,43,34,.42);
  border-color: rgba(255,255,255,.18);
}
.dashboard-page .input-wrap:focus-within {
  border-color: rgba(112,227,183,.8);
  box-shadow: 0 0 0 2px rgba(112,227,183,.1);
}
.dashboard-page th {
  color: #dff8ef;
  background: rgba(255,255,255,.055);
  border-bottom-color: rgba(255,255,255,.14);
}
.dashboard-page td {
  border-bottom-color: rgba(255,255,255,.1);
}
.dashboard-page .purity-badge {
  color: #eafff7;
  background: rgba(112,227,183,.14);
  border: 1px solid rgba(112,227,183,.28);
}
.dashboard-page .actions {
  background: rgba(0,25,20,.1);
  border-top-color: rgba(255,255,255,.14);
}

/* Bright group accents for the dashboard */
.dashboard-page .market-card {
  border-color: rgba(71,200,255,.52);
  box-shadow: inset 0 3px 0 #47c8ff, 0 10px 28px rgba(0,25,20,.11);
}
.dashboard-page .market-card .section-head {
  background: linear-gradient(90deg, rgba(71,200,255,.12), transparent 55%);
}
.dashboard-page .market-card .section-title h2,
.dashboard-page .market-card .text-button {
  color: #8cddff;
}
.dashboard-page .market-card .market {
  border-color: rgba(71,200,255,.3);
}
.dashboard-page .settings-card {
  border-color: rgba(72,255,178,.46);
  box-shadow: inset 0 3px 0 #48ffb2, 0 10px 28px rgba(0,25,20,.11);
}
.dashboard-page .settings-card .section-head {
  background: linear-gradient(90deg, rgba(72,255,178,.1), transparent 55%);
}
.dashboard-page .settings-card .section-title h2 {
  color: #86ffd0;
}
.dashboard-page .admin-margin-grid {
  background: rgba(255,221,72,.07);
  border-color: rgba(255,221,72,.42);
  box-shadow: inset 3px 0 0 #ffdd48;
}
.dashboard-page .admin-margin-grid .margin-title strong,
.dashboard-page .admin-margin-grid .margin-role {
  color: #ffe879;
}
.dashboard-page .param.buyback-setting {
  border-color: rgba(255,221,72,.36);
  box-shadow: inset 3px 0 0 #ffdd48;
}
.dashboard-page .param.buyback-setting h3,
.dashboard-page .param.buyback-setting .tag {
  color: #ffe879;
}
.dashboard-page .param.general-setting {
  border-color: rgba(72,255,178,.34);
  box-shadow: inset 3px 0 0 #48ffb2;
}
.dashboard-page .param.general-setting h3,
.dashboard-page .param.general-setting .tag {
  color: #86ffd0;
}
.dashboard-page .param.web-setting {
  border-color: rgba(71,200,255,.34);
  box-shadow: inset 3px 0 0 #47c8ff;
}
.dashboard-page .param.web-setting h3,
.dashboard-page .param.web-setting .tag {
  color: #8cddff;
}
.dashboard-page .prices-card {
  border-color: rgba(255,221,72,.44);
  box-shadow: inset 0 3px 0 #ffdd48, 0 10px 28px rgba(0,25,20,.11);
}
.dashboard-page .prices-card .date-banner span,
.dashboard-page .prices-card th {
  color: #ffe879;
}
.dashboard-page .prices-card th {
  background: rgba(255,221,72,.075);
}
.dashboard-page .purity-badge {
  color: #063d32;
  background: #48ffb2;
  border-color: #8affd1;
  box-shadow: 0 0 18px rgba(72,255,178,.13);
}

/* Dropship price graphic */
.dropship-shell {
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
  padding: 38px 0 64px;
}
.dropship-heading {
  margin-bottom: 18px;
  text-align: center;
}
.dropship-heading h1 { font-size: clamp(24px, 3vw, 30px); }
.dropship-actions {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.dropship-actions .secondary-button { padding: 0 18px; }
.dropship-status {
  min-height: 20px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.dropship-poster {
  width: min(620px, 100%);
  margin: 0 auto;
  overflow: hidden;
  color: #173f32;
  background: #f7fbf8;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0,20,16,.25);
  font-family: "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif;
}
.poster-brand {
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  background: #0b5a43;
}
.poster-logo {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #0b5a43;
  background: #fff;
  border-radius: 12px;
  font-size: 23px;
  font-weight: 700;
}
.poster-brand strong,
.poster-brand small { display: block; }
.poster-brand strong { font-size: 14px; letter-spacing: .12em; }
.poster-brand small { margin-top: 2px; color: rgba(255,255,255,.72); font-size: 10px; }
.poster-title {
  padding: 30px 28px 22px;
  text-align: center;
}
.poster-title p {
  margin: 0;
  color: #487668;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
}
.poster-title h2 {
  margin: 4px 0 0;
  color: #0b5a43;
  font-size: 38px;
  line-height: 1;
  letter-spacing: .04em;
}
.poster-validity {
  margin: 0 28px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #d9e7e1;
  border-radius: 12px;
}
.poster-validity > div { padding: 11px 14px; }
.poster-validity > div + div { border-left: 1px solid #d9e7e1; }
.poster-validity span,
.poster-validity strong { display: block; }
.poster-validity span { color: #69867b; font-size: 9px; text-transform: uppercase; }
.poster-validity strong { margin-top: 3px; font-size: 12px; }
.poster-market {
  margin: 0 28px 16px;
  padding: 13px 18px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  gap: 18px;
  color: #fff;
  background: #0b5a43;
  border-radius: 12px;
}
.poster-market div { text-align: center; }
.poster-market span,
.poster-market strong { display: block; }
.poster-market span { color: rgba(255,255,255,.7); font-size: 9px; letter-spacing: .08em; }
.poster-market strong { margin-top: 3px; font-size: 18px; }
.poster-market i { height: 32px; background: rgba(255,255,255,.22); }
.poster-prices {
  padding: 0 28px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.poster-price {
  padding: 16px;
  background: #fff;
  border: 1px solid #dce8e3;
  border-radius: 13px;
}
.poster-price.featured {
  color: #fff;
  background: #167a59;
  border-color: #167a59;
}
.poster-price > span { color: #728d83; font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.poster-price.featured > span { color: rgba(255,255,255,.7); }
.poster-price p { margin: 5px 0 8px; font-size: 12px; font-weight: 700; }
.poster-price strong { font-size: 25px; }
.poster-price small { font-size: 10px; font-weight: 600; }
.poster-note {
  margin: 0 28px 12px;
  padding: 14px 16px;
  background: #edf5f1;
  border-radius: 12px;
  font-size: 11px;
  line-height: 1.55;
}
.poster-note p { margin: 3px 0 0; color: #527066; }
.poster-dirham {
  margin: 0 28px 18px;
  padding: 14px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #0b5a43;
  border: 1px solid #b9d8cb;
  border-radius: 12px;
}
.poster-dirham span { font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.poster-dirham strong { font-size: 22px; }
.poster-warning {
  padding: 13px 20px;
  color: #fff;
  background: #0b5a43;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: center;
}
.poster-source {
  padding: 10px;
  display: block;
  color: #789087;
  background: #eaf2ee;
  font-size: 8px;
  text-align: center;
}
@media (max-width: 680px) {
  .dropship-shell { width: calc(100% - 20px); padding-top: 26px; }
  .dropship-actions { flex-wrap: wrap; }
  .poster-brand { padding: 18px 20px; }
  .poster-title { padding: 25px 20px 18px; }
  .poster-title h2 { font-size: 32px; }
  .poster-validity,
  .poster-market,
  .poster-note,
  .poster-dirham { margin-left: 16px; margin-right: 16px; }
  .poster-prices { padding-left: 16px; padding-right: 16px; }
  .poster-price { padding: 13px; }
  .poster-price strong { font-size: 21px; }
}

/* Original Dropship artwork with live-value overlays */
.dropship-poster.template-poster {
  width: min(452px, 100%);
  aspect-ratio: 2580 / 3648;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  color: #d5a126;
  background: #0e2258;
  border: 0;
  border-radius: 12px;
}
.template-background {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.template-value {
  position: absolute;
  z-index: 1;
  line-height: 1;
  white-space: nowrap;
  font-family: "IBM Plex Sans", sans-serif;
  font-variant-numeric: tabular-nums;
}
.template-start {
  width: 100%;
  top: 27.8%;
  left: 0;
  color: #fff;
  font-size: 3.75cqw;
  font-weight: 500;
  text-align: center;
}
.template-market {
  width: 84%;
  top: 42.05%;
  left: 8%;
  color: #050505;
  font-size: 4.05cqw;
  font-weight: 700;
  text-align: center;
}
.template-spot,
.template-dropship,
.template-social,
.template-malls {
  width: 18%;
  right: 27%;
  font-size: 3.55cqw;
  font-weight: 500;
  text-align: right;
}
.template-spot { top: 49.05%; }
.template-dropship { top: 55.15%; }
.template-social { top: 58.95%; }
.template-malls { top: 62.75%; }
.template-dirham {
  top: 84.7%;
  left: 46%;
  font-size: 3.4cqw;
  font-weight: 500;
}