.elementor-86 .elementor-element.elementor-element-3341e1c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-86 .elementor-element.elementor-element-0e2d900{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:50px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;}.elementor-86 .elementor-element.elementor-element-0baa6fe{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-86 .elementor-element.elementor-element-af456d5{--display:flex;}.elementor-86 .elementor-element.elementor-element-23f7301{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-86 .elementor-element.elementor-element-c1502dd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-86 .elementor-element.elementor-element-0baa6fe{--width:50%;}.elementor-86 .elementor-element.elementor-element-23f7301{--width:50%;}}/* Start custom CSS for html, class: .elementor-element-f422745 */.card{
      background:#fff;
      width:460px;
      max-width:94%;
      border-radius:14px;
      padding:26px;
      box-shadow:0 8px 30px rgba(16,24,40,0.08);
      text-align:center;
    }

    h1{font-size:20px;margin:0 0 12px}

    .tip{font-size:13px;color:#666;margin-bottom:12px}

    /* área de seleção HSV */
    .color-area{
      width:320px;
      height:220px;
      max-width:100%;
      margin:0 auto;
      border-radius:10px;
      position:relative;
      cursor:crosshair;
      box-shadow:0 2px 8px rgba(2,6,23,0.06);
      overflow:hidden;
    }

    /* o cursor */
    .cursor{
      position:absolute;
      width:16px;height:16px;
      border-radius:50%;
      transform:translate(-8px,-8px);
      pointer-events:none;
      border:2px solid #fff;
      box-shadow:0 0 0 2px rgba(0,0,0,0.25);
    }

    /* barra de hue (gradiente real) */
    .hue{
      width:320px;
      max-width:100%;
      height:16px;
      border-radius:8px;
      margin:14px auto 12px;
      background: linear-gradient(
        to right,
        #ff0000 0%,
        #ffea00 15%,
        #00ff00 30%,
        #00ffff 50%,
        #0000ff 70%,
        #ff00ff 85%,
        #ff0000 100%
      );
      position:relative;
    }
    .hue input[type=range]{
      -webkit-appearance:none; appearance:none;
      width:100%; height:16px; background:transparent; position:absolute; left:0; top:0;
      outline:none; cursor:pointer;
    }
    .hue input[type=range]::-webkit-slider-thumb{
      -webkit-appearance:none; appearance:none;
      width:14px;height:22px;border-radius:3px;background:#fff;border:2px solid #000;margin-top:-3px;
    }

    .preview{
      width:120px;height:64px;border-radius:8px;margin:12px auto;border:1px solid #e6e6e6;
    }

    .fields{ text-align:left; margin-top:10px }
    .fields label{ display:block; color:#555; font-size:13px; margin-top:10px }
    .fields input{ width:100%; padding:8px;border-radius:8px;border:1px solid #ddd;background:#fafafa }

    .row-actions{display:flex;gap:8px;justify-content:center;margin-top:14px}
    button{padding:10px 14px;border-radius:8px;border:0;cursor:pointer;background:#0078D7;color:#fff;font-weight:600}
    button.ghost{background:#e6e6e6;color:#111}/* End custom CSS */