:root{
  --bg:#f3f0fb; --bg2:#e9e3f9; --panel:#ffffff; --panel2:#f7f5fe; --ink:#1b1630; --dim:#6c6688;
  --line:rgba(124,92,255,.13); --accent:#7C5CFF; --accent2:#FF6FD8; --accent3:#3FD6C2;
  --shadow:0 14px 40px rgba(124,92,255,.13); --radius:20px;
}
body[data-theme="dark"]{
  --bg:#0e0b1e; --bg2:#15102b; --panel:#1a1533; --panel2:#211a3e; --ink:#f2eeff; --dim:#a8a2c8;
  --line:rgba(255,255,255,.08); --shadow:0 14px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:'Inter',system-ui,sans-serif;color:var(--ink);
  background:linear-gradient(160deg,var(--bg),var(--bg2));
  min-height:100dvh;overflow-x:hidden;position:relative;transition:background .4s,color .3s;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font-family:inherit;}

/* фоновые пятна */
.bg-blobs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;filter:blur(70px);opacity:.5;}
.bg-blobs span{position:absolute;border-radius:50%;}
.bg-blobs span:nth-child(1){width:340px;height:340px;background:var(--accent);top:-90px;left:-60px;}
.bg-blobs span:nth-child(2){width:300px;height:300px;background:var(--accent2);top:32%;right:-80px;}
.bg-blobs span:nth-child(3){width:280px;height:280px;background:var(--accent3);bottom:-90px;left:30%;}

.top,.layout{position:relative;z-index:1;}

/* ===== header ===== */
.top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 22px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:12px;min-width:0;}
.logo{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 8px 20px rgba(124,92,255,.4);}
.logo svg{display:block;border-radius:13px;}
.logo .lb{transform-box:fill-box;transform-origin:center;animation:logoEq 1.1s ease-in-out infinite;}
.logo .lb2{animation-delay:.18s;}.logo .lb3{animation-delay:.36s;}
@keyframes logoEq{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.search-ic{stroke:var(--dim);fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0;opacity:.8;}
.brand-t{display:flex;flex-direction:column;line-height:1.15;min-width:0;}
.brand-t b{font-size:18px;font-weight:800;letter-spacing:-.4px;}
.brand-t small{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.top-r{display:flex;align-items:center;gap:10px;flex:1;justify-content:flex-end;min-width:0;}
.search-wrap{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:99px;background:var(--panel);
  border:1px solid var(--line);box-shadow:var(--shadow);transition:box-shadow .3s;min-width:0;flex:1;max-width:340px;}
.search-wrap:focus-within{box-shadow:0 0 0 4px rgba(124,92,255,.18);}
.search-wrap span{opacity:.6;font-size:14px;flex-shrink:0;}
.search-wrap input{border:none;outline:none;background:transparent;font:500 14.5px 'Inter';color:var(--ink);width:100%;min-width:0;}
.search-wrap input::placeholder{color:var(--dim);}
.ghost-btn{width:44px;height:44px;border-radius:13px;border:1px solid var(--line);background:var(--panel);flex-shrink:0;
  cursor:pointer;font-size:18px;box-shadow:var(--shadow);transition:transform .2s;display:flex;align-items:center;justify-content:center;}
.ghost-btn:active{transform:scale(.94);}

/* ===== layout ===== */
.layout{display:flex;gap:24px;padding:6px 22px 48px;}
.side{width:230px;flex-shrink:0;position:sticky;top:14px;align-self:flex-start;display:flex;flex-direction:column;gap:16px;}
#cats{display:flex;flex-direction:column;gap:5px;}
.cat{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:13px;cursor:pointer;border:1px solid transparent;
  font-weight:600;font-size:14px;color:var(--dim);transition:.18s;background:transparent;text-align:left;width:100%;white-space:nowrap;}
.cat:hover{background:var(--panel);color:var(--ink);}
.cat .ic{font-size:16px;}
.cat .n{flex:1;}
.cat .b{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--bg2);color:var(--dim);font-weight:700;}
.cat.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent;
  box-shadow:0 8px 20px rgba(124,92,255,.32);}
.cat.on .b{background:rgba(255,255,255,.25);color:#fff;}
.side-foot{padding:15px;border-radius:16px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);}
.count{font-weight:800;font-size:15px;}
.side-note{font-size:12px;color:var(--dim);margin-top:6px;line-height:1.4;}

/* ===== grid ===== */
.main{flex:1;min-width:0;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;}
.card{position:relative;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);
  box-shadow:var(--shadow);overflow:hidden;cursor:pointer;transition:transform .26s cubic-bezier(.34,1.56,.64,1),box-shadow .26s;}
.card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(124,92,255,.26);}
.card:active{transform:scale(.98);}
.card-stage{height:166px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(circle at 50% 40%,var(--bg2),var(--panel));}
.card-stage>div{max-width:100%;}
.card-foot{padding:12px 15px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px;}
.card-foot .nm{font-weight:700;font-size:13.5px;}
.card-foot .lic{font-size:10px;color:var(--dim);border:1px solid var(--line);padding:2px 7px;border-radius:99px;flex-shrink:0;}
/* кнопка-избранное на карточке */
.card .fav{position:absolute;top:10px;right:10px;z-index:2;width:32px;height:32px;border:none;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;background:rgba(20,16,40,.55);backdrop-filter:blur(6px);
  opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s,background .2s;}
.card:hover .fav,.card .fav.on{opacity:1;transform:scale(1);}
.card .fav svg{width:17px;height:17px;fill:rgba(255,255,255,.6);transition:fill .2s;}
.card .fav:hover svg{fill:#ff5d7a;}
.card .fav.on svg{fill:#ff4d6d;}
.card .fav:active{transform:scale(.85);}
/* категория «Избранное» */
.cat-fav .ci{display:inline-flex;align-items:center;}
.cat-fav .ci svg{width:15px;height:15px;fill:#ff4d6d;}
/* мини-кнопки в превью (избранное/поделиться) */
.pv-actions{display:flex;gap:8px;}
.mini-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;
  background:var(--bg2);color:var(--dim);font:600 12px 'Inter';transition:.2s;}
.mini-btn svg{fill:currentColor;}
.mini-btn:hover{color:var(--ink);border-color:var(--accent);}
.mini-btn.on{color:#ff4d6d;border-color:rgba(255,77,109,.5);background:rgba(255,77,109,.12);}
.mini-btn.on svg{fill:#ff4d6d;}

.empty{text-align:center;padding:70px 20px;color:var(--dim);font-size:16px;font-weight:600;}

/* ===== overlay / sheet ===== */
.overlay[hidden]{display:none!important;}
.overlay{position:fixed;inset:0;z-index:50;background:rgba(20,16,40,.5);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:24px;animation:fade .25s;}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{position:relative;width:min(960px,100%);max-height:90vh;display:flex;flex-direction:column;
  border-radius:24px;background:var(--panel);border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.4);
  animation:pop .3s cubic-bezier(.34,1.56,.64,1);overflow:hidden;}
@keyframes pop{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.grab{display:none;}
.sheet-head{display:flex;align-items:flex-start;gap:12px;padding:20px 22px 14px;border-bottom:1px solid var(--line);flex-shrink:0;}
.sheet-head .ht{flex:1;min-width:0;}
.sheet-head h2{font-size:20px;font-weight:800;letter-spacing:-.4px;}
.sheet-x{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);flex-shrink:0;
  background:var(--bg2);cursor:pointer;font-size:15px;color:var(--ink);display:flex;align-items:center;justify-content:center;}
.sheet-x:active{transform:scale(.92);}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.tag{font-size:11px;padding:3px 10px;border-radius:99px;background:var(--bg2);color:var(--dim);font-weight:600;}

.sheet-body{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:20px 22px;overflow:auto;flex:1;}
@media(max-width:820px){.sheet-body{grid-template-columns:1fr;gap:18px;}}

.preview-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.pv-title{font-weight:700;font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;}
.seg{display:flex;background:var(--bg2);border-radius:10px;padding:3px;gap:2px;}
.seg button{border:none;background:transparent;padding:6px 12px;border-radius:8px;font:600 12px 'Inter';cursor:pointer;color:var(--dim);}
.seg button.on{background:var(--panel);color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.1);}
.preview{min-height:180px;border-radius:16px;display:flex;align-items:center;justify-content:center;padding:18px;
  border:1px solid var(--line);overflow:hidden;transition:background .3s;}
.preview>div{max-width:100%;}
.preview.bg-light{background:#f6f4fc;}
.preview.bg-dark{background:#15102b;}
.preview.bg-grid{background-color:#171229;background-image:linear-gradient(45deg,#211b3f 25%,transparent 0,transparent 75%,#211b3f 0),linear-gradient(45deg,#211b3f 25%,transparent 0,transparent 75%,#211b3f 0);background-size:24px 24px;background-position:0 0,12px 12px;}
.preview.bg-grad{background:linear-gradient(135deg,#7C5CFF,#FF6FD8);}

/* переключатель фона превью */
.bg-swatches{display:inline-flex;gap:6px;align-items:center;margin-right:auto;}
.bg-swatches .sw{width:22px;height:22px;border-radius:7px;border:2px solid transparent;outline:1px solid var(--line);cursor:pointer;padding:0;transition:transform .15s;}
.bg-swatches .sw:hover{transform:scale(1.12);}
.bg-swatches .sw.on{border-color:var(--accent);outline-color:var(--accent);}
.sw-dark{background:#15102b;}
.sw-light{background:#f6f4fc;}
.sw-grid{background-color:#171229;background-image:linear-gradient(45deg,#3a3360 25%,transparent 0,transparent 75%,#3a3360 0),linear-gradient(45deg,#3a3360 25%,transparent 0,transparent 75%,#3a3360 0);background-size:8px 8px;background-position:0 0,4px 4px;}
.sw-grad{background:linear-gradient(135deg,#7C5CFF,#FF6FD8);}

/* тулбар грида */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.tb-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.tb-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--ink);cursor:pointer;font-weight:600;font-size:13.5px;transition:.18s;}
.tb-btn:hover{border-color:var(--accent);transform:translateY(-1px);}
.tb-btn:active{transform:scale(.97);}
.tb-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;}
.sortlbl{display:inline-flex;align-items:center;gap:8px;color:var(--dim);font-size:12.5px;font-weight:600;white-space:nowrap;}
#sort{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit;font-size:13px;cursor:pointer;}
#sort:focus{outline:none;border-color:var(--accent);}
.tagfilter{display:flex;align-items:center;gap:7px;}
.tag-active{display:inline-flex;align-items:center;gap:7px;padding:6px 8px 6px 13px;border-radius:99px;background:rgba(124,92,255,.16);border:1px solid rgba(124,92,255,.45);color:var(--ink);font-size:12.5px;font-weight:700;}
.tag-active button{border:none;background:rgba(255,255,255,.14);color:#fff;width:18px;height:18px;border-radius:50%;cursor:pointer;line-height:1;font-size:11px;display:inline-flex;align-items:center;justify-content:center;}
.tag-active button:hover{background:rgba(255,255,255,.28);}
.tag-click{cursor:pointer;transition:.15s;}
.tag-click:hover{background:var(--accent);color:#fff;}

/* выделение карточки с клавиатуры */
.card.kbd-sel{outline:2px solid var(--accent);outline-offset:3px;box-shadow:0 22px 50px rgba(124,92,255,.3);}

/* подсветка блока кода при обновлении */
#code.flash{animation:codeflash .55s ease;}
@keyframes codeflash{0%{background:rgba(124,92,255,.22);}100%{background:transparent;}}

/* мобильные вкладки Настройки/Код (скрыты на ПК) */
.mtabs{display:none;gap:8px;padding:0 18px 10px;}
.mtabs button{flex:1;padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--bg2);color:var(--dim);font:700 13.5px 'Inter';cursor:pointer;position:relative;}
.mtabs button.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.mtabs button .tdot{display:none;position:absolute;top:7px;right:9px;width:8px;height:8px;border-radius:50%;background:#FF6FD8;}
.mtabs button.has-new .tdot{display:block;animation:tdotpulse 1s ease infinite;}
@keyframes tdotpulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.5);opacity:.6;}}

.settings{margin-top:18px;}
.settings-h{font-weight:700;font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;}
.controls{display:flex;flex-direction:column;gap:14px;}
.ctrl{display:flex;flex-direction:column;gap:6px;}
.ctrl label{font-size:12.5px;font-weight:600;color:var(--dim);display:flex;justify-content:space-between;align-items:center;}
.ctrl input[type=text]{padding:11px 13px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);
  color:var(--ink);font:500 14px 'Inter';outline:none;width:100%;}
.ctrl input[type=text]:focus{border-color:var(--accent);}
.ctrl input[type=range]{accent-color:var(--accent);width:100%;height:24px;}
.ctrl input[type=color]{width:46px;height:34px;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer;padding:2px;flex-shrink:0;}
.ctrl select{padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font:500 14px 'Inter';width:100%;}
.ctrl .row{display:flex;align-items:center;gap:10px;}
.ctrl .val{font-weight:700;color:var(--accent);}

/* ===== code ===== */
.code-col{display:flex;flex-direction:column;min-width:0;}
.code-bar{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.code-tabs{display:flex;gap:6px;flex:1;flex-wrap:wrap;}
.code-tabs button{border:1px solid var(--line);background:var(--bg2);color:var(--dim);padding:7px 13px;border-radius:9px;
  font:600 12px 'JetBrains Mono';cursor:pointer;}
.code-tabs button.on{background:var(--accent);color:#fff;border-color:transparent;}
.copy-btn{padding:9px 16px;border-radius:10px;border:none;cursor:pointer;
  font:700 13px 'Inter';color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 6px 18px rgba(124,92,255,.32);transition:transform .2s;white-space:nowrap;}
.copy-btn:active{transform:scale(.95);}
.copy-btn.done{background:linear-gradient(135deg,var(--accent3),#2bb89f);}
.code-actions{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.act-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font:700 13px 'Inter';cursor:pointer;transition:.16s;}
.act-btn:hover{border-color:var(--accent);transform:translateY(-1px);}
.act-btn:active{transform:scale(.96);}
.act-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.code{flex:1;background:#0f0c22;border-radius:14px;padding:15px;overflow:auto;max-height:340px;min-height:120px;-webkit-overflow-scrolling:touch;}
.code code{font:500 12.5px/1.6 'JetBrains Mono',monospace;color:#d9d4ff;white-space:pre;}

/* ===== toast ===== */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(40px);opacity:0;
  background:#1c1733;color:#fff;padding:13px 22px;border-radius:13px;font:600 14px 'Inter';z-index:99;
  box-shadow:0 14px 40px rgba(0,0,0,.4);transition:.35s cubic-bezier(.34,1.56,.64,1);pointer-events:none;max-width:90vw;text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ===== tablet ===== */
@media(max-width:980px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;}
}

/* ===== mobile: sidebar -> top chips, modal -> bottom sheet ===== */
@media(max-width:760px){
  .top{padding:13px 16px;gap:10px;}
  .brand-t small{display:none;}
  .layout{flex-direction:column;gap:14px;padding:4px 16px 40px;}
  .side{width:100%;position:static;flex-direction:column;gap:10px;}
  #cats{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:4px;
    scrollbar-width:none;-ms-overflow-style:none;margin:0 -16px;padding-left:16px;padding-right:16px;}
  #cats::-webkit-scrollbar{display:none;}
  .cat{width:auto;flex-shrink:0;padding:9px 14px;background:var(--panel);border:1px solid var(--line);}
  .cat .b{display:none;}
  .side-foot{display:none;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
  .card-stage{height:132px;}
  /* на тач-экранах нет hover — показываем «сердечко» всегда */
  .card .fav{opacity:1;transform:scale(1);width:30px;height:30px;}
  .preview-toolbar{flex-wrap:wrap;gap:8px;}
  .mini-btn span{display:none;}
  .mini-btn{padding:8px 11px;}

  /* модалка как нижний лист на весь экран */
  .overlay{padding:0;align-items:flex-end;}
  .sheet{width:100%;max-height:100dvh;height:100dvh;border-radius:0;animation:slideup .3s cubic-bezier(.4,0,.2,1);}
  .grab{display:block;width:40px;height:4px;border-radius:99px;background:var(--line);margin:8px auto 0;flex-shrink:0;}
  .sheet-head{padding:10px 18px 12px;position:sticky;top:0;background:var(--panel);z-index:3;}
  .sheet-head h2{font-size:18px;}
  .sheet-body{padding:14px 18px calc(20px + env(safe-area-inset-bottom));}
  .preview{min-height:150px;}
  .code{max-height:none;}
  .code-bar{position:sticky;top:0;}
  /* превью всегда сверху; вкладки переключают Настройки <-> Код */
  .mtabs{display:flex;}
  .sheet-body[data-mp="settings"] .code-col{display:none;}
  .sheet-body[data-mp="code"] .settings{display:none;}
  /* крупнее тач-таргеты у контролов */
  .ctrl input[type=range]{height:36px;}
  .ctrl input[type=color]{width:54px;height:42px;}
  .ctrl input[type=text]{padding:13px;font-size:16px;}
  .ctrl select{padding:13px 12px;font-size:16px;}
  .ctrl label{font-size:13.5px;}
  .toolbar{gap:8px;}
  .tb-btn{padding:10px 13px;}
  .sortlbl{font-size:12px;}
}
@media(max-width:380px){
  .grid{grid-template-columns:1fr 1fr;}
}