/* Хроникон · интерфейс редактора */
.hr-photo{position:relative;margin:0;border-radius:22px;overflow:hidden;aspect-ratio:var(--ar,4/5);background:var(--bg2,#f1f1f5)}
.hr-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hr-ph{width:100%;height:100%;display:grid;place-items:center;color:#9a9aa0;font-size:14px;
  background:repeating-linear-gradient(45deg,#f4f4f7,#f4f4f7 12px,#eceCf2 12px,#ececf2 24px)}
.hr-pen{display:none;position:absolute;right:14px;bottom:14px;z-index:3;width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(20,20,22,.82);color:#fff;font-size:17px;cursor:pointer;backdrop-filter:blur(8px);transition:transform .25s}
.hr-editing .hr-pen{display:block}
.hr-pen:hover{transform:scale(1.08);background:#C8102E}
.hr-photo.hr-drop{outline:3px dashed #C8102E;outline-offset:-6px}
.hr-photo.hr-busy::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' stroke='%23C8102E'%3E%3Cg fill='none' stroke-width='3'%3E%3Ccircle cx='19' cy='19' r='16' stroke-opacity='.25'/%3E%3Cpath d='M35 19a16 16 0 0 0-16-16'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 19 19' to='360 19 19' dur='.9s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E") center no-repeat}

.hr-editing [data-edit]{outline:1px dashed rgba(200,16,46,.35);outline-offset:5px;border-radius:4px;transition:outline-color .2s}
.hr-editing [data-edit]:hover{outline-color:rgba(200,16,46,.7)}
.hr-editing [data-edit]:focus{outline:2px solid #C8102E;outline-offset:5px}
.hr-empty{color:#b9b9c0;font-style:italic}

.hr-bar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:999;display:flex;align-items:center;gap:14px;
  padding:10px 12px 10px 20px;border-radius:999px;background:rgba(20,20,22,.92);color:#fff;font:500 14px/1 "Golos Text",system-ui,sans-serif;
  backdrop-filter:blur(16px);box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.hr-bar-title{white-space:nowrap}
.hr-status{color:#ffb0a8;font-size:13px;white-space:nowrap}
.hr-btn{font:inherit;border:0;border-radius:999px;padding:9px 18px;cursor:pointer;background:#C8102E;color:#fff}
.hr-btn:disabled{opacity:.4;cursor:default}
.hr-btn.ghost{background:rgba(255,255,255,.14)}
@media(max-width:620px){.hr-bar{left:12px;right:12px;transform:none;justify-content:space-between;padding-left:16px}.hr-bar-title{display:none}}

.hr-toast{position:fixed;left:50%;bottom:88px;transform:translate(-50%,14px);z-index:1000;opacity:0;pointer-events:none;
  background:#1b1b1f;color:#fff;padding:12px 20px;border-radius:999px;font:500 14px/1 "Golos Text",system-ui,sans-serif;transition:.35s cubic-bezier(.22,1,.36,1)}
.hr-toast.show{opacity:1;transform:translate(-50%,0)}
.hr-toast.bad{background:#C8102E}

/* панель редактора: раскладка и видимость кнопок */
.hr-bar{flex-wrap:nowrap}
.hr-bar .hr-btn{flex:none;white-space:nowrap;min-height:40px;line-height:1}
.hr-bar .hr-btn.ghost{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.28)}
.hr-bar .hr-btn.ghost:hover{background:rgba(255,255,255,.3)}
.hr-bar-title{flex:none}
.hr-status{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* панель: фиксированная ширина по содержимому, поверх всего */
.hr-bar{width:max-content;max-width:calc(100vw - 32px);inset:auto auto 22px 50%;
  flex-direction:row!important;justify-content:flex-start;isolation:isolate}
.hr-bar>*{position:static!important;float:none!important}
.hr-bar .hr-btn{order:9;margin:0}
.hr-bar .hr-save{order:8}
.hr-bar-title{order:1}
.hr-status{order:2;flex:0 1 auto}