:root{
  --wl-bg:           oklch(0.11 0.016 20);
  --wl-bg-2:         oklch(0.15 0.020 20);
  --wl-surface:      oklch(0.19 0.024 20);
  --wl-surface-2:    oklch(0.24 0.028 20);
  --wl-line:         oklch(0.28 0.022 20 / 0.55);

  --wl-text:         oklch(0.94 0.008 30);
  --wl-text-soft:    oklch(0.78 0.012 30);
  --wl-text-mute:    oklch(0.68 0.010 30);

  --wl-primary:        #6b1e28;
  --wl-primary-hover:  #7d2631;
  --wl-primary-deep:   #3f1018;
  --wl-primary-text:   #b08a4f;
  --wl-primary-line:   rgb(107 30 40 / 0.62);
  --wl-primary-soft:   rgb(107 30 40 / 0.18);

  --wl-cream:        #f1e6d2;
  --wl-cream-2:      #ece1ca;
  --wl-cream-3:      #e3d4b5;
  --wl-cream-line:   #d8c9aa;
  --wl-cream-line-2: #c7b58e;
  --wl-cream-ink:    #2a201a;
  --wl-cream-ink-2:  #5a4636;

  --wl-gold:         #d2a55a;
  --wl-gold-deep:    #b08a4f;
  --wl-gold-soft:    rgb(210 165 90 / 0.18);

  --wl-ok:           #4f7a4a;
  --wl-warn:         #b6892b;
  --wl-danger:       #8b2a2a;

  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem;
  --sp-4: 1rem;    --sp-5: 1.25rem;--sp-6: 1.5rem;
  --sp-8: 2rem;    --sp-10:2.5rem; --sp-12:3rem;

  --radius:    3px;
  --radius-lg: 6px;

  --sidebar-w: 248px;
  --topbar-h:  64px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
input,select,textarea{font:inherit;color:inherit}

.ico{ width:16px; height:16px; flex:0 0 auto; }

body{
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.55;
  color:var(--wl-cream-ink);
  background:var(--wl-cream);
  background-image:
    radial-gradient(ellipse at 0% 0%, rgb(255 255 255 / .45) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgb(107 30 40 / .06) 0%, transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "side topbar"
    "side main";
  min-height:100vh;
}

body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:9998;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
}

.adm-side{
  grid-area:side;
  background:var(--wl-bg);
  background-image:
    radial-gradient(ellipse at 50% 0%, oklch(0.22 0.040 20 / .55) 0%, transparent 60%);
  color:var(--wl-text);
  border-right:1px solid #000;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;

  .brand{
    display:flex;
    align-items:center;
    gap:.6rem;
    padding:1rem 1.1rem 1.1rem;
    border-bottom:1px solid var(--wl-line);

    img{
      width:34px; height:auto;
      filter: drop-shadow(0 1px 0 rgb(0 0 0 / .4));
    }

    .text{
      display:flex; flex-direction:column; line-height:1.1;

      strong{
        font-family:var(--font-serif);
        font-size:1.2rem;
        letter-spacing:.02em;
        color:var(--wl-text);
      }
      span{
        font-family:var(--font-mono);
        font-size:.66rem;
        letter-spacing:.22em;
        text-transform:uppercase;
        color:var(--wl-primary-text);
        margin-top:2px;
      }
    }
  }

  .group{
    padding:1.1rem 0 .25rem;

    .label{
      font-family:var(--font-mono);
      font-size:.62rem;
      letter-spacing:.22em;
      text-transform:uppercase;
      color:var(--wl-text-mute);
      padding: 0 1.2rem .5rem;
    }
  }

  .nav{
    display:flex;
    flex-direction:column;

    a{
      display:flex;
      align-items:center;
      gap:.7rem;
      padding:.55rem 1.1rem;
      color:var(--wl-text-soft);
      font-size:.95rem;
      border-left:2px solid transparent;
      position:relative;

      &:hover{
        color:var(--wl-text);
        background:rgb(255 255 255 / .03);
      }
      &.is-active{
        color:var(--wl-text);
        background: linear-gradient(90deg, rgb(107 30 40 / .35), transparent);
        border-left-color:var(--wl-primary-text);
      }
      .ico{
        width:18px; height:18px; opacity:.85;
        flex:0 0 auto;
      }
      &.is-active .ico{ opacity:1; color:var(--wl-primary-text); }
      .count{
        margin-left:auto;
        font-family:var(--font-mono);
        font-size:.7rem;
        color:var(--wl-text-mute);
        background:rgb(255 255 255 / .04);
        border:1px solid var(--wl-line);
        padding:1px 6px;
        border-radius:99px;
      }
    }
  }

  .foot{
    margin-top:auto;
    padding:1rem 1.1rem 1.25rem;
    border-top:1px solid var(--wl-line);
    display:flex; flex-direction:column; gap:.55rem;

    a,
    button{
      display:flex; align-items:center; justify-content:space-between;
      font-size:.85rem;
      color:var(--wl-text-soft);
      padding:.45rem .65rem;
      border:1px solid var(--wl-line);
      border-radius:var(--radius);
      background:rgb(255 255 255 / .02);
      text-align:left;
      width:100%;
      cursor:pointer;

      &:hover{ color:var(--wl-text); border-color:var(--wl-primary-text); }
      .arr{ color:var(--wl-text-mute); font-family:var(--font-mono); }
    }
    form{ width:100%; }
  }
}

.adm-top{
  grid-area:topbar;
  background:var(--wl-bg-2);
  color:var(--wl-text);
  border-bottom:1px solid #000;
  display:flex;
  align-items:center;
  padding: 0 1.4rem;
  gap:1rem;
  position:sticky; top:0; z-index:50;

  .adm-toggle{
    display:none;
    width:40px; height:40px;
    align-items:center; justify-content:center;
    border:1px solid var(--wl-line);
    border-radius:var(--radius);
    color:var(--wl-text);
    background:transparent;
    transition:background .15s ease, border-color .15s ease;

    &:hover{ background:var(--wl-surface); border-color:var(--wl-primary-line); }

    svg{ width:20px; height:20px; }

    .ico.x{ display:none; }
  }

  .crumbs{
    display:flex;
    align-items:center;
    gap:.55rem;
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--wl-text-mute);

    a{ color:var(--wl-text-mute); }
    a:hover{ color:var(--wl-primary-text); }
    .sep{ color:var(--wl-line); }
    .now{ color:var(--wl-text); }
  }

  .spacer{ flex:1; }

  .user{
    display:flex; align-items:center; gap:.6rem;
    padding-left:1rem;
    border-left:1px solid var(--wl-line);

    .av{
      width:32px; height:32px;
      border-radius:99px;
      background:linear-gradient(135deg, var(--wl-primary), var(--wl-primary-deep));
      border:1px solid var(--wl-primary-text);
      display:grid; place-items:center;
      font-family:var(--font-serif);
      font-size:.95rem;
      color:var(--wl-cream);
    }

    .info{
      display:flex; flex-direction:column; line-height:1.1;

      strong{ font-size:.88rem; }
      span{
        font-family:var(--font-mono);
        font-size:.62rem;
        letter-spacing:.18em;
        text-transform:uppercase;
        color:var(--wl-primary-text);
        margin-top:2px;
      }
    }
  }
}

.adm-main{
  grid-area:main;
  padding: clamp(1.4rem, 2.4vw, 2.4rem) clamp(1.4rem, 3vw, 2.6rem) 4rem;
  min-width:0;

  .inner{
    max-width: 1180px;
    margin: 0 auto;
  }
}

.page-head{
  display:flex;
  align-items:flex-end;
  gap:1rem;
  flex-wrap:wrap;
  padding-bottom:1rem;
  margin-bottom:1.5rem;
  border-bottom:1px solid var(--wl-cream-line);

  .title{
    font-family:var(--font-serif);
    font-size: clamp(1.8rem, 2.8vw, 2.6rem);
    font-weight:500;
    color:var(--wl-cream-ink);
    letter-spacing:0;
    margin:0;
    line-height:1;
  }

  .sub{
    color:var(--wl-cream-ink-2);
    margin-top:.4rem;
    font-size:.95rem;
  }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:.7rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--wl-primary);
    margin-bottom:.35rem;
    display:inline-flex; align-items:center; gap:.55rem;

    &::before{
      content:""; width:24px; height:1px; background:var(--wl-primary);
    }
  }

  .actions{ margin-left:auto; display:flex; gap:.55rem; flex-wrap:wrap; }
}

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-sans);
  font-size:.88rem;
  font-weight:500;
  padding:.55rem 1rem;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
  white-space:nowrap;

  .ico{ width:15px; height:15px; }

  &.primary{
    background:var(--wl-primary);
    color:var(--wl-cream);
    border-color:var(--wl-primary-deep);

    &:hover{ background:var(--wl-primary-hover); }
  }

  &.ghost{
    background:transparent;
    color:var(--wl-cream-ink);
    border-color:var(--wl-cream-line);

    &:hover{ border-color:var(--wl-primary); color:var(--wl-primary); }
  }

  &.danger{
    background:transparent;
    color:var(--wl-danger);
    border-color: rgb(139 42 42 / .35);

    &:hover{ background: rgb(139 42 42 / .08); border-color:var(--wl-danger); }
  }

  &.sm{ padding:.32rem .6rem; font-size:.78rem; }
}

.panel{
  background:#fbf6ea;
  border:1px solid var(--wl-cream-line);
  border-radius:var(--radius-lg);
  box-shadow: 0 1px 0 rgb(0 0 0 / .03), 0 8px 24px rgb(42 32 26 / .06);

  .head{
    padding: .9rem 1.2rem;
    border-bottom:1px solid var(--wl-cream-line);
    display:flex; align-items:center; gap:.75rem;

    h2{
      font-family:var(--font-serif);
      font-size:1.25rem; font-weight:500;
      margin:0;
    }
    .sub{
      font-family:var(--font-mono);
      font-size:.7rem;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:var(--wl-cream-ink-2);
    }
    .actions{ margin-left:auto; display:flex; gap:.5rem; }
  }

  .body{
    padding: 1.1rem 1.2rem;

    &.flush{ padding:0; }
  }
}

.kpi-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:1rem;
  margin-bottom:1.5rem;
}
@media (max-width:880px){ .kpi-grid{ grid-template-columns: repeat(2,1fr); } }

.kpi{
  background:#fbf6ea;
  border:1px solid var(--wl-cream-line);
  border-radius:var(--radius-lg);
  padding: .95rem 1.05rem 1rem;
  position:relative;
  overflow:hidden;

  .label{
    font-family:var(--font-mono);
    font-size:.66rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--wl-cream-ink-2);
  }

  .value{
    font-family:var(--font-serif);
    font-size:2.4rem;
    line-height:1;
    margin-top:.4rem;
    color:var(--wl-cream-ink);
    font-weight:500;
    letter-spacing:0;
  }

  .note{
    font-size:.82rem;
    color:var(--wl-cream-ink-2);
    margin-top:.4rem;
  }

  .bar{
    position:absolute; left:0; top:0; bottom:0;
    width:3px; background:var(--wl-primary);
  }
}

.dash-grid{
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap:1.25rem;
}
@media (max-width: 980px){ .dash-grid{ grid-template-columns: 1fr; } }

.list{
  list-style:none; margin:0; padding:0;

  .row{
    display:grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 1rem;
    align-items:center;
    padding: .85rem 1.2rem;
    border-bottom:1px solid var(--wl-cream-line);

    &:last-child{ border-bottom:0; }
    &:hover{ background: #f5ead4; }

    .title{
      font-family:var(--font-serif);
      font-size:1.15rem;
      font-weight:500;
      color:var(--wl-cream-ink);
      text-wrap:balance;

      small{
        display:block;
        font-family:var(--font-sans);
        font-size:.82rem;
        color:var(--wl-cream-ink-2);
        font-weight:400;
        margin-top:.15rem;
      }
    }

    .meta{
      font-family:var(--font-mono);
      font-size:.72rem;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:var(--wl-cream-ink-2);
      white-space:nowrap;
    }

    .actions{ display:flex; gap:.4rem; }
  }
}

.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding: .22rem .5rem;
  border-radius:99px;
  border:1px solid var(--wl-cream-line-2);
  color:var(--wl-cream-ink-2);
  background:#f5ead4;
  white-space:nowrap;

  &.pub{
    color: #2f5b2b; border-color:#9bbd95; background:#e8f1e1;

    &::before{ content:""; width:6px;height:6px;border-radius:99px;background:#4f7a4a; }
  }

  &.draft{
    color: var(--wl-cream-ink-2);

    &::before{ content:""; width:6px;height:6px;border-radius:99px;background:var(--wl-cream-line-2); }
  }

  &.important{
    color: var(--wl-primary); border-color: var(--wl-primary-line); background: rgb(107 30 40 / .06);

    &::before{ content:""; width:6px;height:6px;border-radius:99px;background:var(--wl-primary); }
  }

  &.tasting{ color: var(--wl-gold-deep); border-color: rgb(176 138 79 / .45); background: rgb(210 165 90 / .12); }
  &.note{ color:#2a5468; border-color:#9bbed0; background:#e5f0f5; }
}

.form{ display:flex; flex-direction:column; gap:1rem; }

.form-row{
  display:flex; flex-direction:column; gap:.35rem;

  &.grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:1rem;
  }

  label{
    font-family:var(--font-mono);
    font-size:.7rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--wl-cream-ink-2);
  }
  .hint{
    font-size:.8rem; color:var(--wl-cream-ink-2);
  }
}

.input, .select, .textarea{
  background:#fff;
  border:1px solid var(--wl-cream-line-2);
  border-radius:var(--radius);
  padding:.55rem .7rem;
  color:var(--wl-cream-ink);
  font-size:.95rem;
  font-family:var(--font-sans);
  outline:none;
  transition: border-color .15s, box-shadow .15s;

  &:focus{
    border-color:var(--wl-primary);
    box-shadow: 0 0 0 3px rgb(107 30 40 / .12);
  }
}
.textarea{ min-height: 120px; resize: vertical; }

.input{
  &.title{
    font-family:var(--font-serif);
    font-size:1.8rem;
    padding:.4rem .55rem;
    border:1px dashed var(--wl-cream-line-2);
    background:transparent;
    letter-spacing:0;
    width:100%;

    &:focus{ background:#fff; border-style:solid; }
  }

  &.error{
    border-color: var(--wl-danger);
    box-shadow: 0 0 0 3px rgb(139 42 42 / .10);
  }
}

.editor{
  border:1px solid var(--wl-cream-line-2);
  border-radius:var(--radius);
  background:#fff;
  overflow:hidden;

  .toolbar{
    display:flex; flex-wrap:wrap;
    align-items:center;
    gap:.15rem;
    padding:.3rem .45rem;
    background:#f3e9d2;
    border-bottom:1px solid var(--wl-cream-line);

    .group{
      display:flex; gap:.1rem;
      padding: 0 .35rem;
      border-right:1px solid var(--wl-cream-line);

      &:last-child{ border-right:0; }
    }

    .sel{
      background:#fff;
      border:1px solid var(--wl-cream-line);
      border-radius:var(--radius);
      padding:.15rem .4rem;
      font-size:.82rem;
      height:28px;
    }
  }

  .tool{
    width:28px; height:28px;
    display:grid; place-items:center;
    border-radius:var(--radius);
    color:var(--wl-cream-ink);
    font-family:var(--font-serif);
    font-size:.95rem;
    border:1px solid transparent;

    &:hover{ background:#fff; border-color:var(--wl-cream-line); }
    &.is-active{ background:#fff; border-color:var(--wl-primary-line); color:var(--wl-primary); }
    .ico{ width:14px; height:14px; }
  }

  .body{
    padding: 1.1rem 1.3rem;
    min-height:340px;
    font-family:var(--font-serif);
    font-size:1.1rem;
    line-height:1.65;
    color:var(--wl-cream-ink);

    p{ margin:0 0 .9rem; }
    h2{
      font-family:var(--font-serif);
      font-size:1.5rem; font-weight:500; margin:1.2rem 0 .5rem;
    }
    blockquote{
      border-left:3px solid var(--wl-primary);
      margin: 1rem 0;
      padding: .3rem 0 .3rem 1rem;
      color:var(--wl-cream-ink-2);
      font-style:italic;
    }
  }

  .foot{
    padding:.4rem .8rem;
    font-family:var(--font-mono);
    font-size:.7rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--wl-cream-ink-2);
    border-top:1px solid var(--wl-cream-line);
    background:#fbf6ea;
    display:flex; gap:1rem;

    .ok{ color:#4f7a4a; }
  }
}

.edit-grid{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:1.25rem;
  align-items:start;

  .side{
    display:flex; flex-direction:column; gap:1rem;
    position:sticky; top: calc(var(--topbar-h) + 1rem);
  }
}
@media (max-width: 1020px){
  .edit-grid{ grid-template-columns: 1fr; }
  .edit-grid .side{ position:static; }
}

.photo-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap:.75rem;
  padding: 1rem;
}
.photo-item{
  display:flex;
  flex-direction:column;
  gap:.35rem;

  .alt{
    font-size:.82rem;
    padding:.32rem .5rem;
    width:100%;
    transition: border-color .25s ease, box-shadow .25s ease;

    &.saved{
      border-color: var(--wl-ok);
      box-shadow: 0 0 0 2px rgb(79 122 74 / .18);
    }

    &.save-failed{
      border-color: var(--wl-danger);
      box-shadow: 0 0 0 2px rgb(139 42 42 / .18);
    }
  }
}
.photo{
  position:relative;
  aspect-ratio: 4/3;
  border-radius:var(--radius);
  overflow:hidden;
  background:#e9dcc1 center/cover no-repeat;
  border:1px solid var(--wl-cream-line-2);
  cursor:grab;
  transition: transform .15s, box-shadow .15s;

  &:hover{
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgb(42 32 26 / .18);
  }

  &.sortable-ghost{
    opacity:.4;
    border-style:dashed;
  }
  &.sortable-chosen{ cursor:grabbing; }
  &.sortable-drag{
    box-shadow: 0 18px 40px rgb(42 32 26 / .35);
    transform: rotate(-1.5deg);
  }

  .order{
    position:absolute;
    top:.45rem; left:.45rem;
    width:24px; height:24px;
    background: rgb(42 32 26 / .72);
    color: var(--wl-cream);
    border-radius:99px;
    font-family:var(--font-mono);
    font-size:.72rem;
    display:grid; place-items:center;
  }

  .handle{
    position:absolute;
    bottom:.45rem; right:.45rem;
    width:26px; height:26px;
    background: rgb(255 255 255 / .85);
    border-radius:var(--radius);
    display:grid; place-items:center;
    color:var(--wl-cream-ink);
    border:1px solid var(--wl-cream-line-2);
  }

  .del{
    position:absolute;
    top:.4rem; right:.4rem;
    width:26px; height:26px;
    background: rgb(255 255 255 / .9);
    color:var(--wl-danger);
    border-radius:99px;
    border:1px solid rgb(139 42 42 / .25);
    font-size:.85rem;
    display:none;
  }

  &:hover .del{ display:grid; place-items:center; }

  /* Touch devices have no hover — always show the delete button */
  @media (hover: none){
    .del{ display:grid; place-items:center; }
  }

  &.thumb{
    outline:2px solid var(--wl-primary);
    outline-offset:1px;
    box-shadow: 0 6px 18px rgb(107 30 40 / .25);

    &::after{
      content:"NÁHLED GALERIE";
      position:absolute;
      left:50%; bottom:.45rem;
      transform:translateX(-50%);
      background:var(--wl-primary);
      color:var(--wl-cream);
      font-family:var(--font-mono);
      font-size:.6rem;
      letter-spacing:.2em;
      padding:.2rem .55rem;
      border-radius:99px;
      white-space:nowrap;
    }
  }

  &.upload{
    display:grid;
    place-items:center;
    text-align:center;
    background: repeating-linear-gradient(45deg, #f1e6d2, #f1e6d2 10px, #ece1ca 10px, #ece1ca 20px);
    border: 1px dashed var(--wl-cream-line-2);
    color: var(--wl-cream-ink-2);
    cursor:pointer;
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    padding:.5rem;

    &:hover{ background:#f1e6d2; border-color:var(--wl-primary); color:var(--wl-primary); }
  }
}

.gallery-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:1rem;
}
.gallery-card{
  background:#fbf6ea;
  border:1px solid var(--wl-cream-line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition: border-color .15s, transform .15s;

  &:hover{ border-color: var(--wl-primary); transform: translateY(-2px); }

  .thumb{
    aspect-ratio: 16/10;
    background:#e9dcc1 center/cover no-repeat;
    border-bottom:1px solid var(--wl-cream-line);
    position:relative;

    .count{
      position:absolute;
      right:.55rem; bottom:.55rem;
      background:rgb(42 32 26 / .78);
      color:var(--wl-cream);
      font-family:var(--font-mono);
      font-size:.7rem;
      letter-spacing:.14em;
      padding:.2rem .5rem;
      border-radius:99px;
    }
  }

  .body{
    padding: .8rem 1rem 1rem; display:flex; flex-direction:column; gap:.25rem;

    .title{
      font-family:var(--font-serif);
      font-size:1.2rem;
      color:var(--wl-cream-ink);
      font-weight:500;
    }

    .meta{
      font-family:var(--font-mono);
      font-size:.7rem;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:var(--wl-cream-ink-2);
    }
  }
}

.list-tools{
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
  padding: .65rem .9rem;
  border-bottom:1px solid var(--wl-cream-line);
  background:#f7eed7;

  .input{ padding:.32rem .55rem; font-size:.85rem; }
  .chip{
    font-family:var(--font-mono);
    font-size:.7rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    padding:.32rem .65rem;
    border:1px solid var(--wl-cream-line-2);
    border-radius:99px;
    color:var(--wl-cream-ink-2);
    background:#fff;
    cursor:pointer;
  }
  .spacer{ flex:1; }
}
.chip.is-active{ background:var(--wl-primary); color:var(--wl-cream); border-color:var(--wl-primary-deep); }

.notice{
  display:flex; gap:.6rem; align-items:flex-start;
  padding:.7rem .9rem;
  border-radius:var(--radius);
  background:#fff8e2;
  border:1px solid var(--wl-cream-line-2);
  border-left:3px solid var(--wl-gold-deep);
  font-size:.9rem;
  color:var(--wl-cream-ink);

  .ico{ color:var(--wl-gold-deep); width:18px;height:18px; flex:0 0 auto; margin-top:2px; }

  &.ok{
    background:#eef5e8; border-color:#9bbd95; border-left-color:#4f7a4a;

    .ico{ color:#4f7a4a; }
  }
}

.adm-messages{
  margin-bottom: 1rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.adm-message{
  padding:.65rem .9rem;
  border-radius:var(--radius);
  font-size:.9rem;
  border:1px solid var(--wl-cream-line-2);
  background:#fff8e2;
  border-left:3px solid var(--wl-gold-deep);
  color:var(--wl-cream-ink);

  &.success{
    background:#eef5e8;
    border-color:#9bbd95;
    border-left-color:#4f7a4a;
    color:#2f5b2b;
  }

  &.error{
    background:rgb(139 42 42 / .06);
    border-color:rgb(139 42 42 / .35);
    border-left-color:var(--wl-danger);
    color:var(--wl-danger);
  }
}

body.login{
  display:grid;
  place-items:center;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background:var(--wl-bg);
  background-image:
    radial-gradient(ellipse at 50% 20%, oklch(0.22 0.040 20 / .55) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgb(107 30 40 / .35) 0%, transparent 60%);
  color: var(--wl-text);
  padding: 2rem;
  min-height:100vh;

  .card{
    width: 100%;
    max-width: 420px;
    background: #fbf6ea;
    color: var(--wl-cream-ink);
    border-radius: var(--radius-lg);
    border:1px solid var(--wl-cream-line);
    box-shadow: 0 24px 60px rgb(0 0 0 / .55);
    padding: 2rem 2rem 1.6rem;
  }

  .brand{
    display:flex; align-items:center; gap:.7rem; margin-bottom: 1.4rem;

    strong{ font-family:var(--font-serif); font-size:1.4rem; }
    span{
      font-family:var(--font-mono); font-size:.65rem; letter-spacing:.22em; text-transform:uppercase;
      color: var(--wl-primary);
    }
  }

  .title{
    font-family:var(--font-serif); font-size:1.5rem; margin: 0 0 .35rem;
  }

  .sub{ color:var(--wl-cream-ink-2); margin: 0 0 1.3rem; font-size:.92rem; }
}

.row{ display:flex; gap:.6rem; align-items:center; }
.muted{ color:var(--wl-cream-ink-2); }
.mono{ font-family:var(--font-mono); letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; }
hr.rule{ border:0; height:1px; background:var(--wl-cream-line); margin: 1.25rem 0; }

@media (max-width: 760px){
  body{
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-h) 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }

  .adm-top .adm-toggle{ display:inline-flex; }

  .adm-side{
    position:fixed;
    top:0; left:0; bottom:0;
    width: min(280px, 82vw);
    height:100vh;
    z-index:60;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 4px 0 30px rgb(0 0 0 / .35);
  }

  body.adm-nav-open .adm-side{
    transform: translateX(0);
  }

  body.adm-nav-open::before{
    content:"";
    position:fixed;
    inset:0;
    background: rgb(0 0 0 / .45);
    z-index:55;
  }

  body.adm-nav-open{
    overflow:hidden;
  }

  body.adm-nav-open .adm-toggle .ico.ham{ display:none; }
  body.adm-nav-open .adm-toggle .ico.x{ display:inline; }

  .adm-main .inner{ padding: 1rem; }
  .adm-top{ padding: 0 .9rem; }
}

@media (max-width: 600px){
  .kpi-grid{ grid-template-columns: 1fr; }

  .list .row{
    grid-template-columns: 1fr;
    gap: .4rem;
    padding: .9rem 1rem;

    .meta{ justify-self: start; }
    .actions{ justify-self: start; }
  }

  .page-head{
    flex-direction: column;
    align-items: flex-start;

    .actions{ width: 100%; }
  }

  .adm-top .user .info{ display: none; }
  .adm-top .crumbs{ font-size: .66rem; }
}

#dz-upload{
  margin: 1rem;
  min-height: 140px;
  border: 2px dashed var(--wl-cream-line-2);
  border-radius: var(--radius-lg);
  background: repeating-linear-gradient(45deg, transparent, transparent 12px, rgb(255 255 255 / .3) 12px, rgb(255 255 255 / .3) 24px);
  cursor: pointer;
  transition: border-color .2s, background .2s;

  &.dz-drag-hover{
    border-color: var(--wl-primary);
    background: rgb(107 30 40 / .04);
  }

  .dz-message{
    display: block;
    color: var(--wl-cream-ink-2);
    font-size: .9rem;
    margin: 2rem 1rem;
    text-align: center;

    .dz-button{
      background: none;
      border: none;
      color: var(--wl-cream-ink-2);
      font-family: var(--font-sans);
      font-size: .9rem;
      cursor: pointer;
      padding: 0;
      line-height: 1.6;
    }

    strong{
      display: block;
      color: var(--wl-cream-ink);
      margin-bottom: .35rem;
      font-size: 1rem;
      font-weight: 600;
    }
  }

  .dz-preview{
    .dz-image{
      border-radius: var(--radius);
      img{ object-fit: cover; }
    }

    .dz-progress{
      .dz-upload{ background: var(--wl-primary); }
    }

    .dz-success-mark svg{ display: none; }
    .dz-success-mark::after{
      content: "✓";
      color: var(--wl-ok);
      font-size: 1.8rem;
    }
  }
}


/* Respect users who prefer reduced motion (WCAG 2.3.3, vestibular safety) */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}