*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--paper);color:var(--ink-900);font-family:var(--font-ui);font-size:14px;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
button{font-family:var(--font-ui);cursor:pointer;}
input,select{font-family:var(--font-ui);}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;border:none;border-radius:12px;
  padding:11px 18px;font-size:14px;transition:transform .2s,box-shadow .2s,filter .2s;}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-md);}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
.btn-primary{background:var(--green-700);color:var(--on-dark);box-shadow:var(--sh-sm);}
.btn-play{background:var(--sun-500);color:var(--green-900);box-shadow:var(--sh-sm);}
.btn-warm{background:var(--barn-600);color:#fff;box-shadow:var(--sh-sm);}
.btn-outline{background:transparent;color:var(--green-700);box-shadow:inset 0 0 0 1.5px var(--green-200);}
.btn-vk{background:#0077FF;color:#fff;width:100%;padding:13px;font-size:15px;}
.btn-ya{background:#000;color:#fff;width:100%;padding:13px;font-size:15px;}
.btn-ya .ya-mark{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#fc3f1d;color:#fff;font-weight:800;font-size:13px;font-family:var(--font-display,inherit);}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:10px;}

/* LOGIN GATE */
#gate{position:fixed;inset:0;z-index:100;background:var(--paper);display:grid;place-items:center;padding:24px;}
.gate-card{background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh-xl);
  padding:38px 34px;width:100%;max-width:400px;}
.gate-logo{width:54px;height:54px;border-radius:15px;object-fit:cover;margin:0 auto 14px;display:block;}
.gate-card h1{font-family:var(--font-display);font-weight:800;font-size:25px;color:var(--green-800);text-align:center;}
.gate-card .sub{color:var(--ink-500);font-size:13.5px;margin:6px 0 22px;text-align:center;}
.gate-input{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;font-size:15px;
  background:var(--card-2);color:var(--ink-900);outline:none;transition:.2s;margin-bottom:10px;}
.gate-input:focus{border-color:var(--grass-500);box-shadow:var(--ring-focus);}
.divider{display:flex;align-items:center;gap:12px;color:var(--ink-400);font-size:12px;margin:18px 0;}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line);}
.gate-err{color:var(--barn-600);font-size:13px;margin-top:10px;min-height:18px;font-weight:500;text-align:center;}
.dev-box{background:var(--card-2);border:1px dashed var(--line);border-radius:14px;padding:16px;}
.dev-box .lbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400);margin-bottom:10px;}

/* APP */
#app{display:none;}
.topbar{position:sticky;top:0;z-index:40;background:rgba(246,241,228,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:12px 22px;}
.topbar img.logo{width:32px;height:32px;border-radius:9px;object-fit:cover;}
.topbar .brand{font-family:var(--font-display);font-weight:800;font-size:19px;color:var(--green-800);}
.topbar .brand span{color:var(--grass-600);}
.topbar .badge{background:var(--green-050);color:var(--green-700);border:1px solid var(--green-200);
  border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600;}
.user-chip{margin-left:auto;display:flex;align-items:center;gap:10px;}
.user-name{font-weight:600;font-size:14px;color:var(--ink-900);}
.logout{background:transparent;border:1.5px solid var(--line);border-radius:10px;padding:7px 13px;font-weight:600;
  font-size:13px;color:var(--ink-700);display:flex;align-items:center;gap:6px;transition:.2s;}
.logout:hover{border-color:var(--barn-300);color:var(--barn-600);}

/* только вертикальная прокрутка страницы (без горизонтального сдвига) */
html,body{overflow-x:hidden;max-width:100vw;}

/* мобильный бургер + выпадающее меню (на десктопе скрыты) */
.user-burger{display:none;position:relative;margin-left:auto;background:transparent;border:1.5px solid var(--line);
  border-radius:10px;width:40px;height:38px;align-items:center;justify-content:center;color:var(--ink-700);cursor:pointer;}
.user-burger .burger-dot{position:absolute;top:6px;right:7px;width:9px;height:9px;border-radius:50%;background:var(--green-700);border:2px solid var(--paper);}
.user-menu{display:none;position:absolute;left:0;right:0;top:100%;z-index:45;background:var(--card);
  border-bottom:1px solid var(--line);box-shadow:var(--sh-lg);padding:8px;flex-direction:column;gap:2px;}
.user-menu.open{display:flex;}
.um-name{font-weight:700;font-size:15px;color:var(--green-800);padding:12px 14px 10px;border-bottom:1px solid var(--line-soft,#efe7d5);margin-bottom:4px;}
.um-item{display:flex;align-items:center;gap:11px;width:100%;background:transparent;border:none;border-radius:11px;
  padding:14px 14px;font-family:inherit;font-weight:600;font-size:15.5px;color:var(--ink-900);cursor:pointer;text-align:left;}
.um-item i{font-size:19px;color:var(--green-700);}
.um-item:hover{background:var(--card-2);}
.um-count{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 6px;border-radius:999px;background:var(--green-700);color:#fff;font-size:11px;font-weight:800;}
.um-logout{margin-top:6px;border-top:1px solid var(--line-soft,#efe7d5);color:var(--barn-600);border-radius:0 0 11px 11px;}
.um-logout i{color:var(--barn-600);}

/* отступ между кнопками «Покормить»/«Засушить» в строке травы */
.grass-actions{display:inline-flex;gap:8px;flex-wrap:wrap;}

.wrap{max-width:1080px;margin:0 auto;padding:26px 24px 60px;}
.section{margin-bottom:30px;}
.sec-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.sec-head .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--green-050);color:var(--green-700);flex:none;}
.sec-title{font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--green-800);}
.sec-sub{font-size:13px;color:var(--ink-500);}

.card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-sm);}
.grid{display:grid;gap:16px;}
.grid > *{min-width:0;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:1.3fr 1fr;}

/* listing card */
.listing{overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;}
.listing:hover{transform:translateY(-3px);box-shadow:var(--sh-md);}
.listing .img{height:120px;position:relative;overflow:hidden;background:#1a2417;}
.listing .img img{width:100%;height:100%;object-fit:cover;transform:scale(1.7);}
.listing .rate{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.92);border-radius:999px;padding:3px 8px;
  font-size:12px;font-weight:600;color:var(--green-800);display:inline-flex;align-items:center;gap:3px;}
.listing .body{padding:13px 15px 15px;display:flex;flex-direction:column;flex:1;}
.listing .name{font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--green-800);}
.listing .meta{font-size:12.5px;color:var(--ink-500);margin:1px 0;}
.listing .foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;}
.listing .price{font-weight:700;font-size:15px;color:var(--ink-900);}
.listing .price small{font-weight:500;font-size:11px;color:var(--ink-400);}

/* my animal hero */
.hero{display:grid;grid-template-columns:230px 1fr;gap:0;overflow:hidden;}
.hero .pic{position:relative;background:#1a2417;overflow:hidden;min-height:200px;}
.hero .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.3);}
/* live-плеер камеры в hero «Моё животное» (бар-оверлей поверх видео, без фона-плашки) */
.hero .pic .bar{height:32px;display:flex;align-items:center;gap:8px;padding:0 12px;
  color:var(--on-dark,#fff);font-size:12px;font-weight:600;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));}
.hero .pic .bar .cam-fs + .cam-fs{margin-left:4px;}
.hero .pic .live{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);border-radius:999px;
  padding:4px 11px;font-size:12px;font-weight:600;color:var(--c-live);display:inline-flex;align-items:center;gap:6px;}
.hero .info{padding:24px 26px;}
.hero .tag{font-family:var(--font-display);font-weight:800;font-size:28px;color:var(--green-800);text-transform:capitalize;}
.hero .rows{margin:14px 0 18px;display:flex;flex-direction:column;gap:8px;}
.hero .row{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-700);}
.hero .row i{color:var(--grass-600);}
.hero .crow{justify-content:space-between;gap:10px;flex-wrap:wrap;}
.crow-lbl{display:flex;align-items:center;gap:9px;flex:0 1 auto;white-space:nowrap;}
.fillbar{flex:1 1 auto;min-width:60px;height:8px;border-radius:999px;background:var(--green-100);overflow:hidden;}
.fillbar>span{display:block;height:100%;border-radius:999px;background:var(--grass-500);transition:width .25s ease-out;}
.hbar{flex:1 1 auto;min-width:60px;height:8px;border-radius:999px;background:var(--paper-dim,#efe8d6);overflow:hidden;display:inline-block;vertical-align:middle;}
.hbar>span{display:block;height:100%;border-radius:999px;transition:width .3s ease-out;}

/* ── Уведомления ── */
.notif-btn{position:relative;}
.notif-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;border-radius:999px;background:var(--green-700,#234d33);color:#fff;font-size:11px;font-weight:800;line-height:1;}
.notif-list{display:flex;flex-direction:column;gap:10px;}
.notif-item{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--card);cursor:pointer;transition:background .15s,transform .1s;}
.notif-item:hover{transform:translateY(-1px);}
.notif-item.unread{background:#fff7e8;border-color:#ecd9ac;}
.notif-item .ni-ic{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--paper-dim,#f1ead9);color:var(--green-800);font-size:18px;}
.notif-item .ni-body{flex:1 1 auto;min-width:0;}
.notif-item .ni-title{font-weight:700;color:var(--green-800);display:flex;align-items:center;gap:8px;}
.notif-item .ni-dot{width:8px;height:8px;border-radius:50%;background:var(--c-action-warm,#c8402f);flex:0 0 auto;}
.notif-item .ni-text{font-size:13px;color:var(--ink-600,#5b5341);margin-top:2px;}
.notif-item .ni-time{font-size:11.5px;color:var(--ink-400,#9a917c);margin-top:4px;}
.notif-item .ni-del{flex:0 0 auto;border:none;background:transparent;color:var(--ink-400,#9a917c);cursor:pointer;font-size:16px;padding:2px;}
.notif-item .ni-del:hover{color:var(--c-action-warm,#c8402f);}
.btn-xs{padding:4px 10px;font-size:12px;border-radius:8px;gap:5px;}
.qty-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:var(--grass-600);color:#fff;font-size:12px;font-weight:700;margin-left:6px;line-height:1;}
.qty-badge.qty-big{height:24px;min-width:24px;font-size:14px;vertical-align:middle;}
.bp-table{width:100%;border-collapse:collapse;font-size:14px;min-width:420px;}
.bp-table th{text-align:left;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--ink-600,var(--ink-700));padding:6px 12px;border-bottom:1.5px solid var(--line);white-space:nowrap;}
.bp-table td{padding:10px 12px;border-bottom:1px solid var(--line);color:var(--ink-800,var(--ink-700));vertical-align:middle;}
.bp-table tbody tr:last-child td{border-bottom:none;}
.bp-table td:first-child{font-weight:600;color:var(--green-800);}
.statebadge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:600;}
.st-active{background:var(--grass-100);color:var(--grass-700);}

.live-dot{width:8px;height:8px;border-radius:50%;background:var(--c-live);animation:lp 1.5s infinite;}
@keyframes lp{0%{box-shadow:0 0 0 0 rgba(226,51,35,.5)}70%{box-shadow:0 0 0 7px rgba(226,51,35,0)}100%{box-shadow:0 0 0 0 rgba(226,51,35,0)}}

/* form rows */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;min-width:0;}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-600,var(--ink-700));}
.field input,.field select{border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;
  background:var(--card-2);color:var(--ink-900);outline:none;transition:.2s;width:100%;min-width:0;max-width:100%;}
.field input:focus,.field select:focus{border-color:var(--grass-500);box-shadow:var(--ring-focus);}
.cost-box{background:var(--green-050);border:1px solid var(--green-200);border-radius:12px;padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.cost-box .big{font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--green-800);}
.cost-box .lbl{font-size:12.5px;color:var(--ink-600,var(--ink-700));}

/* orders / cameras lists */
.olist{display:flex;flex-direction:column;gap:8px;}
.orow{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card-2);}
.orow .od{font-size:13px;color:var(--ink-700);}
.orow .oc{margin-left:auto;font-weight:700;color:var(--green-800);}
.cam-list{display:flex;flex-direction:column;gap:8px;}
.cam-btn{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1.5px solid var(--line);border-radius:12px;
  background:var(--card);font-size:14px;font-weight:500;color:var(--ink-900);transition:.15s;text-align:left;width:100%;}
.cam-btn:hover{border-color:var(--grass-400,var(--grass-500));background:var(--card-2);}
.cam-btn.active{border-color:var(--green-700);background:var(--green-050);}
.cam-btn .dot{width:8px;height:8px;border-radius:50%;}
.dot-online{background:var(--grass-600);}.dot-offline{background:var(--ink-300);}
.cam-view{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#1a2417;position:relative;min-height:230px;}
.cam-view .bar{height:36px;background:var(--green-800);display:flex;align-items:center;gap:8px;padding:0 13px;
  color:var(--on-dark);font-size:12.5px;font-weight:600;}
.cam-view img{display:block;width:100%;}
.cam-empty{display:grid;place-items:center;min-height:230px;color:var(--ink-400);font-size:14px;text-align:center;padding:20px;}

.notice{background:var(--wheat-100);border:1px solid var(--wheat-300);border-radius:12px;padding:12px 16px;
  color:var(--wheat-700);font-size:13.5px;display:flex;align-items:center;gap:10px;}

/* balance */
.bal-wrap{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;}
/* сворачивание блока «Баланс»: в свёрнутом виде — одна строка «Итого» */
.bal-toggle{margin-left:auto;flex:none;background:none;border:none;cursor:pointer;color:var(--ink-500);
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;font-size:18px;transition:.12s;}
.bal-toggle:hover{background:var(--cream-100,#f6f1e4);color:var(--text);}
.bal-mini{display:none;font-size:15px;color:var(--text);font-weight:600;}
.bal-mini b{color:var(--green-800);font-weight:800;}
.bal-sec.collapsed .sec-head{margin-bottom:0;}
.bal-sec.collapsed .sec-sub{display:none;}
.bal-sec.collapsed .bal-wrap{display:none;}
.bal-sec.collapsed .bal-mini{display:block;margin-top:6px;}
.bal-card{flex:1;min-width:150px;border-radius:16px;padding:16px 18px;border:1px solid var(--line);background:var(--card);box-shadow:var(--sh-sm);}
.bal-card .bal-lbl{font-size:12px;font-weight:600;color:var(--ink-500);display:flex;align-items:center;gap:6px;}
.bal-card .bal-num{font-family:var(--font-display);font-weight:800;font-size:26px;color:var(--green-800);margin-top:4px;}
.bal-v{background:var(--green-050);}
.bal-r{background:var(--card-2);}
.bal-t{background:var(--sun-500);border-color:var(--sun-600);}
.bal-t .bal-lbl{color:var(--green-900);opacity:.7;}
.bal-t .bal-num{color:var(--green-900);}
.bal-op{display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--ink-400);}

/* products / ripening */
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.prod-tile{border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:var(--card);}
.prod-tile.flash{animation:eggflash 1.4s var(--ease-out);}
@keyframes eggflash{0%{box-shadow:0 0 0 0 var(--grass-500);background:var(--grass-100);}100%{box-shadow:0 0 0 6px rgba(0,0,0,0);background:var(--card);}}
.prod-tile .pn{font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--green-800);display:flex;align-items:center;gap:8px;}
.prod-tile .pp{font-size:12.5px;color:var(--ink-500);margin:3px 0 10px;}
.bar{height:9px;border-radius:99px;background:var(--paper-dim);overflow:hidden;}
.bar > i{display:block;height:100%;border-radius:99px;background:var(--grass-500);transition:width .4s var(--ease-out);}
.bar.ripe > i{background:var(--sun-500);}
.prod-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:8px;flex-wrap:wrap;}
.ripe-badge{display:inline-flex;align-items:center;gap:5px;background:var(--sun-500);color:var(--green-900);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;}
.growing{font-size:12.5px;color:var(--ink-500);}
.btn-disabled{background:var(--paper-dim);color:var(--ink-400);border:1px dashed var(--line);border-radius:10px;padding:8px 14px;font-size:13px;font-weight:600;cursor:not-allowed;display:inline-flex;align-items:center;gap:6px;}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--green-800);
  color:var(--on-dark);padding:12px 20px;border-radius:12px;font-weight:600;font-size:14px;box-shadow:var(--sh-lg);
  opacity:0;pointer-events:none;transition:.25s;display:flex;align-items:center;gap:8px;z-index:60;max-width:92vw;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.muted{color:var(--ink-400);font-size:13px;}

/* ════════ ПЛАНШЕТ ════════ */
@media(max-width:820px){
  .grid-3{grid-template-columns:1fr 1fr;}
  .grid-2{grid-template-columns:1fr;}
  .hero{grid-template-columns:1fr;}
  .hero .pic{min-height:170px;}
  .wrap{padding:22px 18px 50px;}
}

/* ════════ МОБИЛЬНЫЙ ════════ */
@media(max-width:560px){
  .topbar{padding:10px 14px;gap:10px;}
  .topbar .badge{display:none;}
  .topbar .brand{font-size:17px;}
  .user-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;}
  .logout{padding:7px 10px;}
  /* мобила: вместо ряда кнопок — бургер + вертикальное меню */
  .user-chip{display:none;}
  .user-burger{display:inline-flex;}
  .grass-actions{flex-direction:column;gap:8px;align-items:stretch;}

  .wrap{padding:16px 14px 44px;}
  .section{margin-bottom:22px;}
  .sec-title{font-size:20px;}
  .sec-sub{font-size:12px;}

  .grid-3{grid-template-columns:1fr;}
  .prod-grid{grid-template-columns:1fr;}
  .bal-op{display:none;}
  .bal-card{min-width:0;flex-basis:calc(50% - 6px);}
  .bal-t{flex-basis:100%;}

  .hero .info{padding:18px 18px;}
  .hero .tag{font-size:24px;}
  .card[style]{padding:16px !important;}
}
@media(max-width:380px){
  .bal-card{flex-basis:100%;}
  .sec-head .ic{width:34px;height:34px;}
}

/* ════════ МОДАЛКА ЗАКАЗА ПРОДУКЦИИ ════════ */
.modal-ov{position:fixed;inset:0;z-index:60;background:rgba(32,40,31,.45);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:ovIn .15s ease-out;}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
.modal-card{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-xl);
  width:100%;max-width:420px;padding:22px;animation:cardIn .2s var(--ease-spring,ease-out);}
@keyframes cardIn{from{transform:translateY(10px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;}
.modal-title{font-family:var(--font-display);font-weight:800;font-size:20px;color:var(--green-800);line-height:1.1;}
.modal-x{margin-left:auto;background:transparent;border:none;color:var(--ink-400);cursor:pointer;padding:2px;border-radius:8px;}
.modal-x:hover{color:var(--green-800);background:var(--card-2);}
.modal-card .field textarea{border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;
  font-family:inherit;background:var(--card-2);color:var(--ink-900);outline:none;}
.modal-card .field textarea:focus{border-color:var(--grass-500);}
.modal-err{color:var(--barn-600,#c8402f);font-size:13px;font-weight:600;min-height:18px;margin:2px 0 8px;}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;}

/* ════════ ЛЕНТА ВКЛАДОК «МОИ ЖИВОТНЫЕ» ════════ */
.atabs{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;}
.atab{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;max-width:240px;
  background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:9px 15px;cursor:pointer;
  font-weight:600;font-size:14px;color:var(--green-800);transition:.18s var(--ease-out,ease);}
.atab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize;}
.atab:hover{transform:translateY(-2px);box-shadow:var(--sh-sm);}
.atab.on{background:var(--grass-100);border-color:var(--grass-500);color:var(--green-900,var(--green-800));}
.atab.on i{color:var(--grass-600);}
.atab-add{border-style:dashed;color:var(--grass-700);}
.atab-add.on{background:var(--grass-100);border-style:solid;}
/* «Яичная скорлупа» — кнопка-действие в ряду вкладок (не выбор, а одноразовое кормление) */
.atab.egg-act{border-color:var(--accent-300,#eccf97);color:var(--accent-700,#9a6f1e);background:var(--accent-50,#fbf3e2);}
.atab.egg-act i{color:var(--accent-600,#e0a23b);}
.atab.egg-act:hover{box-shadow:var(--sh-sm);}
.atab.egg-act:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}

/* ════════ КАМЕРА: кнопка «на весь экран» + полноэкранный режим ════════ */
.cam-fs{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:24px;border:1px solid rgba(255,255,255,.25);border-radius:7px;
  background:rgba(255,255,255,.06);color:var(--on-dark,#fff);cursor:pointer;line-height:0;
  transition:.15s;}
.cam-fs:hover{background:rgba(255,255,255,.16);transform:translateY(-1px);}
.cam-view .bar .cam-fs + .cam-fs{margin-left:6px;} /* вторая кнопка (на весь экран) рядом со «Звук» */
.cam-view:fullscreen, .cam-view:-webkit-full-screen{display:flex;flex-direction:column;background:#000;}
.cam-view:fullscreen video, .cam-view:-webkit-full-screen video{flex:1;height:auto;width:100%;aspect-ratio:auto;object-fit:contain;}
/* Картинка количества яиц в «Продукции» */
.egg-pic{display:flex;justify-content:center;margin:8px 0;}
.egg-pic img{max-width:100%;max-height:120px;border-radius:12px;object-fit:contain;background:var(--card,#fffdf7);}
/* Галерея снимков в Амбаре */
.snap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}
.snap{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface,#fffdf7);}
.snap img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#1a2417;cursor:pointer;}
.snap figcaption{display:flex;align-items:center;gap:8px;padding:7px 9px;}
.snap-meta{font-size:12px;color:var(--ink-400,#7a7464);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.snap-actions{margin-left:auto;display:inline-flex;gap:6px;flex:none;}
.snap-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:26px;border:1px solid var(--line);
  border-radius:7px;background:#fff;color:var(--ink-500,#534d40);cursor:pointer;line-height:0;text-decoration:none;transition:.12s;}
.snap-btn:hover{background:var(--cream-100,#f6f1e4);transform:translateY(-1px);}
.snap-del:hover{color:var(--barn-600,#c8402f);border-color:var(--barn-300,#e7a99f);}
/* Панель управления камерой (PTZ + снимок) */
.cam-ctrl{display:flex;align-items:center;gap:14px;padding:10px 12px;background:var(--green-800);}
.ptz-pad{display:grid;grid-template-columns:repeat(3,30px);grid-template-rows:repeat(3,30px);gap:4px;
  grid-template-areas:". up ." "left stop right" ". down .";}
.ptz-pad .ptz[data-dir="up"]{grid-area:up;} .ptz-pad .ptz[data-dir="down"]{grid-area:down;}
.ptz-pad .ptz[data-dir="left"]{grid-area:left;} .ptz-pad .ptz[data-dir="right"]{grid-area:right;}
.ptz-pad .ptz[data-dir="stop"]{grid-area:stop;}
.ptz{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.25);
  border-radius:7px;background:rgba(255,255,255,.06);color:var(--on-dark,#fff);cursor:pointer;line-height:0;
  font-size:15px;touch-action:none;user-select:none;transition:.12s;}
.ptz:hover{background:rgba(255,255,255,.16);}
.ptz:active{transform:scale(.94);background:rgba(255,255,255,.24);}
.ptz-stop{color:var(--barn-400,#e08a7d);}

/* ── Онбординг: подсветка областей (6 шагов) ── */
#tourRoot[hidden]{display:none;}
#tourRoot{position:fixed;inset:0;z-index:9998;}
.tour-mask{position:fixed;inset:0;z-index:9998;background:transparent;}
.tour-hole{position:fixed;z-index:9999;border-radius:16px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(20,24,18,.72);transition:left .25s ease,top .25s ease,width .25s ease,height .25s ease;}
.tour-pop{position:fixed;z-index:10000;background:var(--surface,#fffdf7);border:1px solid var(--line,#e6dcc6);
  border-radius:16px;box-shadow:0 18px 50px rgba(20,24,18,.35);padding:16px 16px 14px;max-width:360px;
  animation:tourIn .2s ease-out;}
@keyframes tourIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.tour-head{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--green-800,#234d33);font-size:16px;margin-bottom:8px;}
.tour-head i{font-size:20px;color:var(--grass-600,#5c9e45);flex:none;}
.tour-count{margin-left:auto;font-size:12px;font-weight:700;color:var(--ink-500,#534d40);
  background:var(--green-050,#eef3ea);border-radius:999px;padding:3px 9px;flex:none;}
.tour-text{font-size:14px;line-height:1.5;color:var(--text,#20281f);margin-bottom:14px;}
.tour-foot{display:flex;align-items:center;gap:8px;}
.tour-skip{background:none;border:none;color:var(--ink-400,#8a8676);font:inherit;font-size:13px;cursor:pointer;padding:6px 2px;}
.tour-skip:hover{color:var(--text,#20281f);text-decoration:underline;}
@media(max-width:560px){
  .tour-pop{max-width:none;left:12px!important;right:12px!important;width:auto!important;}
}

/* ── Достижения ── */
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px;}
.ach{position:relative;border:1.5px solid var(--line,#e6dcc6);border-radius:14px;background:var(--surface,#fffdf7);
  padding:14px 10px 12px;text-align:center;cursor:pointer;transition:transform .15s,box-shadow .15s;outline:none;}
.ach:hover{transform:translateY(-2px);}
.ach-ic{line-height:0;}
.ach-ic i{font-size:36px;color:var(--ink-400,#8a8676);}
.ach-name{font-weight:700;font-size:13px;margin-top:8px;color:var(--text,#20281f);line-height:1.25;}
.ach.locked{filter:grayscale(1);opacity:.45;}
.ach.unlocked{box-shadow:0 4px 14px rgba(20,24,18,.08);}
.ach.unlocked.tier-bronze{border-color:#cd7f32;}
.ach.unlocked.tier-silver{border-color:#9aa0a6;}
.ach.unlocked.tier-gold{border-color:var(--c-accent,#e0a23b);}
.ach.unlocked.tier-bronze .ach-ic i{color:#cd7f32;}
.ach.unlocked.tier-silver .ach-ic i{color:#9aa0a6;}
.ach.unlocked.tier-gold .ach-ic i{color:var(--c-accent,#e0a23b);}
.ach-bar{height:6px;background:var(--cream-100,#efe9da);border-radius:4px;margin:9px 4px 3px;overflow:hidden;}
.ach-bar i{display:block;height:100%;background:var(--grass-500,#5c9e45);}
.ach-pct{font-size:11px;color:var(--ink-400,#8a8676);font-weight:600;}
/* тултип-подсказка (hover на десктопе, тап → .show на мобилке) */
.ach-tip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:210px;
  background:var(--green-900,#16200f);color:#fff;padding:10px 12px;border-radius:10px;font-size:12px;line-height:1.45;
  text-align:left;opacity:0;pointer-events:none;transition:opacity .15s;z-index:6;box-shadow:0 10px 28px rgba(0,0,0,.28);}
.ach-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--green-900,#16200f);}
.ach-tip-rew{display:inline-block;margin-top:5px;font-weight:700;color:var(--sun-300,#f6c560);}
.ach:hover .ach-tip,.ach:focus .ach-tip,.ach.show .ach-tip{opacity:1;}
/* выполнено, но награда не забрана — выделяем */
.ach.claimable{border-color:var(--grass-500,#5c9e45);box-shadow:0 0 0 2px rgba(92,158,69,.18),0 4px 14px rgba(20,24,18,.08);}
.ach-claim{margin-top:9px;width:100%;border:none;border-radius:9px;cursor:pointer;
  background:var(--grass-600,#4e8b3a);color:#fff;font:inherit;font-weight:700;font-size:12px;padding:7px 6px;transition:.12s;}
.ach-claim:hover{background:var(--green-700,#2f6a2a);transform:translateY(-1px);}
.ach-claim:disabled{opacity:.6;cursor:default;}
.ach-got{margin-top:9px;font-size:12px;font-weight:700;color:var(--grass-700,#3d7a2e);display:flex;align-items:center;justify-content:center;gap:4px;}
@media(max-width:560px){ .ach-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));} .ach-ic i{font-size:30px;} }

/* ════════ Графическое меню-картинка «Ферма» ════════ */
.farm-map{position:relative;border-radius:18px;overflow:hidden;border:1px solid #e6dcc6;box-shadow:var(--sh-md,0 6px 20px rgba(40,30,10,.10));line-height:0;}
.farm-map img{width:100%;display:block;}
.fm-hot{position:absolute;border:0;background:transparent;cursor:pointer;border-radius:14px;
  transition:background .2s,box-shadow .2s;display:flex;align-items:flex-end;justify-content:center;padding:6px;outline:none;}
.fm-hot:hover,.fm-hot:focus-visible{background:rgba(92,158,69,.20);box-shadow:inset 0 0 0 2px var(--c-secondary,#5c9e45);}
.fm-tip{opacity:0;transform:translateY(4px);transition:.15s;pointer-events:none;
  background:var(--green-900,#16200f);color:#fff;font-size:12px;font-weight:600;line-height:1.2;
  padding:5px 9px;border-radius:9px;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.28);max-width:90%;}
.fm-hot:hover .fm-tip,.fm-hot:focus-visible .fm-tip{opacity:1;transform:translateY(0);}
/* фильтр каталога по виду (вход из меню) */
.rent-filter{margin:2px 0 12px;}
.chip-filter{display:inline-flex;align-items:center;gap:6px;background:var(--grass-100,#e8f1e0);color:var(--grass-700,#3d7a2e);
  font-weight:700;font-size:13px;padding:6px 6px 6px 12px;border-radius:999px;}
.chip-x{border:0;background:rgba(0,0,0,.08);color:inherit;cursor:pointer;width:20px;height:20px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;transition:.12s;}
.chip-x:hover{background:rgba(0,0,0,.18);}
/* на тач-экранах подписи НЕ показываем (не должны лежать поверх картинки); зоны остаются кликабельными */
@media(hover:none){ .fm-tip{display:none;} }