#view-guides{--guide-accent:var(--accent,#6bddea);--guide-line:var(--line,rgba(139,194,206,.22))}
.guides-toolbar{display:flex;gap:.75rem;align-items:center;margin:0 auto 1rem;max-width:61rem}
.guides-filter{display:grid;grid-template-columns:minmax(0,1fr) minmax(12rem,17rem);align-items:center;gap:.65rem;padding:.7rem;margin-bottom:1rem}
.guide-search,.guide-category-select{display:block;position:relative;min-width:0;margin:0}
.guide-search svg,.guide-category-select svg{position:absolute;top:50%;width:1.15rem;height:1.15rem;transform:translateY(-50%);pointer-events:none;z-index:1}
.guide-search svg{left:.8rem;opacity:.65}
.guide-category-select svg{right:.8rem}
#view-guides .guide-search .input{width:100%;min-width:0;padding-inline-start:2.5rem}
#view-guides .guide-category-select .select{
  appearance:none!important;background-image:none!important;min-width:0
}
#view-guides .guide-category-select .select{width:100%;padding-inline:1rem 2.5rem;cursor:pointer}
#view-guides .guide-category-select path,.guide-open path{stroke-linecap:round;stroke-linejoin:round}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:1rem}
.guide-grid>.empty{grid-column:1/-1}
#view-guides .guide-card,#view-guides .guide-reader{min-width:0;border:1px solid var(--guide-line);overflow:hidden}
#view-guides .guide-card{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(1rem,2vw,1.55rem)}
#view-guides .guide-card:focus-within,#view-guides .guide-card:hover{border-color:color-mix(in srgb,var(--guide-accent) 58%,var(--guide-line))}
.guide-category{display:inline-flex;max-width:100%;padding:.32rem .62rem;border-radius:6px;background:color-mix(in srgb,var(--guide-accent) 11%,transparent);color:var(--guide-accent);font-size:.75rem;font-weight:750;letter-spacing:.055em;overflow-wrap:anywhere}
#view-guides .guide-card h2,#view-guides #guideTitle{margin:.62rem 0 .5rem;line-height:1.12;overflow-wrap:anywhere}
#view-guides .guide-card h2{font-size:clamp(1.24rem,2vw,1.56rem)}
.guide-card>p,.guide-intro{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}
.guide-card>p{color:var(--muted,inherit);font-size:.94rem;padding-bottom:.8rem}
.guide-card-footer{display:flex;justify-content:space-between;align-items:center;gap:.55rem 1rem;flex-wrap:wrap;width:100%;padding-top:.75rem;margin-top:auto;border-top:1px solid var(--guide-line)}
.guide-meta{display:flex;gap:.3rem .8rem;align-items:center;flex-wrap:wrap;font-size:.78rem;line-height:1.45}
.guide-meta time{color:var(--muted,inherit)}
.guide-byline{display:inline-flex;gap:.32rem;align-items:center;font-weight:650;min-width:0;overflow-wrap:anywhere}
.guide-byline svg,.guide-open svg{width:1rem;height:1rem;flex:none}
#view-guides .guide-open{display:inline-flex;align-items:center;gap:.3rem;color:var(--guide-accent);font-weight:750;text-decoration:none}
#view-guides .guide-open:hover,#view-guides .guide-open:focus-visible{text-decoration:underline;text-underline-offset:.23em}
#view-guides .guide-reader{--guide-reader-gutter:clamp(1rem,2.5vw,1.75rem);max-width:61rem;margin-inline:auto}
.guide-reader-header{padding-block:clamp(1.25rem,5vw,3.1rem);padding-inline:var(--guide-reader-gutter);border-bottom:1px solid var(--guide-line);
  background:linear-gradient(122deg,color-mix(in srgb,var(--guide-accent) 12%,transparent),transparent 72%)}
#view-guides #guideTitle{font-size:clamp(1.8rem,5vw,3rem)}
.guide-reader-header .guide-intro{font-size:clamp(.94rem,2vw,1.12rem)}
.guide-reader-header .guide-meta{margin-top:1rem}
.guide-prose{--guide-size-base:1rem;min-width:0;overflow-wrap:anywhere;line-height:1.75;font-size:var(--guide-size-base);white-space:pre-wrap}
.guide-text{min-height:9rem;padding-block:clamp(1rem,3vw,2rem);padding-inline:var(--guide-reader-gutter)}
.guide-prose :where(p,blockquote,pre,ul,ol){margin:0 0 .85em}
.guide-prose :where(h2,h3){margin:1.35em 0 .5em;line-height:1.28}
.guide-prose :where(div,p,ul,ol,li,blockquote,pre){--guide-size-base:1rem}
.guide-prose :where(h2){--guide-size-base:1.45rem;font-size:var(--guide-size-base)}
.guide-prose :where(h3){--guide-size-base:1.2rem;font-size:var(--guide-size-base)}
.guide-prose :where(ul,ol){padding-inline-start:1.6em}
.guide-prose :where(ul){list-style:disc}
.guide-prose :where(ol){list-style:decimal}
.guide-prose :where(blockquote){padding:.25em .85em;border-inline-start:3px solid var(--accent,#6bddea)}
.guide-prose :where(pre){padding:.65em .85em;background:rgba(127,127,127,.12);border-radius:6px;white-space:pre-wrap}
.guide-prose :where(code){font-family:ui-monospace,Consolas,monospace}
.guide-prose :where(a){text-decoration:underline;text-underline-offset:.18em}
.guide-prose :where(img[data-guide-media]){display:block;width:auto;max-width:100%;height:auto;margin:.85rem auto;border-radius:.65rem}
.guide-prose .guide-font-sans{font-family:Arial,sans-serif}
.guide-prose .guide-font-serif{font-family:Georgia,serif}
.guide-prose .guide-font-mono{font-family:"Courier New",monospace}
.guide-prose .guide-font-rounded{font-family:"Trebuchet MS",sans-serif}
.guide-prose :is(.guide-size-normal,font[size="3"]){font-size:var(--guide-size-base)}
.guide-prose :is(.guide-size-small,font[size="2"]){font-size:calc(var(--guide-size-base) * .84)}
.guide-prose :is(.guide-size-large,font[size="5"]){font-size:calc(var(--guide-size-base) * 1.28)}
.guide-prose :is(.guide-size-xlarge,font[size="7"]){font-size:calc(var(--guide-size-base) * 1.58)}
.guide-prose .guide-align-left{text-align:left}
.guide-prose .guide-align-center{text-align:center}
.guide-prose .guide-align-right{text-align:right}
.guide-prose .guide-align-justify{text-align:justify}
.guide-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.guides-admin-status{margin:.8rem 0}
.guide-admin-list{display:grid;gap:.55rem;margin-bottom:1rem}
.guide-admin-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap;padding:.75rem 1rem}
.guide-admin-row>div:first-child{min-width:0;overflow-wrap:anywhere}
.guide-admin-row small{display:block;margin-top:.2rem}
.guides-editor fieldset{margin:0;padding:0;border:0;min-width:0}
.guides-editor label.field{display:grid;gap:.3rem}
.guides-editor .textarea{resize:vertical;width:100%}
.guide-editor-shell{border:1px solid var(--line,rgba(127,127,127,.35));border-radius:.7rem;overflow:hidden}
.guide-editor-toolbar{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;padding:.55rem;background:rgba(127,127,127,.09);border-bottom:1px solid var(--line,rgba(127,127,127,.35))}
.guide-tools{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;max-width:100%}
#guidesAdmin .guide-control,.guide-color{display:inline-flex;align-items:center;justify-content:center;min-height:2rem;padding:.22rem .48rem;border:1px solid var(--line,rgba(127,127,127,.38));border-radius:.4rem;color:inherit;background:rgba(127,127,127,.08);font:inherit;font-size:.8rem;cursor:pointer}
#guidesAdmin .guide-editor-toolbar select{appearance:auto!important;background-image:none!important;max-width:100%;padding-inline-end:.3rem}
#guidesAdmin .guide-control:hover{background:rgba(127,127,127,.2)}
.guide-color{display:inline-flex;gap:.3rem}
.guide-color input{width:1.25rem;height:1.15rem;padding:0;border:0;background:none;cursor:pointer}
.guide-editable{min-height:18rem;max-height:34rem;overflow:auto;padding:.85rem 1rem}
.guide-editable:focus{outline:2px solid var(--accent,#6bddea);outline-offset:-2px}
.guide-editable:empty::before{content:"Начни писать гайд…";opacity:.55;pointer-events:none}
.guide-editable img.guide-photo-selected{outline:2px solid var(--accent,#6bddea);outline-offset:3px}
.guide-image-controls{display:flex;gap:.35rem;flex-wrap:wrap;padding:.45rem;border-top:1px solid var(--line,rgba(127,127,127,.35))}
.guide-image-controls[hidden]{display:none}
.guide-editor-hint{color:var(--muted,inherit)}
@media(max-width:540px){
  .guides-filter{grid-template-columns:minmax(0,1fr)}
  .guide-card-footer{align-items:flex-start}
  .guide-reader-header{padding-block:1.25rem}
}

.guide-reactions:not(:empty){display:grid;gap:.65rem;padding:1rem var(--guide-reader-gutter);border-top:1px solid var(--guide-line)}
.guide-reactions-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem}
#view-guides .guide-reaction{display:inline-flex;align-items:center;gap:.45rem}
.guide-reaction svg{width:1.05rem;height:1.05rem;flex:none}
.guide-reaction[data-guide-reaction="-1"] svg{transform:rotate(180deg)}
.guide-reaction[data-guide-reaction="1"]{--guide-reaction-color:var(--green,#73f2a7)}
.guide-reaction[data-guide-reaction="-1"]{--guide-reaction-color:var(--danger,#ff728a)}
#view-guides .guide-reaction[aria-pressed="true"]{color:var(--guide-reaction-color);border-color:currentColor;background:color-mix(in srgb,var(--guide-reaction-color) 13%,transparent)}
#view-guides .guide-reaction[aria-disabled="true"]{cursor:default}
.guide-reaction b{font-variant-numeric:tabular-nums}
.guide-reactions p{margin:0;font-size:.85rem;color:var(--muted,inherit)}
.guide-reactions-login a{color:var(--guide-accent);text-decoration:underline}
.guide-reactions-feedback:empty{display:none}

#guidesAdmin .guide-editor-toolbar select{
  color-scheme:dark;
}
#guidesAdmin .guide-editor-toolbar select option{
  color:#f4f6fb;
  background:#181d27;
}
#guidesAdmin .guide-control[aria-pressed="true"]{
  background:rgba(127,127,127,.25);
  border-color:var(--accent,#6bddea);
}

.guide-prose :is(ul,ol){padding-inline-start:1.65em;list-style-position:outside}
.guide-prose :is(ul,ol) li,
.guide-prose :is(ul,ol) li :is(p,div){text-align:start!important}
.guide-prose li + li{margin-block-start:.35em}
.guide-color-tool,.guide-color-custom{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.35rem;max-width:100%}
.guide-color-menu{display:grid;gap:.35rem;padding:.35rem;background:var(--panel2,#181d27);border:1px solid var(--line,#3c525b);border-radius:.45rem}
.guide-color-menu[hidden]{display:none}
.guide-color-palette{display:flex;flex-wrap:wrap;gap:.25rem}
.guide-color-palette>button{display:inline-block;width:1.1rem;height:1.1rem;border-radius:.22rem;border:1px solid var(--line,#70838f);background:var(--guide-swatch)}
#guidesAdmin .guide-color-button{gap:.35rem}
#guidesAdmin .guide-color-button>span{width:1.1rem;height:1.1rem;border-radius:.22rem;border:1px solid var(--line,#70838f);background:var(--guide-swatch)}
.guide-color-plane{position:relative;display:block;height:7rem;border:1px solid var(--line,#3c525b);border-radius:.32rem;cursor:crosshair;touch-action:none;
  background:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,transparent),hsl(var(--guide-hue,0deg) 100% 50%)}
.guide-color-plane>span{position:absolute;left:var(--guide-saturation,0%);top:var(--guide-brightness,0%);width:.68rem;height:.68rem;border:2px solid #fff;
  border-radius:50%;box-shadow:0 0 0 1px #111;transform:translate(-50%,-50%);pointer-events:none}
.guide-color-hue{width:100%;margin:.18rem 0;accent-color:hsl(var(--guide-hue,0deg) 100% 50%)}
.guide-editable ::highlight(chillout-guide-live-color),
.guide-editable::highlight(chillout-guide-live-color){color:var(--guide-live-color)}
.guide-color-custom input{width:5.65rem;padding:.26rem .35rem;border:1px solid var(--line,#3c525b);border-radius:.3rem;background:var(--panel,#161b22);color:var(--text,#eefafa)}
#guidesAdmin .guide-actions .btn:disabled{opacity:.5;cursor:not-allowed}