:root{
  --bg1:#fdf2f8; --bg2:#eef2ff;
  --card:#ffffff; --text:#2d2a3a; --muted:#8b8794;
  --accent:#e8823f; --accent-solid:#e8823f; --accent-hover:#d16f2f;
  --border:#eee3ea; --ok:#3fa672; --danger:#d9455f;
  --shadow:0 4px 20px rgba(60,20,50,.08);
  --radius:16px;
  --card-img-bg:#f5eef2;
  --modal-bg:#ffffff;
  --input-bg:#fdfbfc;
  --reserved-bg:#f1e9ff; --reserved-text:#6b4fa3;
  --toast-bg:#2d2a3a; --toast-text:#ffffff;
  --overlay-bg:rgba(30,20,30,.45);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg1:#1a1620; --bg2:#14121c;
    --card:#221d2b; --text:#f0eef5; --muted:#a79fb5;
    --accent:#ff9d54; --accent-solid:#ff9d54; --accent-hover:#ffb374;
    --border:#3a3345; --ok:#4cc98a; --danger:#ff6b7a;
    --shadow:0 4px 20px rgba(0,0,0,.4);
    --card-img-bg:#2c2636;
    --modal-bg:#221d2b;
    --input-bg:#2a2432;
    --reserved-bg:#3a2f52; --reserved-text:#d9c8ff;
    --toast-bg:#f0eef5; --toast-text:#2d2a3a;
    --overlay-bg:rgba(0,0,0,.6);
    color-scheme:dark;
  }
  :root:not([data-theme="light"]) select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a79fb5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"]{
  --bg1:#1a1620; --bg2:#14121c;
  --card:#221d2b; --text:#f0eef5; --muted:#a79fb5;
  --accent:#ff9d54; --accent-solid:#ff9d54; --accent-hover:#ffb374;
  --border:#3a3345; --ok:#4cc98a; --danger:#ff6b7a;
  --shadow:0 4px 20px rgba(0,0,0,.4);
  --card-img-bg:#2c2636;
  --modal-bg:#221d2b;
  --input-bg:#2a2432;
  --reserved-bg:#3a2f52; --reserved-text:#d9c8ff;
  --toast-bg:#f0eef5; --toast-text:#2d2a3a;
  --overlay-bg:rgba(0,0,0,.6);
  color-scheme:dark;
}
:root[data-theme="dark"] select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a79fb5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(160deg,var(--bg1),var(--bg2)); color:var(--text); min-height:100vh;
}
#app{max-width:1080px; margin:0 auto; padding:24px 20px 80px;}
header.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-bottom:24px;
}
header.topbar h1{font-size:1.6rem; margin:0; display:flex; align-items:center; gap:10px; color:var(--text);}
.countdown-hero{max-width:480px; margin:0 auto 24px; text-align:center;}
.countdown-hero .countdown-label{font-size:1.05rem; font-weight:600; color:var(--text); margin-bottom:8px;}
.countdown-hero .countdown-bar{height:14px; border-radius:7px;}
.countdown-bar{position:relative; height:8px; border-radius:4px; background:var(--input-bg); overflow:hidden; border:1px solid var(--border);}
.countdown-bar-fill{position:absolute; top:0; right:0; bottom:0; background:var(--accent-solid); border-radius:0 4px 4px 0; transition:width .3s;}
.countdown-hero .countdown-bar-fill{border-radius:0 7px 7px 0;}
.countdown-tick{position:absolute; top:0; bottom:0; width:1px; background:var(--bg1); opacity:.55;}

/* тумблер темы: скруглённый прямоугольник + кружок, который едет по клику.
   Солнце и луна нарисованы векторно и лежат по краям трека — тумблер-кружок
   наезжает на одну из них, скрывая её, в зависимости от текущей темы. */
.theme-switch{
  position:relative; width:44px; height:24px; padding:0; flex:none;
  border-radius:12px; background:var(--border); border:none; cursor:pointer; transition:background .2s;
}
.theme-switch:hover{background:var(--border);}
.theme-switch-sun, .theme-switch-moon{
  position:absolute; top:50%; width:13px; height:13px; transform:translateY(-50%);
  color:var(--muted); pointer-events:none;
}
.theme-switch-sun{left:5px;}
.theme-switch-moon{right:5px;}
.theme-switch-knob{
  position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform .2s ease;
}
.theme-switch[aria-checked="true"]{background:var(--accent-solid);}
.theme-switch[aria-checked="true"] .theme-switch-knob{transform:translateX(20px);}
.header-controls{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.owner-controls{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
/* Отступ текста слева (14px) равен отступу от стрелки до правого края (тоже 14px,
   через background-position). Родная стрелка браузера отключена (appearance:none),
   потому что её отступ нельзя выровнять так точно. */
select{
  font:inherit; color:var(--text); cursor:pointer;
  border:1px solid var(--border); border-radius:8px;
  padding:9px 34px 9px 14px;
  background-color:var(--input-bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238b8794' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:11px 11px;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
}
select::-ms-expand{display:none;}
button{
  font:inherit; cursor:pointer; border:none; border-radius:10px; padding:10px 16px;
  background:var(--accent-solid); color:#fff; transition:background .15s, transform .1s;
}
button:hover{background:var(--accent-hover);}
button:active{transform:scale(.97);}
button.secondary{background:var(--card); color:var(--text); border:1px solid var(--border);}
button.secondary:hover{background:var(--input-bg);}
button.danger{background:var(--danger);}
button.danger:hover{background:#b8324a;}
button.ghost{background:transparent; color:var(--muted); padding:6px 10px;}
button.ghost:hover{background:rgba(128,128,128,.12); color:var(--text);}
button.icon-btn{padding:9px 12px; font-size:1rem; line-height:1;}
button:disabled{opacity:.55; cursor:not-allowed;}
.empty-state{
  text-align:center; padding:80px 20px; color:var(--muted);
}
.empty-state h2{color:var(--text); margin-bottom:8px;}
.filters-bar{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:18px;
  padding:12px 16px; background:var(--card); border-radius:12px; box-shadow:var(--shadow);
}
/* Выпадающий список категорий с галочками (details/summary — без лишнего JS для открытия/закрытия) */
.dropdown-check{position:relative;}
.dropdown-check-toggle{
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px;
  font:inherit; color:var(--text); cursor:pointer; user-select:none;
  border:1px solid var(--border); border-radius:8px; background-color:var(--input-bg);
  padding:9px 14px;
}
.dropdown-check-toggle::-webkit-details-marker{display:none;}
.dropdown-check-arrow{width:11px; height:11px; flex:none; color:var(--muted); transition:transform .15s;}
.dropdown-check[open] .dropdown-check-arrow{transform:rotate(180deg);}
.dropdown-check-panel{
  position:absolute; top:calc(100% + 6px); left:0; z-index:50; min-width:190px;
  display:flex; flex-direction:column; gap:10px;
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow); padding:12px 14px;
}
.filter-chip{display:inline-flex; align-items:center; gap:8px; font-size:.9rem; color:var(--text); cursor:pointer; user-select:none;}
.filter-chip input{accent-color:var(--accent-solid); width:15px; height:15px; cursor:pointer; margin:0;}
.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px;
}
.card{
  background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column; position:relative; cursor:pointer;
}
.card-img{
  width:100%; aspect-ratio:1/1; background:var(--card-img-bg); display:flex; align-items:center; justify-content:center;
  font-size:2.6rem; overflow:hidden;
}
.card-img img{width:100%; height:100%; object-fit:cover; display:block;}
.card-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1;}
.card-title{font-weight:600; font-size:1.05rem; margin:0; color:var(--text);}
.card-title a{color:inherit; text-decoration:none;}
.card-title a:hover{color:var(--accent-solid); text-decoration:underline;}
.card-price{color:var(--accent-solid); font-weight:600; font-size:.95rem;}
.card-note{color:var(--muted); font-size:.88rem; white-space:pre-wrap; margin:0;}
.card-link a{color:var(--accent-solid); font-size:.88rem; text-decoration:none;}
.card-link a:hover{text-decoration:underline;}
.card-footer{margin-top:auto; padding-top:10px; display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.card-contacts{display:flex; gap:14px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border);}
.contact-link{font-size:.8rem; color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; gap:4px;}
.contact-link svg{width:14px; height:14px; flex:none;}
.contact-link:hover{color:var(--accent-solid); text-decoration:underline;}
.reserved-badge{
  background:var(--reserved-bg); color:var(--reserved-text); font-size:.8rem; padding:6px 10px; border-radius:8px; font-weight:600;
  display:flex; align-items:center; gap:6px; flex:1;
}
.owner-actions{position:absolute; top:8px; right:8px; display:flex; gap:6px;}
.owner-actions button{padding:6px 9px; font-size:.85rem; border-radius:8px;}
.full-btn{width:100%;}
/* modal */
.modal-overlay{
  position:fixed; inset:0; background:var(--overlay-bg); display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:100;
}
.modal{
  background:var(--modal-bg); border-radius:var(--radius); padding:24px; width:100%; max-width:420px;
  box-shadow:0 10px 40px rgba(0,0,0,.3); max-height:90vh; overflow:auto; color:var(--text);
}
.modal.modal-wide{max-width:640px;}
.modal h3{margin-top:0;}
.detail-main-img{
  width:100%; aspect-ratio:4/3; background:var(--card-img-bg); border-radius:12px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-size:3rem; margin-bottom:10px;
}
.detail-main-img img{width:100%; height:100%; object-fit:contain; display:block;}
.detail-thumbs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.detail-thumb{
  width:56px; height:56px; object-fit:cover; border-radius:8px; cursor:pointer;
  opacity:.6; border:2px solid transparent;
}
.detail-thumb:hover{opacity:.85;}
.detail-thumb.active{opacity:1; border-color:var(--accent-solid);}
.field{margin-bottom:14px;}
.field label{display:block; font-size:.85rem; color:var(--muted); margin-bottom:5px; font-weight:600;}
.field input, .field textarea, .field select{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font:inherit; background-color:var(--input-bg); color:var(--text);
}
.field select{padding:10px 34px 10px 14px;}
.field input:focus, .field textarea:focus, .field select:focus{outline:2px solid var(--accent-solid); outline-offset:-1px;}
.field textarea{resize:vertical; min-height:60px;}
.field small{color:var(--muted); display:block; margin-top:4px; font-size:.78rem;}
.price-row{display:flex; gap:8px;}
.price-row input{flex:1;}
.price-row select{width:110px; flex:none;}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:18px; flex-wrap:wrap;}
.modal-actions .left{margin-right:auto;}
.error-text{color:var(--danger); font-size:.85rem; margin-top:8px; min-height:1em;}
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--toast-bg); color:var(--toast-text);
  padding:12px 20px; border-radius:10px; font-size:.9rem; z-index:200; box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.toast.error{background:var(--danger); color:#fff;}
.spinner-row{text-align:center; padding:60px 0; color:var(--muted);}
@media (max-width:480px){
  header.topbar h1{font-size:1.3rem;}
}