/* АЛЬФА · стили перенесены из работающей версии (legacy/designer.html).
   Значения — переменные единого дизайн-кода, поэтому цвета, радиусы и
   шрифты берутся из гайдлайна, а раскладка остаётся прежней. */
  .sysdrop{position:relative}
  .sysdrop-btn{border:1.5px solid var(--line2);border-radius:var(--r);background:var(--card);
        padding:7px 14px;font-weight:600;color:var(--ink);display:flex;gap:10px;align-items:center}
  .sysdrop-btn i{font-style:normal;color:var(--ink3);font-size:11px}
  .sysdrop-btn:hover{border-color:var(--acc)}
  .sysdrop-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:270px;background:var(--card);
        border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:6px;
        display:none;z-index:60}
  .sysdrop.open .sysdrop-menu{display:block;animation:pop .12s ease-out}
  .sysdrop-menu button{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;
        border:none;background:none;border-radius:var(--r);padding:9px 12px}
  .sysdrop-menu button:hover{background:var(--acc-weak)}
  .sysdrop-menu button b{font-size:13.5px;color:var(--ink)}
  .sysdrop-menu button.on b{color:var(--acc-ink)}
  .sysdrop-menu button small{font-size:11.5px;color:var(--ink3)}
  /* --- Альфа --- */
  .acats{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
  .acat{border:1.5px solid var(--line2);border-radius:var(--r-l);padding:22px 14px 18px;background:var(--field);
        display:flex;flex-direction:column;align-items:center;gap:12px;min-height:214px;
        text-align:center;font-weight:600;color:var(--ink)}
  .acat:hover{background:var(--acc-weak);border-color:var(--acc);color:var(--acc-ink)}
  .acat.stub{opacity:.45;cursor:default}
  .acat.stub:hover{background:var(--field);border-color:var(--line2);color:var(--ink)}
  .acat small{display:block;font-weight:400;color:var(--ink3);font-size:10.5px;margin-top:1px}
  .acat .acat-pic{width:82px;height:98px;color:var(--ink3);flex:none;transition:color .15s, transform .2s}
  .acat:not(.stub):hover .acat-pic{color:var(--acc-ink);transform:translateY(-2px)}
  .acat .acat-name{font-weight:700;font-size:14px}
  /* холст: фиксированная высота отображения */
  /* гало-панель над выбранным модулем (как selection toolbar в фигме) */
  /* карточка настроек модуля */
  #alphaScene{position:relative}
  .ahalo{position:absolute;z-index:60;width:236px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
        box-shadow:0 14px 34px rgba(0,0,0,.28)}
  .ahalo .aht{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;cursor:grab;
        background:var(--field2);border-bottom:1px solid var(--line);
        border-radius:var(--r) var(--r) 0 0}
  .ahalo .aht:active{cursor:grabbing}
  .ahalo .aht b{font-size:12px;color:var(--ink);flex:1;white-space:nowrap;overflow:hidden;
        text-overflow:ellipsis;pointer-events:none}
  .ahalo .aht .grip{display:flex;gap:2.5px;pointer-events:none}
  .ahalo .aht .grip i{width:3px;height:3px;border-radius:50%;background:var(--ink3);display:block}
  .ahalo .ahx{border:none;background:none;color:var(--ink3);font-size:14px;border-radius:var(--r-s);
        width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;flex:none}
  .ahalo .ahx:hover{background:var(--danger-weak);color:var(--danger)}
  .ahalo .ahrows{padding:9px 10px 10px;display:flex;flex-direction:column;gap:8px}
  .ahalo .ahdim{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .ahalo .hd{display:flex;align-items:center;gap:6px;border:1px solid var(--line2);
        border-radius:var(--r-s);background:var(--field);padding:4px 8px}
  .ahalo .hd label{font-size:9.5px;color:var(--ink3);font-weight:800;letter-spacing:.03em;flex:none}
  .ahalo .hd input{width:100%;min-width:0;border:none;background:none;color:var(--ink);
        font-family:var(--mono);font-size:12px;text-align:right}
  .ahalo .hd input:focus{outline:none}
  .ahalo .ahcnt{display:flex;align-items:center;justify-content:space-between;gap:6px;
        border:1px solid var(--line2);border-radius:var(--r-s);padding:3px 6px;background:var(--card)}
  .ahalo .ahcnt span{font-size:11px;color:var(--ink2)}
  .ahalo .ahcnt b{font-family:var(--mono);color:var(--ink)}
  /* ± кружок — единый компонент, работает в любом контейнере */
  .pm{background:var(--field2);width:22px;height:22px;border-radius:50%;border:1px solid var(--line2);
        color:var(--acc-ink);font-size:12px;line-height:1;padding:0;flex:none;
        display:inline-flex;align-items:center;justify-content:center}
  .pm:hover{background:var(--acc-weak);border-color:var(--acc)}
  .ahalo .ahacts{display:flex;gap:5px}
  .ahalo .hbtn{flex:1;border:1px solid var(--line2);background:var(--card);color:var(--ink2);
        border-radius:var(--r-s);height:30px;display:inline-flex;align-items:center;justify-content:center}
  .ahalo .hbtn:hover{background:var(--acc-weak);border-color:var(--acc);color:var(--acc-ink)}
  .ahalo .hbtn.on{background:var(--acc-weak);border-color:var(--acc);color:var(--acc-ink)}
  .ahalo .hbtn.danger:hover{background:var(--danger-weak);border-color:var(--danger);color:var(--danger)}
  /* поповер материалов из гало */
  .ahpop{position:absolute;z-index:59;background:var(--card);border:1px solid var(--line);
        border-radius:var(--r);padding:12px;box-shadow:var(--shadow);width:236px}
  .ahpop .f{margin-bottom:8px}
  .ahpop label.chk{display:flex;gap:8px;align-items:center;font-size:12.5px;cursor:pointer;margin:6px 0}
  /* панель спецификации */
  .aspecbar{display:flex;gap:18px;flex-wrap:wrap;padding:11px 18px;border-top:1px solid var(--line);
        background:var(--card);font-size:12px;color:var(--ink2)}
  .aspecbar b{color:var(--ink);font-family:var(--mono);font-weight:600}
  .aspecbar .si{display:flex;gap:6px;align-items:baseline}
  /* Альфа v3 */
  .a3top{display:flex;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);
        background:var(--card);flex-wrap:wrap}
  .a3tools{display:flex;gap:4px;align-items:center}
  .a3tools button{border:1px solid var(--line2);border-radius:var(--r-s);background:var(--card);
        width:32px;height:30px;color:var(--ink2);display:inline-flex;align-items:center;justify-content:center}
  .a3tools button:hover{border-color:var(--acc);color:var(--acc-ink);background:var(--acc-weak)}
  .a3sep{width:1px;height:22px;background:var(--line);margin:0 6px}
  .a3lab{font-size:11px;color:var(--ink3);font-weight:700;margin-right:2px}
  .a3body{display:flex;align-items:stretch;height:min(62vh,640px)}
  .azv{width:44px;border:none;background:none;text-align:center;font-family:var(--mono);
        font-size:12.5px;color:var(--ink);padding:4px 0;border-radius:8px}
  .azv:hover, .azv:focus{background:var(--acc-weak);outline:none}
  #alphaScene:fullscreen .actrow{display:none!important}
  #alphaScene:fullscreen{border-radius:0}
  .a3canvas{position:relative;flex:1;overflow:auto;display:grid;
        background:radial-gradient(circle at 30% 20%, #F2F0EA 0%, #E7E4DC 100%)}
  .a3canvas>svg{margin:auto}     /* малый контент — по центру, крупный — скроллится без обрезки */
  [data-theme="dark"] .a3canvas{background:radial-gradient(circle at 30% 20%, #2E2C28 0%, #232220 100%)}
  .a3canvas svg{display:block}
  #aControls{position:absolute;inset:0;pointer-events:none}
  #aControls>*{pointer-events:auto;position:absolute}
  .a3side{width:232px;flex:none;border-left:1px solid var(--line);background:var(--card);
        display:flex;flex-direction:column;overflow:hidden}
  .a3side-t{padding:11px 14px;font-size:11px;font-weight:800;letter-spacing:.06em;
        text-transform:uppercase;color:var(--acc-ink);border-bottom:1px solid var(--line)}
  #aCatalog{overflow-y:auto;flex:1;padding:6px}
  .ct-head{padding:8px;border-bottom:1px solid var(--line);background:var(--field2);
        display:flex;flex-direction:column;gap:6px}
  .ct-tabs{display:flex;gap:4px}
  .ct-tabs button{flex:1;border:1px solid var(--line2);border-radius:var(--r-s);background:var(--card);
        padding:7px 0;font-size:12px;font-weight:700;color:var(--ink2)}
  .ct-tabs button.on{background:var(--acc);border-color:var(--acc);color:#fff}
  .ct-tabs button:not(.on):hover{border-color:var(--acc);color:var(--acc-ink)}
  .ct-grid{display:grid;gap:6px;padding:8px;overflow:hidden}
  .ct-card{min-width:0;overflow:hidden}
  .ct-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;
        padding:8px 12px;border-top:1px solid var(--line);font-size:10.5px;color:var(--ink3);
        margin-top:auto}
  .ct-card{border:1px solid var(--line2);border-radius:var(--r-s);background:var(--card);
        padding:7px 5px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:grab}
  .ct-card:hover{border-color:var(--acc);background:var(--acc-weak)}
  .ct-pic{display:flex;align-items:center;justify-content:center}
  .ct-nm{font-size:10.5px;color:var(--ink2);text-align:center;line-height:1.25}
  .ct-card:hover .ct-nm{color:var(--acc-ink)}
  .ct-size{display:flex;gap:4px;justify-content:flex-end}
  .ct-size button{border:1px solid var(--line2);border-radius:var(--r-s);background:var(--card);
        width:26px;height:24px;display:inline-flex;align-items:center;justify-content:center}
  .ct-size button i{display:block;border:1.6px solid currentColor;border-radius:2.5px;color:var(--ink3)}
  .ct-size button.on{border-color:var(--acc);background:var(--acc-weak)}
  .ct-size button.on i{color:var(--acc-ink)}
  .a3walls{display:flex;flex-direction:column;gap:8px;margin-top:4px}
  .a3wall{border:1px solid var(--line);border-radius:var(--r);background:var(--field2);padding:10px 12px}
  .a3wall-t{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
        color:var(--acc-ink);margin-bottom:7px;display:flex;justify-content:space-between;align-items:center}
  .panel.setpage{width:min(1060px,97vw);height:min(86vh,780px);overflow:hidden;display:flex;flex-direction:column}
  .setgrid{display:grid;grid-template-columns:220px 1fr;gap:0;flex:1;min-height:0}
  .setnav{display:flex;flex-direction:column;gap:4px;padding-right:16px;border-right:1px solid var(--line)}
  .setnav button{text-align:left;border:none;background:none;padding:11px 14px;border-radius:var(--r);
        font-size:13.5px;font-weight:600;color:var(--ink2);cursor:pointer}
  .setnav button:hover{background:var(--field2);color:var(--ink)}
  .setnav button.on{background:var(--acc-weak);color:var(--acc-ink)}
  .setbody{overflow:auto;padding:2px 4px 8px 22px}
  .ahmats{border-top:1px solid var(--line);margin-top:8px;padding-top:8px;
        display:flex;flex-direction:column;gap:7px;max-height:46vh;overflow:auto}
  .ahpop.agroup{position:absolute;z-index:32;width:250px;background:var(--card);border:1px solid var(--line);
        border-radius:var(--r-l);box-shadow:0 16px 46px rgba(0,0,0,.22);padding:14px 16px}
  .agroup .ah-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px}
  .agroup .hd{display:flex;flex-direction:column;gap:3px}
  .agroup .hd label{font-size:10px;color:var(--ink3);font-weight:700}
  .agroup .hd input{width:100%;border:1px solid var(--line2);border-radius:var(--r-s);
        padding:7px 8px;font-family:var(--mono);text-align:right;background:var(--field)}
  .agroup .ah-slot{margin-bottom:8px}
  .agroup .ah-slot>label{font-size:10px;color:var(--ink3);font-weight:700;display:block;margin-bottom:3px}
  .spf{width:84px;height:26px;border:1.5px solid var(--acc);border-radius:8px;background:var(--card);
        font-family:var(--mono);font-size:12.5px;text-align:center;outline:none;
        box-shadow:0 4px 12px rgba(0,0,0,.18);padding:0 6px;box-sizing:border-box}
  .a3wall{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
  .a3wall .a3wall-t{grid-column:1/-1;margin-bottom:0}
  .a3wall label{font-size:11px;color:var(--ink3);display:flex;flex-direction:column;gap:3px;min-width:0}
  .a3wall input{border:1px solid var(--line2);border-radius:var(--r-s);background:var(--field);padding:9px 10px;font-family:var(--mono);text-align:right;width:100%;min-width:0}
  .a3bottom{display:flex;gap:6px;align-items:center;justify-content:center;padding:9px 14px;
        border-top:1px solid var(--line);background:var(--card)}
  .a3bottom button{border:1px solid var(--line2);border-radius:var(--r-l);background:var(--card);
        padding:6px 16px;font-size:12.5px;font-weight:600;color:var(--ink2)}
  .a3bottom button.on{background:var(--acc);border-color:var(--acc);color:#fff}
  .a3bottom button:not(.on):hover{border-color:var(--acc);color:var(--acc-ink)}
  #alphaScene:fullscreen{display:flex;flex-direction:column;border-radius:0;overflow:auto;background:var(--bg)}
  #alphaScene:fullscreen .a3body{flex:1;height:auto;min-height:0}
  .a3zoom{display:flex;gap:2px;align-items:center;border:1px solid var(--line2);
        border-radius:var(--r-s);background:var(--card);padding:2px}
  .a3zoom button{border:none;background:none;width:26px;height:26px;border-radius:calc(var(--r-s) - 2px);
        color:var(--ink2);font-size:14px;display:inline-flex;align-items:center;justify-content:center}
  .a3zoom button:hover{background:var(--acc-weak);color:var(--acc-ink)}
  .a3zoom span{font-family:var(--mono);font-size:11px;color:var(--ink3);min-width:40px;text-align:center}
  .a3canvas{background-image:radial-gradient(var(--line) 1px, transparent 1px);
        background-size:26px 26px}
  .actx{position:fixed;z-index:400;min-width:190px;background:var(--card);border:1px solid var(--line);
        border-radius:var(--r);box-shadow:var(--shadow);padding:5px;animation:pop .1s ease-out}
  .actx button{display:block;width:100%;text-align:left;border:none;background:none;
        border-radius:var(--r-s);padding:8px 12px;font-size:12.5px;color:var(--ink)}
  .actx button:hover{background:var(--acc-weak);color:var(--acc-ink)}
  .actx button.danger{color:var(--danger)}
  .actx button.danger:hover{background:var(--danger-weak)}
  .a3pop{position:absolute;left:14px;top:52px;z-index:9;width:428px;background:var(--card);
        border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow);padding:14px 16px}
  .a3pop-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
  .a3pop-h b{font-size:13.5px}
  .a3pop-x{border:none;background:none;font-size:17px;color:var(--ink3);border-radius:var(--r-s);
        padding:2px 8px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
  .a3pop-x:hover{background:var(--danger-weak);color:var(--danger)}
  .a3pop-svg{display:block;margin:0 auto 8px;background:var(--field2);border:1px solid var(--line);
        border-radius:var(--r)}
  .a3pop .wl{fill:var(--ink3)}
  .a3pop .wt{fill:var(--ink2);font-size:11px;font-family:var(--mono)}
  .a3pop .spadd circle{fill:var(--acc-weak);stroke:var(--acc);stroke-width:1.5;cursor:pointer}
  .a3pop .spadd path{stroke:var(--acc-ink);stroke-width:2;stroke-linecap:round;pointer-events:none}
  .a3pop .spadd:hover circle{fill:var(--acc)}
  .a3pop .spadd:hover path{stroke:#fff}
  .spx{border:none;background:var(--danger-weak);color:var(--danger);border-radius:50%;
        width:24px;height:24px;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
  .spx:hover{background:var(--danger);color:#fff}
  .a3pop-hint{font-size:10.5px;color:var(--ink3);margin-top:8px}
  #aSvg g[data-uid]{transition:transform .16s ease}
  #aSvg g[data-uid].dragging{transition:none;opacity:.5;cursor:grabbing}
  /* --- Альфа --- */
  .acats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .acat{border:1px solid var(--line2);border-radius:var(--r);background:var(--field);padding:16px 10px;
        text-align:center;font-weight:600;color:var(--ink2)}
  .acat.avail{color:var(--acc-ink);cursor:pointer}
  .acat.avail:hover{background:var(--acc-weak);border-color:var(--acc)}
  .acat .soon{display:block;font-weight:400;font-size:11px;color:var(--ink3);margin-top:3px}
  .arow-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);
        font-weight:700;margin:12px 0 6px}
  .arow{display:flex;align-items:flex-end;gap:4px;min-height:100px;padding:8px;
        background:var(--field2);border:1px dashed var(--line2);border-radius:var(--r);overflow-x:auto}
  .aplus{width:30px;height:30px;border-radius:50%;border:1.5px dashed var(--line2);background:var(--field);
        color:var(--ink3);font-size:17px;line-height:1;flex:none;align-self:center}
  .aplus:hover{border-color:var(--acc);color:var(--acc-ink);background:var(--acc-weak)}
  .amod{position:relative;flex:none;cursor:pointer;border-radius:var(--r-s)}
  .amod:hover{outline:2px solid var(--acc-weak)}
  .amod.sel{outline:2px solid var(--acc)}
  .amod svg{display:block}
  .amod .cap{font-size:10px;color:var(--ink3);text-align:center;font-family:var(--mono)}
  .aspec{position:fixed;top:0;right:0;bottom:0;width:320px;background:var(--field);z-index:75;
        border-left:1px solid var(--line);box-shadow:var(--shadow);padding:20px;overflow-y:auto;
        transform:translateX(105%);transition:transform .2s}
  .aspec.on{transform:none}
  .aspec h3{font-size:15px;margin-bottom:12px;display:flex;justify-content:space-between}
  .aspec .x{border:none;background:none;font-size:18px;color:var(--ink3)}
  .aspec .dims{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
  .aspec .btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}



/* Список изделий: карточки одной рамкой и одним скруглением с прочими
   карточками программы. Пока редактор дописывается, они показывают,
   что будет, но внутрь не ведут. */
  .acats{gap:var(--sp-150)}
  .acat{border:1px solid var(--line);border-radius:var(--r);background:var(--a-100);
        padding:var(--sp-175) var(--sp-125) var(--sp-150);min-height:196px;
        gap:var(--sp-125);color:var(--ink2);cursor:default}
  .acat:hover{background:var(--a-200);border-color:var(--line2);color:var(--ink2)}
  .acat:not(.stub):hover .acat-pic{color:var(--ink3);transform:none}
  .acat .acat-name{font-size:13.5px;color:var(--ink)}
  .acat small{color:var(--ink3)}
  .acat.stub{opacity:.55}