:root {
  --g: #126b78;
  --c: #ff684f;
  --i: #17324d;
  --m: #667985;
  --l: #dbe7e7;
  --admin-navy: #17324d;
  --admin-teal: #126b78;
  --admin-coral: #ff684f;
  --admin-pink: #ffe8ef;
  --admin-blue: #dff4ff;
  --admin-yellow: #fff0bd;
}

body {
  background:
    radial-gradient(circle at 88% 8%, rgba(223, 244, 255, .9), transparent 30%),
    linear-gradient(135deg, #fffaf0 0%, #fff4f7 50%, #f2fbff 100%);
}

.dashboard.open {
  background: transparent;
}

.dashboard aside {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #17324d 0%, #126b78 100%);
  box-shadow: 12px 0 34px rgba(23, 50, 77, .12);
}

.dashboard aside::before,
.dashboard aside::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  opacity: .2;
}

.dashboard aside::before {
  width: 180px;
  height: 180px;
  top: -85px;
  right: -75px;
  background: var(--admin-pink);
}

.dashboard aside::after {
  width: 145px;
  height: 145px;
  bottom: -70px;
  left: -70px;
  background: var(--admin-yellow);
}

.dashboard aside > * {
  position: relative;
  z-index: 1;
}

.dashboard aside .logo {
  color: #fff;
}

.dashboard aside .logo b {
  background: var(--admin-coral);
  box-shadow: 0 8px 20px rgba(255, 104, 79, .28);
}

.sidebar-profile {
  border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(110deg, rgba(255, 232, 239, .16), rgba(223, 244, 255, .12));
  box-shadow: 0 10px 28px rgba(7, 33, 48, .13);
}

.sidebar-profile img,
.sidebar-profile b {
  background: var(--admin-coral);
}

.dashboard aside nav button {
  color: rgba(255, 255, 255, .76);
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}

.dashboard aside nav button:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .12);
  background: rgba(223, 244, 255, .1);
  transform: translateX(2px);
}

.dashboard aside nav button.active {
  color: var(--admin-navy);
  border-color: rgba(255, 255, 255, .5);
  background: linear-gradient(100deg, rgba(255, 240, 189, .96), rgba(255, 232, 239, .94));
  box-shadow: 0 10px 24px rgba(7, 33, 48, .16);
}

.sidebar-actions {
  border-top-color: rgba(255, 255, 255, .18);
}

.sidebar-actions a {
  border-color: rgba(255, 240, 189, .35);
  background: rgba(255, 240, 189, .13);
  color: #fff0bd;
}

.sidebar-actions a:hover {
  background: rgba(255, 240, 189, .21);
}

.sidebar-actions #logout {
  border-color: rgba(255, 232, 239, .14);
  background: rgba(255, 232, 239, .08);
  color: #f9e9ed;
}

.sidebar-actions #logout:hover {
  border-color: rgba(255, 104, 79, .45);
  background: rgba(255, 104, 79, .16);
  color: #fff;
}

.content {
  background:
    radial-gradient(circle at 96% 0%, rgba(223, 244, 255, .7), transparent 29%),
    linear-gradient(145deg, rgba(255, 250, 240, .9), rgba(255, 244, 247, .72) 52%, rgba(242, 251, 255, .92));
}

.content > h1 {
  color: var(--admin-navy);
}

.tip {
  border: 1px solid #c8e9e6;
  background: linear-gradient(90deg, #e4f7f3, #eaf7ff);
  color: var(--admin-teal);
}

.editor,
.panel,
.profile-panel,
.booking,
.booking-empty {
  border: 1px solid rgba(18, 107, 120, .12);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 14px 36px rgba(23, 50, 77, .07);
}

input,
textarea {
  border-color: #d6e4e5;
  background: rgba(255, 255, 255, .9);
  color: var(--admin-navy);
}

input:focus,
textarea:focus {
  outline: 3px solid rgba(18, 107, 120, .13);
  border-color: var(--admin-teal);
}

.primary,
.catalog-actions button,
.login button:not(.password-toggle) {
  background: var(--admin-coral);
  color: #fff;
  box-shadow: 0 10px 24px rgba(255, 104, 79, .2);
}

.primary:hover,
.catalog-actions button:hover,
.login button:not(.password-toggle):hover {
  background: #f75d45;
  filter: none;
}

.add-photos,
.profile-upload {
  background: linear-gradient(90deg, #e2f7f2, #e7f6ff);
  color: var(--admin-teal);
}

.remove-product,
.delete {
  background: #fff0ed;
  color: #d94c34;
}

.reservation-badge {
  background: var(--admin-coral);
  box-shadow: 0 5px 14px rgba(255, 104, 79, .3);
}

.booking-view-switch button {
  border-color: #cfe0e2;
  background: rgba(255, 255, 255, .9);
  color: var(--admin-teal);
}

.booking-view-switch button span {
  background: var(--admin-blue);
}

.booking-view-switch button.active {
  border-color: var(--admin-teal);
  background: var(--admin-teal);
}

.password-box {
  border: 1px solid rgba(18, 107, 120, .1);
  background: linear-gradient(110deg, #fffaf1, #f1f9fc);
}

.login {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 240, 189, .95), transparent 32%),
    radial-gradient(circle at 82% 20%, rgba(223, 244, 255, .95), transparent 31%),
    linear-gradient(135deg, #fff7e8, #ffeef3 55%, #edf9ff);
}

.login form {
  border: 1px solid rgba(18, 107, 120, .12);
  box-shadow: 0 26px 70px rgba(23, 50, 77, .13);
}

.login .logo {
  color: var(--admin-teal);
}

.login span {
  color: var(--admin-coral);
}

.login .remember-session input:checked {
  border-color: var(--admin-teal);
  background-color: var(--admin-teal);
}

.login .remember-session input:focus-visible {
  outline-color: rgba(18, 107, 120, .2);
}

.visibility-control {
  display: grid;
  gap: 5px;
  margin-top: 10px;
}

.toggle-visibility {
  width: fit-content;
  border: 1px solid #f1b47f;
  border-radius: 10px;
  background: #fff2e8;
  color: #b94a2b;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 8px 12px;
}

.toggle-visibility.is-hidden {
  border-color: #83cfc3;
  background: #e4f7f3;
  color: #087b70;
}

.visibility-control small {
  color: #6a7b83;
  font-size: 12px;
  line-height: 1.3;
}

.editor.is-hidden-from-site {
  border-color: #f1c290;
  box-shadow: inset 4px 0 0 #f2a95e;
}

@media (max-width: 750px) {
  .dashboard aside {
    box-shadow: 0 12px 30px rgba(23, 50, 77, .12);
  }
}