UI update

src/lib/pages/print/GearOption.svelte

@@ -0,0 +1,111 @@
+<!--
+  Кнопка «настроить»: текущее значение + шестерёнка справа от текста.
+  Не циклит значение сама — клик открывает интерфейс выбора (onclick).
+  Внешне — родня cycle-кнопки (та же ДНК toggle-btn).
+-->
+<script>
+  let {
+    value = '',          // отображаемый текст («Все страницы», «Авто (A4)»…)
+    hint = '',
+    disabled = false,
+    open = false,        // подсветка, пока её интерфейс открыт
+    onclick = null,
+  } = $props();
+
+  let helpOpen = $state(false);
+</script>
+
+<div class="gear-wrap" class:disabled>
+  <button
+    type="button"
+    class="gear-btn"
+    class:open
+    disabled={disabled}
+    onclick={() => {
+      helpOpen = false;
+      onclick?.();
+    }}
+  >
+    <span class="val">{value}</span>
+    <svg
+      class="icon"
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="12" cy="12" r="3" />
+      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+    </svg>
+  </button>
+
+  {#if hint}
+    <div class="help">
+      <button
+        type="button"
+        class="help-btn"
+        aria-label={'Подсказка'}
+        onclick={() => (helpOpen = !helpOpen)}
+      >?</button>
+      {#if helpOpen}
+        <div class="tip" role="tooltip">{hint}</div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .gear-wrap { position: relative; flex: 1; min-width: 0; }
+  .gear-wrap.disabled { opacity: 0.45; pointer-events: none; }
+
+  .gear-btn {
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 12px 10px;
+    border-radius: 14px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(255, 255, 255, 0.05);
+    color: #f5f7fa;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.18s ease, border-color 0.18s ease;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+  .gear-btn:hover { background: rgba(99, 102, 241, 0.15); border-color: rgba(99, 102, 241, 0.5); }
+  .gear-btn.open { background: rgba(99, 102, 241, 0.2); border-color: #6366f1; }
+
+  .val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+  .icon {
+    flex: 0 0 auto;
+    color: rgba(139, 147, 161, 0.75);
+    transition: color 0.18s ease, transform 0.3s ease;
+  }
+  .gear-btn:hover .icon { color: #a5b4fc; transform: rotate(60deg); }
+
+  .help { position: absolute; top: -9px; right: 3px; z-index: 6; }
+  .help-btn {
+    width: 16px; height: 16px; border: none; border-radius: 50%;
+    background: transparent; color: rgba(139, 147, 161, 0.7);
+    font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer;
+    transition: color 0.2s; padding: 0;
+  }
+  .help-btn:hover, .help-btn:focus-visible { color: #c7cdd8; }
+  .tip {
+    position: absolute; right: -3px; top: calc(100% + 8px); z-index: 40;
+    width: max-content; max-width: 240px; padding: 10px 12px; border-radius: 10px;
+    background: #16171d; border: 1px solid rgba(255, 255, 255, 0.08);
+    color: #9ca3af; font-size: 13px; line-height: 140%; text-align: left;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+  }
+</style>