/* Guida gestori ElleODM — stili SOLO della guida (bottone "?" + dialog).
 * Tutto scoped su .guida-help e #g-guide: NON tocca il layout del pannello.
 * Derivato dal pacchetto ChatGPT (design system ElleMultiverse). */
:root{--g-gradient:linear-gradient(110deg,#22D3EE,#3B82F6,#8B5CF6,#EC4899,#FB7185)}

/* Bottone "Guida / ?" nell'header */
.guida-help{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;background:#11132d;border:1px solid #434269;border-radius:50px;font-weight:500;color:#fff;cursor:pointer;font:inherit;font-size:13px}
.guida-help span{border:1px solid #9aa0c4;border-radius:50%;width:22px;height:22px;display:grid;place-items:center;flex:none}
.guida-help:hover{background:#1B1436;border-color:#22D3EE;box-shadow:0 0 24px #22d3ee18}
.guida-help:focus-visible{outline:2px solid #22D3EE;outline-offset:4px}

/* Dialog della guida */
#g-guide{color:#fff;background:#11132d;border:1px solid #434269;border-radius:24px;padding:0;width:620px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);box-shadow:0 32px 100px #0009;overflow:hidden}
#g-guide[open]{display:flex;flex-direction:column}
#g-guide::backdrop{background:#0a0716b8;backdrop-filter:blur(7px)}
#g-guide .g-top{display:flex;align-items:center;padding:24px 32px 20px;gap:16px}
#g-guide .g-section-label{font-size:10px;letter-spacing:.16em;font-weight:600;color:#9aa0c4}
#g-guide #g-count{margin-left:auto;color:#c9cce4;font-size:12px;white-space:nowrap}
#g-guide .g-close{width:36px;height:36px;background:transparent;border:1px solid #434269;border-radius:50%;font-size:24px;line-height:1;color:#fff;cursor:pointer;flex:none}
#g-guide .g-close:hover{border-color:#22D3EE}
#g-guide .g-progress{height:3px;background:#434269;margin:0 32px}
#g-guide #g-bar{display:block;height:100%;width:0;background:var(--g-gradient);transition:width 180ms}
#g-guide .g-scroll{padding:28px 32px 12px;overflow:auto;overscroll-behavior:contain;min-height:0}
#g-guide #g-title{font-size:29px;line-height:1.3;letter-spacing:-.7px;margin:16px 0 20px;outline:none;color:#fff}
#g-guide #g-body{font-size:14px;line-height:1.9;color:#c9cce4}
#g-guide #g-body p{margin:0 0 18px}
#g-guide #g-body strong{font-weight:600;color:#fff}
#g-guide #g-body em{font-size:12px;color:#9aa0c4}
#g-guide #g-body a{display:inline-block;text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere;color:#fff}
#g-guide #g-body ol{list-style:none;padding:0;margin:0 0 24px;counter-reset:tabs}
#g-guide #g-body li{border-bottom:1px solid #434269;padding:10px 0 10px 38px;position:relative;font-size:13px;line-height:1.7}
#g-guide #g-body li:before{counter-increment:tabs;content:counter(tabs,decimal-leading-zero);position:absolute;left:0;color:#9aa0c4;font-size:10px;top:13px}
#g-guide #g-visual{width:56px;height:56px;display:grid;place-items:center;border:1px solid #434269;border-radius:16px;background:linear-gradient(140deg,#22d3ee15,#8b5cf625,#ec489915);font-size:25px;color:#22D3EE}
#g-guide #g-visual.welcome{width:100%;height:72px;display:flex;justify-content:flex-start;background:transparent;border:0}
#g-guide #g-visual img{width:230px;max-width:100%;mix-blend-mode:screen}
#g-guide .g-license-pill{display:inline-flex;padding:6px 12px;border-radius:30px;border:1px solid #8B5CF6;background:#8b5cf61a;color:#c9cce4;font-size:11px;margin-top:20px}
#g-guide .g-availability{font-size:12px;margin-top:8px;color:#c9cce4}
#g-guide footer{padding:16px 32px 24px}
#g-guide .g-navigation{display:flex;gap:12px;justify-content:space-between}
#g-guide .g-navigation button{border-radius:12px;min-height:48px;padding:12px 24px;font-weight:600;font-size:13px;cursor:pointer;color:#fff;font-family:inherit}
#g-guide .g-primary{border:0;color:#0A0716;min-width:145px;background:var(--g-gradient)}
#g-guide .g-secondary{border:1px solid #434269;background:transparent}
#g-guide .g-secondary:hover{border-color:#9aa0c4}
#g-guide .g-navigation button:disabled{opacity:.4;cursor:default}
#g-guide .g-preferences{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #434269;margin-top:24px;padding-top:20px;gap:12px;font-size:11px;color:#9aa0c4}
#g-guide .g-preferences label{display:flex;gap:8px;align-items:center}
#g-guide .g-preferences input{accent-color:#22D3EE;width:16px;height:16px}
#g-guide .g-preferences button{border:0;background:transparent;padding:8px 0;color:#c9cce4;font-size:11px;cursor:pointer;font-family:inherit}
#g-guide .g-enter{animation:g-enter 180ms ease-out}
@keyframes g-enter{from{opacity:.2;transform:translateY(5px)}to{opacity:1;transform:none}}
#g-guide button:focus-visible{outline:2px solid #22D3EE;outline-offset:4px}

@media(max-width:600px){
  #g-guide{border-radius:16px}
  #g-guide .g-top{padding:18px 20px 14px;gap:10px}
  #g-guide .g-section-label{font-size:9px;letter-spacing:.1em}
  #g-guide .g-progress{margin:0 20px}
  #g-guide .g-scroll{padding:24px 20px 8px}
  #g-guide #g-title{font-size:25px;letter-spacing:-.6px}
  #g-guide #g-body{font-size:13px;line-height:1.85}
  #g-guide footer{padding:12px 20px 20px}
  #g-guide .g-navigation button{padding:12px 18px;min-width:0}
  #g-guide .g-preferences{font-size:10px;gap:6px}
  #g-guide .g-preferences button{font-size:10px}
  #g-guide #g-body li{font-size:12px}
  #g-guide #g-visual.welcome{height:56px}
  #g-guide #g-visual img{width:210px}
}
@media(prefers-reduced-motion:reduce){#g-guide *,#g-guide *::before,#g-guide *::after{animation:none!important;transition:none!important}}