/* ============ ОВЕРЛЕИ / НАСТРОЙКИ ============ */
.overlay{position:fixed;inset:0;z-index:220;display:none;place-items:center;background:rgba(8,10,14,.35);backdrop-filter:blur(8px)}
.overlay.show{display:grid}
.modal{width:min(760px,94vw);height:min(560px,86vh);display:flex;border-radius:28px;overflow:hidden;
  background:color-mix(in srgb,var(--side-base) 80%,transparent);backdrop-filter:blur(30px);border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.4)}
.set-nav{width:210px;border-right:1px solid var(--line);padding:16px 10px;display:flex;flex-direction:column;gap:4px}
.set-nav button{display:flex;gap:10px;align-items:center;padding:11px 14px;border-radius:12px;font-size:13.5px;color:var(--dim);text-align:left}
.set-nav button:hover{background:var(--hover)} .set-nav button.on{background:var(--active);color:var(--text)}
.set-body{flex:1;overflow-y:auto;padding:24px 28px}
.set-body section{display:none;flex-direction:column;gap:6px}
.set-body section.on{display:flex}
.set-body h2{font-size:18px;font-weight:600;margin-bottom:10px}
.frow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.frow b{color:var(--dim);font-weight:500}
input[type=range]{accent-color:var(--accent);width:170px}
.seg{display:flex;background:var(--hover);border-radius:12px;padding:3px}
.seg button{padding:7px 14px;border-radius:9px;font-size:12.5px;color:var(--dim)}
.seg button.on{background:var(--active);color:var(--text)}
.swatches{display:flex;gap:10px}
.swatches button{width:26px;height:26px;border-radius:50%;background:var(--c);border:2px solid transparent}
.swatches button.on{border-color:var(--text)}
.sw{width:44px;height:26px;border-radius:13px;background:var(--hover);position:relative;transition:.2s;flex:none;cursor:pointer}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}
.sw.on{background:var(--accent)} .sw.on::after{left:21px}
.textin{background:var(--hover);border-radius:12px;padding:10px 14px;font-size:13.5px;width:220px}
.btn-ghost{padding:10px 18px;border-radius:14px;border:1px solid var(--line);font-size:13px;font-weight:600}
.btn-ghost:hover{background:var(--hover)}
.modal-sm{width:min(360px,92vw);border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:14px;
  background:color-mix(in srgb,var(--side-base) 86%,transparent);backdrop-filter:blur(30px);border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.4)}
.modal-sm h2{font-size:17px}
.modal-sm .textin{width:100%}
.emoji-row{display:flex;gap:8px;flex-wrap:wrap}
.emoji-row button{width:38px;height:38px;border-radius:12px;font-size:18px;background:var(--hover)}
.emoji-row button.on{background:var(--active);outline:2px solid var(--accent)}
.hidden{display:none!important}