/* =====================================================================
   Paint (online_paint) — стили. Каркас Bootstrap + локальные токены НА .opt;
   сайтовые токены/шапку/меню/H1 не трогаем (см. image_tools.md, _common.md).
   Концепция [[toolster-paint-trio]]: классический оконный вид Paint —
   тулбокс слева, палитра снизу (двухрядная, два рабочих цвета).
   ===================================================================== */

.opt {
    --opt-bar:      #eef0f3;   /* панели */
    --opt-bar2:     #f7f8fa;
    --opt-border:   #c9ccd2;
    --opt-ink:      #2b2f38;
    --opt-active:   #d7e3fb;   /* подсветка активной кнопки (оконный синий) */
    --opt-accent:   #3f48cc;
    --opt-stage-bg: #9aa0aa;   /* серый фон вокруг белого холста (как в Paint) */
    --opt-muted:    #6b7280;
    --opt-grip:     #b9bcc4;
    --opt-radius:   12px;
    --opt-radius-sm:9px;
    --opt-radius-xs:7px;

    max-width: 1040px;
    margin-inline: auto;
    background: #fff;
    border: 1px solid var(--opt-border);
    border-radius: var(--opt-radius);
    box-shadow: 0 2px 14px rgba(20, 30, 60, .06);
    padding: 14px;
    color: var(--opt-ink);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    line-height: 1.4;
}
.opt *, .opt *::before, .opt *::after { box-sizing: border-box; }

/* focus: убрать ring при мыши, аккуратный — с клавиатуры (CLAUDE.md) */
.opt button:focus, .opt .opt__select:focus, .opt .opt__grip:focus { outline: none; box-shadow: none; }
.opt button:focus-visible, .opt .opt__select:focus-visible, .opt .opt__grip:focus-visible {
    outline: 2px solid var(--opt-accent); outline-offset: 2px;
}

/* =====================================================================
   ВЕРХНЯЯ ПАНЕЛЬ
   ===================================================================== */
.opt__top {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    padding: 7px 8px; margin-bottom: 10px;
    background: var(--opt-bar); border: 1px solid var(--opt-border); border-radius: var(--opt-radius-sm);
}
.opt__group { display: inline-flex; align-items: center; gap: 4px; }
.opt__cap { font-size: .8rem; font-weight: 600; color: var(--opt-muted); margin-right: 2px; }

.opt__act {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 34px; height: 34px; padding: 0 9px;
    border: 1px solid var(--opt-border); background: #fff; color: var(--opt-ink);
    border-radius: var(--opt-radius-xs); cursor: pointer; font-weight: 600; font-size: .9rem;
}
.opt__act i { font-size: 1.02rem; }
.opt__act:hover { background: var(--opt-bar2); }
.opt__act:disabled { opacity: .4; cursor: default; }
.opt__act:disabled:hover { background: #fff; }
.opt__act--save { margin-left: auto; background: var(--opt-active); border-color: #9db8ef; }
.opt__act--save:hover { background: #c5d6fb; }

/* размер линии */
.opt__size {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--opt-border); background: #fff; border-radius: var(--opt-radius-xs); cursor: pointer;
}
.opt__size:hover { background: var(--opt-bar2); }
.opt__size.is-active { background: var(--opt-active); border-color: #9db8ef; }
.opt__bar { display: block; width: 22px; height: var(--h); max-height: 14px; background: var(--opt-ink); border-radius: 2px; }

/* стиль фигур / размер текста */
.opt__shape-btn {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--opt-border); background: #fff; border-radius: var(--opt-radius-xs); cursor: pointer; color: var(--opt-ink);
}
.opt__shape-btn:hover { background: var(--opt-bar2); }
.opt__shape-btn.is-active { background: var(--opt-active); border-color: #9db8ef; }
.opt__textsize { margin: 0; }
.opt__select {
    width: auto; min-width: 64px; padding: 5px 26px 5px 9px; font-size: .88rem; font-weight: 600;
    border-radius: var(--opt-radius-xs); border: 1px solid var(--opt-border); color: var(--opt-ink); background-color: #fff;
}

/* режим экрана */
.opt__screen-btn {
    width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--opt-border); background: #fff; color: var(--opt-ink);
    border-radius: var(--opt-radius-xs); cursor: pointer;
}
.opt__screen-btn:hover { background: var(--opt-bar2); }
.opt__screen-btn.is-active { background: var(--opt-active); border-color: #9db8ef; }

/* =====================================================================
   ОСНОВНАЯ ОБЛАСТЬ: тулбокс + холст
   ===================================================================== */
.opt__main { display: flex; gap: 10px; align-items: stretch; }

.opt__tools {
    flex: 0 0 auto;
    display: grid; grid-template-columns: repeat(2, 36px); gap: 5px; align-content: start;
    padding: 7px; background: var(--opt-bar); border: 1px solid var(--opt-border); border-radius: var(--opt-radius-sm);
}
.opt__tool {
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; background: #fff; color: var(--opt-ink);
    border-radius: var(--opt-radius-xs); cursor: pointer;
}
.opt__tool i { font-size: 1.05rem; }
.opt__tool:hover { background: var(--opt-bar2); border-color: var(--opt-border); }
.opt__tool.is-active { background: var(--opt-active); border-color: #9db8ef; }

/* холст */
.opt__stage {
    flex: 1 1 auto;
    display: flex; justify-content: center; align-items: flex-start;
    overflow: auto; background: var(--opt-stage-bg);
    border: 1px solid var(--opt-border); border-radius: var(--opt-radius-sm);
    padding: 18px; min-height: 320px;
}
.opt__wrap { position: relative; flex: 0 0 auto; box-shadow: 0 3px 16px rgba(0, 0, 0, .28); }
.opt__layer { position: absolute; top: 0; left: 0; }
.opt__layer--main { z-index: 1; background: #fff; touch-action: none; cursor: crosshair; }
.opt__layer--preview { z-index: 2; pointer-events: none; }

/* инлайн-редактор текста */
.opt__textbox {
    position: absolute; z-index: 4; min-width: 60px; min-height: 1.4em;
    margin: 0; padding: 1px 2px; border: 1px dashed var(--opt-accent); background: rgba(255,255,255,.6);
    resize: both; overflow: hidden; line-height: 1.25; outline: none; white-space: pre;
}

/* хваталки */
.opt__grip {
    position: absolute; z-index: 5; background: var(--opt-grip); border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3); opacity: .7; transition: opacity .12s ease, background .12s ease;
}
.opt__grip:hover, .opt__grip:focus-visible { opacity: 1; background: var(--opt-accent); }
.opt__grip--se { width: 16px; height: 16px; right: -9px; bottom: -9px; border-radius: 5px; cursor: nwse-resize; }
.opt__grip--e  { top: 50%; right: -8px; width: 12px; height: 46px; transform: translateY(-50%); border-radius: 6px; cursor: ew-resize; }
.opt__grip--s  { left: 50%; bottom: -8px; width: 46px; height: 12px; transform: translateX(-50%); border-radius: 6px; cursor: ns-resize; }
.opt.is-drawing .opt__grip { opacity: 0; pointer-events: none; }
.opt.is-resizing .opt__grip { opacity: 1; background: var(--opt-accent); }
.opt.is-resizing { cursor: nwse-resize; user-select: none; }

/* =====================================================================
   ПАЛИТРА
   ===================================================================== */
.opt__palette {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
    margin-top: 10px; padding: 8px 10px;
    background: var(--opt-bar); border: 1px solid var(--opt-border); border-radius: var(--opt-radius-sm);
}
/* индикатор двух цветов (наложение) */
.opt__active { position: relative; width: 44px; height: 44px; flex: 0 0 auto; }
.opt__active-pri, .opt__active-sec {
    position: absolute; width: 28px; height: 28px; border: 1px solid #00000040; border-radius: 4px;
}
.opt__active-pri { top: 0; left: 0; z-index: 2; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.opt__active-sec { bottom: 0; right: 0; z-index: 1; }

.opt__swatches { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.opt__swatch {
    width: 22px; height: 22px; padding: 0; cursor: pointer;
    border: 1px solid #00000035; border-radius: 3px; background: var(--sw, #000);
    display: inline-flex; align-items: center; justify-content: center;
}
.opt__swatch:hover { outline: 2px solid var(--opt-accent); outline-offset: 1px; }
.opt__swatch--custom { position: relative; background: #fff; color: var(--opt-ink); overflow: hidden; }
.opt__swatch--custom i { font-size: .75rem; }
.opt__color-input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; }
.opt__color-hint { flex: 1 1 180px; margin: 0; font-size: .78rem; color: var(--opt-muted); }

/* подсказка под рабочей зоной */
.opt__hint { margin: 8px 2px 0; font-size: .8rem; color: var(--opt-muted); text-align: center; }

/* =====================================================================
   ШИРОКИЙ / ФУЛЛСКРИН
   ===================================================================== */
.opt[data-screen="theater"] {
    width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    border-radius: 0; border-left: 0; border-right: 0; padding-inline: clamp(12px, 4vw, 48px);
}
.opt[data-screen="theater"] .opt__stage { min-height: 60vh; }

.opt:fullscreen {
    width: 100vw; height: 100vh; max-width: none; margin: 0; padding: 12px;
    border-radius: 0; border: 0; background: #fff; display: flex; flex-direction: column;
}
.opt:fullscreen .opt__top { position: sticky; top: 0; z-index: 10; }
.opt:fullscreen .opt__main { flex: 1 1 auto; min-height: 0; }
.opt:fullscreen .opt__hint { display: none; }

/* =====================================================================
   МОБАЙЛ — тулбокс горизонтально над холстом
   ===================================================================== */
@media (max-width: 620px) {
    .opt { padding: 10px; }
    .opt__main { flex-direction: column; }
    .opt__tools { grid-template-columns: repeat(8, 1fr); width: 100%; }
    .opt__act--save { margin-left: auto; }
    .opt__cap { display: none; }
    .opt__stage { padding: 12px; }
}
@media (max-width: 420px) {
    .opt__tools { grid-template-columns: repeat(6, 1fr); }
    .opt__swatches { grid-template-columns: repeat(10, 1fr); }
    .opt__swatch { width: 100%; height: 22px; }
}