/*
 * Download admin page styles.
 * Sections: foundation, access screen, app shell, data panels, modals,
 * responsive rules.
 */

/* Foundation */
*, *::before, *::after {
  box-sizing:border-box;
  margin:0;
  padding:0
}

:root {
  --bg:#f5f5f7;
  --text:#1d1d1f;
  --muted:#86868b;
  --muted-2:#a1a1a8;
  --glass:rgba(255, 255, 255, .55);
  --glass-hover:rgba(255, 255, 255, .75);
  --border:rgba(255, 255, 255, .6);
  --line:rgba(29, 29, 31, .08);
  --shadow:0 16px 60px rgba(24, 24, 27, .08), 0 2px 8px rgba(24, 24, 27, .04);
  --shadow-soft:0 8px 28px rgba(24, 24, 27, .06);
  --blur:blur(36px) saturate(180%);
  --dark:#1d1d1f;
  --ok:#10b981;
  --warn:#f59e0b;
  --danger:#ef4444;
}

body {
  min-height:100vh;
  color:var(--text);
  background:var(--bg);
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a {
  color:inherit
}

button, input {
  font:inherit
}

[hidden] {
  display:none!important
}

.bg-layer {
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none
}

.blob {
  position:absolute;
  border-radius:999px;
  opacity:.5
}

.blob:nth-child(1) {
  width:720px;
  height:720px;
  top:-220px;
  left:-180px;
  background:radial-gradient(circle, #a78bfa 0%, rgba(167, 139, 250, .55) 18%, rgba(125, 211, 252, .2) 45%, transparent 70%)
}

.blob:nth-child(2) {
  width:660px;
  height:660px;
  right:-220px;
  top:160px;
  background:radial-gradient(circle, #5eead4 0%, rgba(94, 234, 212, .46) 20%, rgba(147, 197, 253, .22) 45%, transparent 70%)
}

.blob:nth-child(3) {
  width:580px;
  height:580px;
  left:28%;
  bottom:-240px;
  background:radial-gradient(circle, #f9a8d4 0%, rgba(249, 168, 212, .44) 20%, rgba(253, 230, 138, .22) 45%, transparent 70%)
}

/* Access screen */
.access-screen {
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.access-card {
  width:min(460px, 100%);
  padding:48px 42px;
  border-radius:32px;
  text-align:center;
  background:var(--glass);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);
  box-shadow:0 24px 80px rgba(0, 0, 0, .1);
}

.access-badge {
  display:inline-block;
  padding:6px 14px;
  margin-bottom:22px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  color:var(--muted);
  background:rgba(255, 255, 255, .42);
  border:1px solid var(--border);
}

.access-card h1 {
  font-size:32px;
  font-weight:650;
  letter-spacing:-.8px;
  margin-bottom:12px
}

.access-hint {
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
  margin-bottom:30px
}

.access-form {
  display:flex;
  flex-direction:column;
  gap:14px
}

.access-input {
  width:100%;
  height:54px;
  padding:0 18px;
  border-radius:16px;
  border:1px solid rgba(0, 0, 0, .1);
  outline:none;
  background:rgba(255, 255, 255, .52);
  color:var(--text);
  font-size:15px;
  transition:border-color .2s ease, background .2s ease;
}

.access-input:focus {
  border-color:rgba(0, 0, 0, .3);
  background:rgba(255, 255, 255, .72)
}

.access-submit {
  height:52px;
  border:0;
  border-radius:16px;
  background:var(--dark);
  color:#fff;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:opacity .2s ease;
}

.access-submit:hover {
  opacity:.86
}

.access-error {
  min-height:20px;
  color:var(--danger);
  font-size:13px;
  font-weight:600
}

/* App shell */
.admin-app {
  position:relative;
  z-index:1
}

.header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:20px 32px;
  background:var(--glass);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-soft);
}

.header h1 {
  font-size:22px;
  font-weight:650;
  letter-spacing:-.4px
}

.header-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end
}

.header a, .header button {
  text-decoration:none;
  border:1px solid rgba(0, 0, 0, .08);
  border-radius:999px;
  padding:9px 18px;
  background:rgba(255, 255, 255, .48);
  cursor:pointer;
  color:var(--text);
  font-size:13px;
  font-weight:600;
  transition:background .2s ease, transform .2s ease;
}

.header a:hover, .header button:hover {
  background:rgba(255, 255, 255, .72);
  transform:translateY(-1px)
}

.container {
  width:min(1180px, calc(100% - 40px));
  margin:0 auto;
  padding:32px 0 56px;
  display:grid;
  grid-template-columns:200px minmax(0, 1fr);
  gap:22px;
}

.sidebar {
  position:sticky;
  top:24px;
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  border-radius:24px;
  background:rgba(255, 255, 255, .36);
  border:1px solid var(--border);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow-soft), inset 0 .5px 0 rgba(255, 255, 255, .78);
}

.side-label {
  padding:8px 12px 6px;
  color:var(--muted-2);
  font-size:11px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.side-btn {
  width:100%;
  border:0;
  border-radius:16px;
  padding:12px 14px;
  text-align:left;
  cursor:pointer;
  background:transparent;
  color:var(--muted);
  font-size:14px;
  font-weight:650;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}

.side-btn:hover {
  background:rgba(255, 255, 255, .5);
  color:var(--text);
  transform:translateY(-1px)
}

.side-btn.active {
  background:var(--dark);
  color:#fff;
  box-shadow:0 12px 28px rgba(29, 29, 31, .14);
}

.main-content {
  min-width:0
}

.admin-section[hidden] {
  display:none!important
}

/* Data panels */
.dashboard-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  margin-bottom:18px;
}

.metric-card, .panel {
  border:1px solid var(--border);
  background:var(--glass);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow), inset 0 .5px 0 rgba(255, 255, 255, .78);
}

.metric-card {
  border-radius:24px;
  padding:20px
}

.metric-card span {
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase
}

.metric-card strong {
  display:block;
  margin-top:8px;
  font-size:32px;
  letter-spacing:-1px
}

.metric-card small {
  display:block;
  margin-top:8px;
  color:var(--muted-2);
  font-size:12px;
  line-height:1.5
}

.panel-grid {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:14px;
  margin-bottom:14px
}

.panel {
  border-radius:28px;
  padding:20px
}

.panel-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px
}

.panel-title {
  font-size:17px;
  font-weight:650;
  letter-spacing:-.3px
}

.panel-note {
  color:var(--muted);
  font-size:12px
}

.bar-list {
  display:grid;
  gap:10px
}

.bar-item {
  display:grid;
  grid-template-columns:130px 1fr 42px;
  gap:10px;
  align-items:center;
  color:var(--muted);
  font-size:13px
}

.bar-name {
  color:var(--text);
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.bar-track {
  height:10px;
  border-radius:999px;
  background:rgba(29, 29, 31, .06);
  overflow:hidden
}

.bar-fill {
  height:100%;
  border-radius:999px;
  background:linear-gradient(135deg, #7c3aed, #06b6d4)
}

.table-wrap {
  max-width:100%;
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(29, 29, 31, .06)
}

table {
  width:100%;
  border-collapse:collapse;
  background:rgba(255, 255, 255, .35)
}

.wide-table {
  min-width:760px
}

th, td {
  padding:13px 14px;
  text-align:left;
  border-bottom:1px solid rgba(29, 29, 31, .06);
  font-size:13px
}

th {
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.7px;
  background:rgba(255, 255, 255, .42)
}

td {
  color:var(--text)
}

tbody tr:last-child td {
  border-bottom:0
}

.pill {
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(29, 29, 31, .06);
  color:var(--muted);
  font-size:11px;
  font-weight:700
}

.pill.ok {
  background:rgba(16, 185, 129, .1);
  color:#059669
}

.pill.warn {
  background:rgba(245, 158, 11, .12);
  color:#b45309
}

.single-panel {
  margin-bottom:14px
}

.panel-tools {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end
}

.category-panel {
  margin-bottom:14px
}

.category-tools {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end
}

.category-input {
  width:180px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(29, 29, 31, .08);
  outline:none;
  background:rgba(255, 255, 255, .52);
  padding:0 12px;
  color:var(--text);
}

.category-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px
}

.category-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 13px;
  border-radius:16px;
  background:rgba(255, 255, 255, .44);
  border:1px solid rgba(255, 255, 255, .62);
}

.category-card strong {
  font-size:14px
}

.category-card span {
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:12px
}

.pagination-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
  padding:12px 6px 0;
  color:var(--muted);
  font-size:13px;
}

.pagination-controls {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap
}

.page-size {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255, 255, 255, .42);
  border:1px solid rgba(29, 29, 31, .06);
}

.page-size select {
  border:0;
  outline:none;
  background:transparent;
  color:var(--text);
  font-weight:650;
}

.page-buttons {
  display:flex;
  align-items:center;
  gap:6px
}

.page-btn {
  min-width:34px;
  height:34px;
  border:1px solid rgba(29, 29, 31, .08);
  border-radius:11px;
  background:rgba(255, 255, 255, .46);
  color:var(--muted);
  cursor:pointer;
  font-weight:700;
}

.page-btn.active {
  background:var(--dark);
  color:#fff;
  border-color:var(--dark)
}

.action-btn, .primary-btn, .ghost-btn, .danger-btn {
  border:0;
  border-radius:12px;
  cursor:pointer;
  font-weight:650;
  transition:background .2s ease, opacity .2s ease, transform .2s ease;
}

.primary-btn {
  padding:9px 15px;
  color:#fff;
  background:var(--dark)
}

.ghost-btn {
  padding:9px 15px;
  color:var(--text);
  background:rgba(255, 255, 255, .5);
  border:1px solid rgba(29, 29, 31, .08)
}

.action-cell {
  display:flex;
  gap:8px;
  white-space:nowrap
}

.action-btn {
  padding:7px 10px;
  color:var(--text);
  background:rgba(255, 255, 255, .54);
  border:1px solid rgba(29, 29, 31, .08);
  font-size:12px
}

.danger-btn {
  padding:7px 10px;
  color:#ef4444;
  background:rgba(239, 68, 68, .08);
  font-size:12px
}

.primary-btn:hover, .ghost-btn:hover, .action-btn:hover, .danger-btn:hover {
  transform:translateY(-1px);
  opacity:.9
}

button:disabled {
  cursor:not-allowed;
  opacity:.45;
  transform:none!important
}

.danger-confirm-btn {
  padding:9px 15px;
  border:1px solid rgba(239, 68, 68, .16);
  border-radius:12px;
  color:#fff;
  background:linear-gradient(135deg, #ef4444, #f97316);
  box-shadow:0 12px 28px rgba(239, 68, 68, .18);
  cursor:pointer;
  font-weight:650;
  transition:opacity .2s ease, transform .2s ease;
}

.danger-confirm-btn:hover {
  transform:translateY(-1px);
  opacity:.92
}

.ip-list {
  display:grid;
  gap:10px
}

.ip-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 13px;
  border-radius:16px;
  background:rgba(255, 255, 255, .44);
  border:1px solid rgba(255, 255, 255, .62)
}

.ip-item strong {
  font-size:13px
}

.ip-item span {
  color:var(--muted);
  font-size:12px
}

.ip-summary-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-bottom:14px
}

.ip-summary-card {
  padding:14px;
  border-radius:18px;
  background:rgba(255, 255, 255, .44);
  border:1px solid rgba(255, 255, 255, .62);
}

.ip-summary-card span {
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:700
}

.ip-summary-card strong {
  display:block;
  margin-top:6px;
  font-size:22px;
  letter-spacing:-.5px
}

.ip-detail-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px
}

.ip-detail-head strong {
  font-size:16px
}

.ip-detail-head span {
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:12px
}

.ip-management-section {
  display:grid;
  gap:14px
}

.ip-click-row {
  cursor:pointer
}

.ip-click-row:hover td {
  background:rgba(29, 29, 31, .025)
}

.ip-row-active td {
  background:rgba(29, 29, 31, .035)
}

/* Modals */
.modal-overlay {
  position:fixed;
  inset:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0, 0, 0, .24);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.modal {
  width:min(560px, 100%);
  padding:28px;
  border-radius:24px;
  background:rgba(255, 255, 255, .86);
  border:1px solid rgba(255, 255, 255, .68);
  box-shadow:0 24px 80px rgba(0, 0, 0, .16);
  backdrop-filter:blur(40px);
  -webkit-backdrop-filter:blur(40px);
}

.wide-modal {
  width:min(760px, 100%)
}

.modal h3 {
  font-size:20px;
  font-weight:700;
  letter-spacing:-.4px;
  margin-bottom:18px
}

.modal-hint {
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
  margin:-8px 0 18px
}

.download-modal-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px
}

.download-modal-head h3 {
  margin-bottom:6px
}

.download-flow {
  overflow:hidden
}

.download-flow-track {
  display:grid;
  grid-template-columns:100% 100%;
  transition:transform .32s cubic-bezier(.22, 1, .36, 1);
}

.download-flow-track.is-editing {
  transform:translateX(-100%)
}

.download-flow-panel {
  min-width:0;
  padding-right:1px
}

.download-list-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px
}

.download-list-head .modal-hint {
  margin:0
}

.editor-head {
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:18px
}

.back-btn {
  width:38px;
  height:38px;
  border:1px solid rgba(29, 29, 31, .08);
  border-radius:14px;
  background:rgba(255, 255, 255, .54);
  color:var(--text);
  cursor:pointer;
  font-size:20px;
  line-height:1;
  font-weight:700;
}

.editor-title {
  font-size:18px;
  font-weight:750;
  letter-spacing:-.3px
}

.editor-subtitle {
  margin-top:4px;
  color:var(--muted);
  font-size:12px
}

.upload-inline-row {
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:10px;
  align-items:center
}

.upload-inline-btn {
  width:72px;
  height:40px;
  border:1px dashed rgba(29, 29, 31, .18);
  border-radius:13px;
  background:rgba(255, 255, 255, .52);
  color:var(--text);
  cursor:pointer;
  font-weight:700;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}

.upload-inline-btn:hover {
  background:rgba(255, 255, 255, .76);
  border-color:rgba(29, 29, 31, .32);
  transform:translateY(-1px)
}

.file-preview {
  min-width:0;
  height:40px;
  display:flex;
  align-items:center;
  padding:0 11px;
  border-radius:12px;
  background:rgba(29, 29, 31, .05);
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.delete-modal {
  width:min(430px, 100%);
  text-align:left
}

.delete-icon {
  width:46px;
  height:46px;
  border-radius:16px;
  margin-bottom:16px;
  display:grid;
  place-items:center;
  color:#ef4444;
  font-size:22px;
  font-weight:800;
  background:rgba(239, 68, 68, .1);
  border:1px solid rgba(239, 68, 68, .12);
}

.delete-target {
  margin-top:12px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(29, 29, 31, .05);
  border:1px solid rgba(29, 29, 31, .06);
  color:var(--text);
  font-size:14px;
  font-weight:700;
}

.upload-zone {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:220px;
  margin-bottom:16px;
  border:1.5px dashed rgba(29, 29, 31, .18);
  border-radius:22px;
  background:rgba(255, 255, 255, .42);
  cursor:pointer;
  text-align:center;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}

.upload-zone:hover, .upload-zone.dragover {
  border-color:rgba(29, 29, 31, .38);
  background:rgba(255, 255, 255, .66);
  transform:translateY(-1px);
}

.upload-icon {
  font-size:34px;
  font-weight:800;
  letter-spacing:-1px;
  color:var(--text)
}

.upload-title {
  font-size:16px;
  font-weight:700
}

.upload-desc {
  color:var(--muted);
  font-size:13px;
  line-height:1.6
}

.upload-file {
  padding:10px 12px;
  border-radius:14px;
  background:rgba(29, 29, 31, .06);
  color:var(--text);
  font-size:13px;
  font-weight:650
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}

.form-group {
  display:grid;
  gap:7px;
  margin-bottom:14px
}

.form-group.full {
  grid-column:1/-1
}

.form-group label {
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase
}

.form-group input, .form-group select {
  width:100%;
  height:44px;
  border-radius:13px;
  border:1px solid rgba(29, 29, 31, .1);
  outline:none;
  background:rgba(255, 255, 255, .56);
  padding:0 13px;
  color:var(--text);
}

.form-group select {
  appearance:none;
  -webkit-appearance:none;
  padding-right:44px;
  background-color:rgba(255, 255, 255, .56);
  background-image:linear-gradient(45deg, transparent 50%, rgba(29, 29, 31, .56) 50%), linear-gradient(135deg, rgba(29, 29, 31, .56) 50%, transparent 50%);
  background-position:calc(100% - 24px) 19px, calc(100% - 18px) 19px;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

.field-error {
  margin-top:-2px;
  color:var(--danger);
  font-size:12px;
  font-weight:650;
  line-height:1.5
}

.multi-select {
  position:relative
}

.multi-select-trigger {
  width:100%;
  height:44px;
  border-radius:13px;
  border:1px solid rgba(29, 29, 31, .1);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 14px;
  background:rgba(255, 255, 255, .56);
  color:var(--text);
  cursor:pointer;
}

.multi-select-trigger span:first-child {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.multi-select-arrow {
  width:8px;
  height:8px;
  margin-right:5px;
  border-right:1.5px solid rgba(29, 29, 31, .56);
  border-bottom:1.5px solid rgba(29, 29, 31, .56);
  transform:rotate(45deg) translateY(-2px);
  flex:0 0 auto;
}

.multi-select-menu {
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 8px);
  z-index:30;
  display:grid;
  gap:6px;
  padding:10px;
  border-radius:16px;
  background:rgba(255, 255, 255, .92);
  border:1px solid rgba(255, 255, 255, .72);
  box-shadow:0 18px 50px rgba(24, 24, 27, .14);
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
}

.platform-option {
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:12px;
  color:var(--text);
  font-size:13px;
  font-weight:650;
  cursor:pointer;
}

.platform-option:hover {
  background:rgba(29, 29, 31, .05)
}

.platform-option input {
  width:16px;
  height:16px;
  accent-color:var(--dark)
}

.form-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:10px
}

/* Responsive rules */
@media(max-width:900px) {
  .container {
    grid-template-columns:1fr
  }

  .sidebar {
    position:static;
    flex-direction:row;
    overflow:auto
  }

  .side-label {
    display:none
  }

  .side-btn {
    white-space:nowrap;
    text-align:center
  }

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

  .panel-grid {
    grid-template-columns:1fr
  }

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

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

}

@media(max-width:640px) {
  .header {
    align-items:flex-start;
    flex-direction:column;
    padding:18px 20px
  }

  .container {
    width:min(100% - 28px, 1180px);
    padding-top:22px;
    gap:14px
  }

  .dashboard-grid {
    grid-template-columns:1fr
  }

  .category-grid {
    grid-template-columns:1fr
  }

  .ip-summary-grid {
    grid-template-columns:1fr
  }

  .form-grid {
    grid-template-columns:1fr
  }

  .access-card {
    padding:38px 24px;
    border-radius:24px
  }

}