.admin { background: var(--cream); }
.muted { color: var(--ink-soft); margin: 4px 0 0; }
.form-error { color: var(--coral-dark); font-weight: 600; margin: 0; }

/* ---------- login ---------- */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 20% 10%, #ffd6c4, transparent 50%), radial-gradient(circle at 90% 90%, #fff0bf, transparent 45%), var(--cream); }
.login__card { width: min(400px, 100%); background: #fff; border-radius: 30px; padding: 40px 32px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 14px; text-align: center; }
.login__card h1 { font-size: 2rem; }
.login__card p { margin: 0; color: var(--ink-soft); }
.login__paw { width: 72px; height: 72px; font-size: 2.2rem; margin: 0 auto 6px; border-radius: 22px; }
.login__back { color: var(--ink-soft); font-size: .92rem; }

/* ---------- top bar ---------- */
.tabs { display: flex; gap: 4px; background: #fff; padding: 4px; border-radius: 999px; border: 1px solid var(--line); }
.tab { border: 0; background: none; padding: 8px 16px; border-radius: 999px; font-weight: 600; color: var(--ink-soft); }
.tab.is-active { background: var(--ink); color: #fff; }
.nav__actions { display: flex; gap: 8px; }
@media (max-width: 720px) {
  .admin .nav__inner { height: auto; padding: 10px 0; flex-wrap: wrap; }
  .admin .logo span:last-child { display: none; }
  .nav__actions .btn--ghost:first-child { display: none; }
}

.admin-main { padding: 32px 0 80px; }
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.admin-head h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); }

/* ---------- dog list ---------- */
.admin-list { display: grid; gap: 12px; }
.row { display: grid; grid-template-columns: 76px 1fr auto; gap: 16px; align-items: center; background: #fff; border-radius: 20px; padding: 12px; box-shadow: 0 4px 16px -10px rgba(110, 60, 20, .35); }
.row img { width: 76px; height: 76px; border-radius: 16px; object-fit: cover; }
.row__name { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row__meta { color: var(--ink-soft); font-size: .9rem; }
.row__warn { color: #b7791f; font-size: .85rem; }
.status { font-family: var(--font-body); font-size: .8rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--sun-soft); color: #8a5a00; }
.status--adopted { background: var(--mint-soft); color: var(--mint); }
.row__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.icon-btn { border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 7px 12px; font-weight: 500; font-size: .9rem; white-space: nowrap; transition: border-color .15s, background .15s; }
.icon-btn:hover { border-color: var(--coral); background: var(--cream); }
.icon-btn--danger:hover { border-color: #d33; color: #d33; }
@media (max-width: 720px) {
  .row { grid-template-columns: 64px 1fr; }
  .row img { width: 64px; height: 64px; }
  .row__actions { grid-column: 1 / -1; justify-content: stretch; }
  .row__actions .icon-btn { flex: 1; }
}

/* ---------- forms ---------- */
.panel { background: #fff; border-radius: 26px; padding: 28px; box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.field--wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } .panel { padding: 20px; } }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 500; text-align: start; }
.field > span { font-size: .95rem; }
.field input, .field select, .field textarea, #trait-input {
  font: inherit; font-weight: 400; padding: 11px 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--cream); color: var(--ink); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus, #trait-input:focus { outline: none; border-color: var(--coral); background: #fff; }
.field textarea { resize: vertical; }
.form-actions { display: flex; justify-content: flex-end; }
fieldset { border: 0; padding: 0; margin: 0 0 20px; }
legend { font-weight: 600; margin-bottom: 10px; padding: 0; }

.segmented { display: flex; background: var(--cream); border: 2px solid var(--line); border-radius: 14px; padding: 3px; gap: 3px; }
.segmented label { flex: 1; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: block; text-align: center; padding: 7px 8px; border-radius: 10px; cursor: pointer; font-weight: 500; font-size: .92rem; transition: background .15s; }
.segmented input:checked + span { background: var(--ink); color: #fff; }
.segmented input:focus-visible + span { outline: 2px solid var(--coral); }

.tri-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.tri { background: var(--cream); border: 2px solid var(--line); border-radius: 14px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.tri__label { font-weight: 500; font-size: .92rem; }
.tri .segmented { background: #fff; border-width: 1px; }
.tri .segmented span { padding: 4px; font-size: .85rem; }

.traits-edit { display: flex; flex-wrap: wrap; gap: 6px; }
.traits-edit:empty { display: none; }
.trait { display: inline-flex; align-items: center; gap: 6px; background: var(--lilac-soft); color: #4b3aa8; padding: 4px 6px 4px 12px; border-radius: 999px; font-weight: 500; font-size: .9rem; }
.trait button { border: 0; background: rgba(75, 58, 168, .15); color: inherit; width: 20px; height: 20px; border-radius: 50%; font-size: .7rem; padding: 0; }
.trait-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.trait-suggest button { border: 1.5px dashed var(--line); background: #fff; border-radius: 999px; padding: 3px 10px; font-size: .85rem; color: var(--ink-soft); }
.trait-suggest button:hover { border-color: var(--lilac); color: #4b3aa8; }

.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-bottom: 10px; }
.photos:empty { display: none; }
.photo { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; cursor: pointer; border: 3px solid transparent; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo:first-child { border-color: var(--coral); }
.photo:first-child::after { content: '★ ראשית'; position: absolute; bottom: 6px; right: 6px; background: var(--coral); color: #fff; font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.photo__remove { position: absolute; top: 6px; left: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(43, 33, 24, .75); color: #fff; font-size: .8rem; }
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px; border: 2.5px dashed var(--line); border-radius: 20px; background: var(--cream); cursor: pointer; text-align: center; color: var(--ink-soft); transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.is-over { border-color: var(--coral); background: #fff4ee; }
.dropzone__icon { font-size: 2rem; }

/* ---------- dialogs ---------- */
.modal--form, .modal--social { width: min(860px, 100% - 24px); }
.modal--social { width: min(1100px, 100% - 24px); }
.dog-form, .social { display: flex; flex-direction: column; }
.dog-form__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 24px 28px 8px; }
.dog-form__head h2 { font-size: 1.9rem; }
.dog-form__head .modal__close { position: static; float: none; margin: 0; flex: none; }
.dog-form__body { padding: 12px 28px 20px; }
.dog-form__foot { position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 16px 28px; background: rgba(255, 248, 240, .95); backdrop-filter: blur(8px); border-top: 1px solid var(--line); flex-wrap: wrap; }
.dog-form__foot .form-error { margin-inline-end: auto; }
.dog-form:not(.is-adopted) .adopted-only { display: none; }
@media (max-width: 640px) { .dog-form__head, .dog-form__body, .dog-form__foot { padding-inline: 18px; } }

/* ---------- social ---------- */
.social__tabs { display: flex; gap: 6px; padding: 8px 28px 0; }
.social__tabs .tab { border: 1.5px solid var(--line); background: #fff; }
.social__tabs .tab.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }
.social__body { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 24px; padding: 18px 28px 28px; align-items: start; }
.social__preview { background: #fff; border-radius: 22px; padding: 12px; box-shadow: var(--shadow); position: sticky; top: 12px; }
.social__preview canvas { width: 100%; height: auto; border-radius: 14px; display: block; }
.social__side { display: flex; flex-direction: column; gap: 14px; }
.social__side textarea { font-size: .95rem; line-height: 1.55; min-height: 260px; }
.social__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.idea { margin: 0; background: var(--sun-soft); border-radius: 16px; padding: 12px 16px; font-size: .92rem; }
.idea:empty { display: none; }
.social__how { margin: 0; padding: 14px 32px 14px 16px; background: #fff; border-radius: 16px; border: 1px solid var(--line); font-size: .92rem; color: var(--ink-soft); }
.social__how li + li { margin-top: 4px; }
@media (max-width: 820px) {
  .social__body { grid-template-columns: 1fr; padding-inline: 18px; }
  .social__preview { position: static; max-width: 380px; width: 100%; margin-inline: auto; }
  .social__tabs { padding-inline: 18px; }
  .social__actions .btn { flex: 1 1 45%; }
}

/* ---------- video ---------- */
.social__tabs { flex-wrap: wrap; }
.new-badge { display: inline-block; margin-inline-start: 4px; padding: 1px 8px; border-radius: 999px; background: var(--coral); color: #fff; font-size: .72rem; vertical-align: middle; }
.vstage { position: relative; }
.vstage canvas, .vstage video { width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 14px; display: block; background: #000; }
.vplay {
  position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%); width: 92px; height: 92px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .92); color: var(--coral); font-size: 2.2rem; padding-inline-start: 8px; box-shadow: var(--shadow-lg); transition: transform .2s;
}
.vplay:hover { transform: translate(-50%, -50%) scale(1.08); }
.vprogress { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; padding: 24px; border-radius: 14px; background: linear-gradient(transparent 55%, rgba(43, 33, 24, .75)); color: #fff; text-align: center; font-size: .9rem; }
.vprogress strong { font-size: 1.1rem; }
.vprogress__track { width: 100%; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.vprogress__bar { height: 100%; width: 0; border-radius: 999px; background: var(--sun); transition: width .2s linear; }
.vcontrols { display: flex; flex-direction: column; gap: 14px; }
.tracks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.track {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; border: 2px solid var(--line); background: #fff;
  text-align: start; transition: border-color .15s, background .15s;
}
.track:hover { border-color: var(--coral); }
.track[aria-checked="true"] { border-color: var(--coral); background: #fff4ee; }
.track__icon { font-size: 1.6rem; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--cream); flex: none; }
.track[aria-checked="true"] .track__icon { background: var(--coral); }
.track strong { display: block; font-size: .95rem; }
.track small { color: var(--ink-soft); font-size: .8rem; }
.track.is-playing .track__icon { animation: beat .8s infinite; }

.vcontrols .field > label { font-size: .95rem; }
.vcontrols select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-inline-end: 40px; font-weight: 500;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23e24f2e' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 12px; background-position: left 14px center;
}

.vlength { margin: 0; font-size: .9rem; font-weight: 500; color: var(--ink-soft); }

.password-panel { margin-top: 24px; }
.password-panel h2 { font-size: 1.5rem; }
.show-pass { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--ink-soft); cursor: pointer; }
.show-pass input { width: 18px; height: 18px; accent-color: var(--coral); }

.legal-warning { background: #fff7e0; border: 2px solid #f5c04a; color: #6b4a00; border-radius: 18px; padding: 14px 18px; margin-bottom: 18px; }
.legal-warning a { color: #8a1c00; font-weight: 700; }
.form-section { border-top: 2px dashed var(--line); padding-top: 18px; margin-top: 6px; }
.form-section h2 { font-size: 1.4rem; }
.form-section a { color: var(--coral-dark); font-weight: 600; }
.tab.has-warning::after { content: '⚠️'; margin-inline-start: 4px; font-size: .8em; }

/* =====================================================================
   מובייל (עד 640px) – ממשק הניהול בטלפון. במחשב שום דבר כאן לא חל.
   ===================================================================== */
@media (max-width: 640px) {
  .admin .nav__inner { flex-wrap: nowrap; gap: 8px; height: 60px; padding: 0; }
  .admin .logo__paw { width: 38px; height: 38px; font-size: 1.1rem; }
  .tabs .tab { padding: 7px 12px; font-size: .9rem; }
  .nav__actions .btn--sm { padding: 7px 12px; font-size: .88rem; }
  .admin-main { padding: 22px 0 64px; }
  .admin-head { margin-bottom: 16px; }
  .admin-head h1 { font-size: 1.6rem; }
  .admin-head .btn--lg { width: 100%; }
  .panel { border-radius: 20px; }

  /* דיאלוגים – מסך מלא */
  .modal--form, .modal--social { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .dog-form__head { padding: 16px 16px 6px; }
  .dog-form__head h2 { font-size: 1.5rem; }
  .dog-form__body { padding: 8px 16px 16px; }
  .dog-form__foot { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
  .dog-form__foot .btn--lg { flex: 1; }
  .photos { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .tri-grid { grid-template-columns: 1fr; }

  .social__tabs { padding: 6px 16px 0; flex-wrap: wrap; gap: 6px; }
  .social__tabs .tab { flex: 1 1 auto; font-size: .86rem; padding: 8px 10px; }
  .social__body { padding: 14px 16px 24px; gap: 16px; }
  .social__preview { max-width: 300px; padding: 8px; }
  .tracks { gap: 6px; }
  .track { padding: 8px; gap: 8px; }
  .track__icon { width: 36px; height: 36px; font-size: 1.25rem; }
  .track strong { font-size: .88rem; }
  .track small { font-size: .74rem; }
  .vplay { width: 72px; height: 72px; font-size: 1.8rem; }
}

.vaudio-ok { color: var(--mint); font-weight: 600; }